@cjlapao/ui-kit-vue 0.2.0 → 0.2.3

package/dist/types/common/theme/Theme.d.ts

@@ -1,15 +1,589 @@
-export type ButtonVariant = "solid" | "soft" | "outline" | "ghost" | "link" | "clear" | "icon" | "glass";
+import { type GlassOpacity } from "./glass";
+export declare const BUTTON_VARIANTS: readonly ["solid", "soft", "outline", "ghost", "link", "clear", "icon", "glass"];
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+/** Label weight. Derived from the runtime list for the same reason. */
+export declare const BUTTON_WEIGHTS: readonly ["normal", "medium", "semibold", "bold"];
+export type ButtonWeight = (typeof BUTTON_WEIGHTS)[number];
+/**
+ * The 21 Tailwind palette colours the kit supports.
+ *
+ * `TrueColor` is derived from this array rather than declared alongside it, so
+ * the runtime list and the type can never drift — adding a colour here adds it
+ * to the type, the generated theme, and every consumer that enumerates colours.
+ */
+export declare const TRUE_COLORS: readonly ["red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "rose", "slate", "gray", "zinc", "neutral", "stone"];
 /**
  * TrueColor is the only valid color type in the ui-kit theme system.
- * It comprises 21 Tailwind palette color names (red through stone, including fuchsia and rose).
  * All components, tokens, and utilities must use TrueColor exclusively.
  */
-export type TrueColor = "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone";
+export type TrueColor = (typeof TRUE_COLORS)[number];
+/**
+ * The fill class for a dot/swatch of each TrueColor: the 500 step in light
+ * mode, the 400 step in dark. Literal per colour — never interpolated — so
+ * Tailwind's scanner always sees them; the helper is what components share.
+ */
+export declare const TRUE_COLOR_DOT_CLASSES: Record<TrueColor, string>;
+/** Dot/swatch fill for a TrueColor. */
+export declare function getTrueColorDotClass(tone: TrueColor): string;
+/**
+ * The ink class for a TrueColor: the 500 step in light mode, the 400 step
+ * in dark — what SVG strokes (`stroke-current`) and legends use where a
+ * fill class would not apply. Literal per colour, as above.
+ */
+export declare const TRUE_COLOR_TEXT_CLASSES: Record<TrueColor, string>;
+/** Ink (stroke/text) class for a TrueColor. */
+export declare function getTrueColorTextClass(tone: TrueColor): string;
 /**
  * Shared size type used across all frameworks and components.
  * Replaces both the old ThemeSize (dead code) and ModalSize.
  */
 export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "2xl" | "3xl" | "full";
+/**
+ * The size scale every interactive control shares. Derived from the runtime
+ * list so the two cannot drift, and so demos/docs can enumerate it.
+ */
+export declare const CONTROL_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
+export type ControlSize = (typeof CONTROL_SIZES)[number];
+/**
+ * The two layouts a linear control can take.
+ *
+ * This union was declared independently in `Slider`, `Rating`, `AppDivider`,
+ * `Stepper` and `Tabs` (five names for one scale), so a rename or addition in
+ * the theme would never reach any of them. It lives here once; each control
+ * keeps its own alias (`SliderOrientation`, …) so call sites and the barrels
+ * are unaffected.
+ */
+export declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type Orientation = (typeof ORIENTATIONS)[number];
+/**
+ * The geometry of an interactive control at each shared size.
+ *
+ * Every control in the trigger family needs the same answer to "how big is the
+ * icon, the box, the spinner at this size". That table was copy-pasted into
+ * `Button` (text padding, icon-only padding, icon and spinner sizes) and
+ * `IconButton` (square box, icon, `<Spinner>` size) — two copies of one scale,
+ * drifting independently. It lives here once; the components import it.
+ */
+export type ControlSizeTokens = {
+    /** Font size and padding of a labelled control. */
+    text: string;
+    /** Padding of a square (icon-only) control. */
+    iconOnly: string;
+    /** Fixed box of a square control (`IconButton`). */
+    box: string;
+    /** Space between an icon and its label. */
+    gap: string;
+    /** Icon dimensions at this control size — identical across controls. */
+    icon: string;
+    /** Dimensions of the inline spinner inside a labelled control. */
+    spinner: string;
+    /** Size to pass to `<Spinner>` inside a square control. */
+    spinnerSize: ControlSize;
+};
+export declare const getControlSizeTokens: (size: ControlSize) => ControlSizeTokens;
+/**
+ * The corner radius every trigger-family control shares, so a `Button` next to
+ * an `Input` is the same box (both `rounded-lg`). Panel-family containers use
+ * `DEFAULT_SURFACE_CORNER` instead — a different scale, deliberately.
+ */
+export declare const DEFAULT_TRIGGER_CORNER = "rounded-lg";
+/**
+ * Strength of a decorative glow behind a control (currently `SearchBar`'s
+ * gradient variant).
+ */
+export declare const GLOW_INTENSITIES: readonly ["subtle", "soft", "medium", "strong"];
+export type GlowIntensity = (typeof GLOW_INTENSITIES)[number];
+/**
+ * The kit's standing glow intensity: the tone reads as a hint at rest and
+ * the field itself brightens it on focus — the glow should never be the
+ * loudest thing in a form. Gradient fields destructure this as their prop
+ * default, and `getGlowTokens` falls back to it.
+ */
+export declare const DEFAULT_GLOW_INTENSITY: GlowIntensity;
+/**
+ * Surface treatments shared by every text-entry control — `Input`, `Textarea`,
+ * `SearchBar`. Defined once here so the three are the same box when they sit
+ * next to each other in a form.
+ */
+export declare const INPUT_VARIANTS: readonly ["flat", "elevated", "ghost", "underline", "glass", "gradient"];
+export type InputVariant = (typeof INPUT_VARIANTS)[number];
+export type InputVariantTokens = {
+    /** Border, fill, radius, shadow, backdrop. */
+    surface: string;
+    /** Text and placeholder colours. */
+    text: string;
+    /** Resting colour for a leading icon or other adornment. */
+    icon: string;
+    /** True when the surface is see-through and sits over unknown content. */
+    translucent: boolean;
+};
+/**
+ * The variant's surface with its border colour removed, keeping the width and
+ * sides.
+ *
+ * A validation state paints its own border colour, and `border-rose-500`
+ * beside the variant's `border-neutral-300` is a same-specificity collision
+ * whose winner is emission order — measured in the built stylesheet,
+ * `.border-emerald-500` lands *before* `.border-neutral-300` and
+ * `.border-rose-500` after it, so an errored field turned rose and a
+ * successful one stayed grey. Strip the colour so only one class can apply.
+ */
+export declare const stripBorderColor: (surface: string) => string;
+/** True when a caller-supplied class string sets a text colour of its own. */
+export declare const hasTextColor: (className?: string) => boolean;
+/**
+ * A class string with its text colour removed.
+ *
+ * Same trap as `stripBorderColor`: a component's own `text-neutral-500` and a
+ * caller's `text-emerald-600` are the same specificity, so the winner is
+ * emission order in the built stylesheet — which means a documented override
+ * works for some colours and silently does nothing for others.
+ */
+export declare const stripTextColor: (className: string) => string;
+/**
+ * The field surface tokens. `corner="auto"` (the default) leaves the radius
+ * baked into the surface in place — `rounded-lg`, the theme's control corner
+ * (`DEFAULT_CONTROL_CORNER`), one step looser than the container default so
+ * a field sits proud of the card it lives in. Any other corner token
+ * replaces it. (`underline` paints no box, so a corner there has nowhere
+ * to land — honestly no-op.)
+ */
+export declare const getInputVariantTokens: (variant: InputVariant, tone?: TrueColor, corner?: SurfaceCorner) => InputVariantTokens;
+export type FieldToneTokens = {
+    /** Border colour while anything inside the field has focus. */
+    focusBorder: string;
+    /** Glow ring while anything inside the field has focus. */
+    focusRing: string;
+    /** Leading/trailing icon colour while the field has focus. */
+    icon: string;
+    /** Focus ring for an inline trailing button. */
+    buttonFocusRing: string;
+};
+export declare const getFieldToneTokens: (color: TrueColor) => FieldToneTokens;
+export type FieldSizeTokens = {
+    px: string;
+    py: string;
+    /** `underline` has no box to inset from, and needs room above the rule. */
+    underlinePy: string;
+    text: string;
+    icon: ControlSize;
+    /** Inline trailing button. */
+    button: string;
+};
+/** Padding and type scale, so any two fields line up when stacked. */
+export declare const FIELD_SIZE_STYLES: Record<ControlSize, FieldSizeTokens>;
+export declare const getFieldSizeTokens: (size: ControlSize) => FieldSizeTokens;
+/**
+ * Border only at rest; the ring is part of the focus state, exactly as it is
+ * for the tone tokens. A status used to add a bare `ring-2 ring-inset` at rest
+ * with no ring *colour* — an unset ring colour resolves to `currentColor`, so
+ * every errored or successful field carried a near-black 2px halo inside its
+ * coloured border.
+ *
+ * These also carry no copy colour. Forcing `text-neutral-900 dark:text-neutral-100`
+ * alongside the border costs an errored `underline` or `glass` field the
+ * high-contrast pair it needs to stay legible over a backdrop.
+ */
+export declare const FIELD_STATUS_CLASSES: Record<"error" | "success", string>;
+/**
+ * Surface treatments for containers — `Panel` and anything built on it
+ * (`FormSection`). Kept here so the type and the text that sits on those
+ * surfaces are defined once, not per component.
+ */
+export declare const SURFACE_VARIANTS: readonly ["elevated", "outlined", "subtle", "tonal", "default", "glass", "simple", "liquid-glass"];
+export type SurfaceVariant = (typeof SURFACE_VARIANTS)[number];
+/**
+ * The button a card surface implies — what a card CTA wears when it is not
+ * given a variant of its own. An outlined card offers an outlined button.
+ */
+export declare const SURFACE_TO_BUTTON_VARIANT: Record<SurfaceVariant, ButtonVariant>;
+/**
+ * The surface family plus `plain` — "draw a card, or draw nothing at all".
+ *
+ * A control that may already sit inside a card the app owns needs a way to say
+ * "no surface of my own"; nine components had each spelled that out for
+ * themselves (`PanelVariant | "plain"` seven times, `[...SURFACE_VARIANTS,
+ * "plain"]` twice) and only one of them exported a runtime list, so demos could
+ * not enumerate the others. Same list, nine names: the day `SURFACE_VARIANTS`
+ * gains a member, eight of them keep working only by luck.
+ */
+export declare const PLAIN_SURFACE_VARIANTS: readonly ["elevated", "outlined", "subtle", "tonal", "default", "glass", "simple", "liquid-glass", "plain"];
+export type PlainSurfaceVariant = (typeof PLAIN_SURFACE_VARIANTS)[number];
+export type SurfaceTextTokens = {
+    /** Section and card headings. */
+    heading: string;
+    /** Body copy. */
+    body: string;
+    /** Secondary copy — descriptions under a label. */
+    description: string;
+    /** Tertiary copy — hints, counters, "optional" markers. */
+    muted: string;
+    /** Hairline between regions of the surface. */
+    divider: string;
+    translucent: boolean;
+};
+export declare const getSurfaceTextTokens: (variant: SurfaceVariant) => SurfaceTextTokens;
+/**
+ * A full-bleed interactive region on a container surface — a disclosure header,
+ * a clickable card row.
+ *
+ * Two rules learned the hard way, both encoded here so callers cannot get them
+ * wrong: a ring colour is inert without a ring *width*, and an outer ring is
+ * clipped by any ancestor with `overflow: hidden` (which every `Panel` has), so
+ * the ring is inset.
+ */
+export type SurfaceTriggerTokens = {
+    /** Background wash on hover. Low-alpha, so it works on glass too. */
+    hover: string;
+    /** Complete focus indicator: outline reset, width, inset, colour. */
+    focusRing: string;
+};
+export declare const getSurfaceTriggerTokens: (color: TrueColor) => SurfaceTriggerTokens;
+/**
+ * The `CollapsibleHelpText` trigger — the shared surface-trigger tokens plus
+ * the accent glyph, icon chip and title line.
+ *
+ * The accent sits ON a same-hue `bg-{c}-50` chip, so it steps to the 700
+ * light shade rather than the usual 600: hue stacked on its own 50 shade is
+ * where 600 dropped under the 3:1 non-text bar (yellow landed ≈2.5:1).
+ */
+export type CollapsibleHelpToneTokens = SurfaceTriggerTokens & {
+    /** Chevron and icon glyph. */
+    accent: string;
+    /** Icon chip fill. */
+    iconBg: string;
+    /** Title line. */
+    title: string;
+};
+export declare const getCollapsibleHelpToneTokens: (color: TrueColor) => CollapsibleHelpToneTokens;
+export declare const getAppDividerToneTokens: (color: TrueColor) => string;
+/**
+ * Corner radius scale for container surfaces.
+ *
+ * The token names are historical and do NOT map 1:1 onto Tailwind's radius
+ * utilities — `rounded-sm` here is Tailwind's `rounded-lg`. They are kept as
+ * they are because the whole kit already calls them by these names and the
+ * scale itself is monotonic and correct; renaming would silently reshape every
+ * existing card. `getSurfaceCornerRem` exposes the real radius so a demo can
+ * label them honestly.
+ *
+ * Capsule radii (`rounded-full` / `pill`) are not part of the container scale:
+ * a capsule is a shape, and the `Pill` component owns it. Containers that need
+ * one take a `rounded-full` class directly.
+ */
+export declare const SURFACE_CORNERS: readonly ["auto", "none", "rounded", "rounded-sm", "rounded-md", "rounded-lg", "rounded-xl"];
+export type SurfaceCorner = (typeof SURFACE_CORNERS)[number];
+/** The radius a container uses when the caller does not pick one. */
+export declare const DEFAULT_SURFACE_CORNER: Exclude<SurfaceCorner, "auto">;
+/**
+ * The radius a control uses when the caller does not pick one — the
+ * input/button/segment scale, one step looser than the container default
+ * (`rounded-md` → `rounded-lg`) on purpose, so a control sits visibly proud
+ * of the card it lives in. Components whose docs say "the control corner
+ * from the theme" take this.
+ */
+export declare const DEFAULT_CONTROL_CORNER: Exclude<SurfaceCorner, "auto">;
+/**
+ * The container surface a field implies — used by composite controls (the
+ * `DatePicker` calendar's `panelVariant="auto"`) so their furniture reads as
+ * part of the field instead of a foreign surface dropped beside it. Field
+ * surfaces have no exact container twin, so this picks the nearest fit:
+ * `flat` is a bordered box → `outlined`; `elevated` and the lifted `gradient`
+ * → `elevated`; `ghost`/`underline` carry no box, so `subtle`; `glass` →
+ * `glass`. (Deliberately not `tonal`/`simple` — the hover-filled tints read
+ * as chrome, not as a floating calendar.)
+ */
+export declare const SURFACE_VARIANT_FOR_FIELD: Record<InputVariant, SurfaceVariant>;
+/**
+ * The surface variants that *are* glass — the ones where chrome has to sit
+ * *in* glass rather than on it. Every composite (calendar panels, array
+ * cards, the variable picker) used to keep its own copy of this two-item
+ * list, which is exactly how one of them ends up rendering a solid button
+ * on a blurred card.
+ */
+export declare const isGlassSurface: (variant: PlainSurfaceVariant) => boolean;
+/** The panel tone that follows a field: the field keeps its accent as the
+ *  selected-day tint either way, so the fill takes the neutral default. */
+export declare const PANEL_TONE_FOR_FIELD: "neutral";
+/**
+ * The field surface a container implies — the reverse pairing: composite
+ * controls whose rows of inputs sit *inside* a card (the `KeyValueArrayField`)
+ * take their inputs' variant from the card so nothing reads as slabs punched
+ * through it (`"auto"`). It is SplitView's search mapping, generalised: boxed
+ * surfaces carry bordered `flat` fields, tinted ones the boxless `ghost`,
+ * glass needs glass, and a plain (cardless) host gives the default field.
+ */
+export declare const INPUT_VARIANT_FOR_SURFACE: Record<PlainSurfaceVariant, InputVariant>;
+/**
+ * The tone a surface takes when the caller does not pick one. Every surface
+ * component — `Panel` and its wrappers — resolves to this same constant, so a
+ * default cannot be restated wrongly in one of them.
+ */
+export declare const DEFAULT_SURFACE_TONE: TrueColor;
+/**
+ * The `EmptyState` size for a pane that has its own header — a `Panel`
+ * sibling like `PagedPanel` or `TagPanel`. `EmptyState`'s own scale is tuned
+ * for full-page views (its `md` is a text-lg title with an h-12 disc), so
+ * inside a pane the empty/error state must never outgrow the pane's header:
+ * pick it at least two steps under the pane's control size.
+ */
+/**
+ * The expand/retract cascade shared by the kit's unfolding collections —
+ * `ColorSwatches`, `TagPanel`: a left-to-right step per item opening, a
+ * swifter reverse ripple closing, and a hold long enough for the fade to
+ * finish before the condensed geometry commits.
+ */
+export declare const CASCADE_EXPAND: {
+    /** Per-item cascade step, expanding. */
+    readonly stepMs: 20;
+    /** Per-item step, retracting — swift, right to left. */
+    readonly retractStepMs: 8;
+    /** How long the expanded layout is held while items step away. */
+    readonly holdMs: 300;
+    /** How long the clip takes to grow. */
+    readonly growMs: 400;
+};
+export declare const PANE_EMPTY_STATE_SIZE: Record<ControlSize, ControlSize>;
+export declare const getSurfaceCornerClass: (corner: SurfaceCorner) => string;
+export declare const getSurfaceCornerRem: (corner: SurfaceCorner) => string;
+/**
+ * Container padding, on the same scale every control uses plus a `none` step,
+ * so a Panel's padding and the Button inside it are described in one language.
+ */
+export declare const SURFACE_PADDINGS: readonly ["none", "xs", "sm", "md", "lg", "xl"];
+export type SurfacePadding = "none" | ControlSize;
+/**
+ * The header seam. `SideMenu` draws it below its logo block, and `PageHeader`
+ * continues it into the main column; both paint these same classes on their
+ * facing edges, so the horizontal line the user sees crossing the shell is
+ * spelled exactly once. A component that rounded, padded or recoloured past
+ * these would visibly break the seam where the two meet.
+ */
+export declare const SIDE_MENU_HEADER_HEIGHT = "h-15";
+export declare const SIDE_MENU_HEADER_SEAM = "border-neutral-200 dark:border-neutral-700";
+export declare const SIDE_MENU_HEADER_FILL = "bg-white dark:bg-neutral-900";
+/**
+ * The webkit scrollbar paint every native scroller in the kit shares — a thin
+ * rounded thumb on a transparent track. These live here as complete literals
+ * (Tailwind extracts them from this file) so no component re-derives the
+ * recipe and quietly drifts a shade.
+ *
+ * Two tiers, one shade apart:
+ * - `THIN_SCROLLBAR` for card and panel bodies, where the surface itself
+ *   frames the gutter.
+ * - `THIN_SCROLLBAR_FIELD` steps the thumb one shade darker for white
+ *   popovers, inputs and bare scroll regions, where the panel-tier thumb
+ *   disappears against the field.
+ *
+ * Scrollers that also scroll horizontally add their own
+ * `[&::-webkit-scrollbar]:h-*` alongside the constant. `ScrollArea`
+ * deliberately opts out — it hides the native scrollbar and paints its own
+ * overlay thumb.
+ */
+export declare const THIN_SCROLLBAR = "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-200 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-600 [&::-webkit-scrollbar-track]:bg-transparent";
+export declare const THIN_SCROLLBAR_FIELD = "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-600 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-400 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:bg-transparent";
+/** The padding a container uses when the caller does not pick one. */
+export declare const DEFAULT_SURFACE_PADDING: SurfacePadding;
+export declare const getSurfacePaddingClass: (padding: SurfacePadding) => string;
+/** Every padding token but `none`, for the callers that require a real inset. */
+export declare const getSurfacePaddingClasses: () => Record<SurfacePadding, string>;
+/**
+ * The tones that read as "no tint". Consumers that tint chrome per tone
+ * (Table's header band, for instance) route these through the neutral
+ * treatment instead of painting a grey-blue header.
+ */
+export declare const NEUTRAL_TONES: TrueColor[];
+/**
+ * Cell density for data grids. Deliberately orthogonal to the surface
+ * variant: the variant decides how the container is drawn, the density how
+ * tight the cells inside it sit. A compact table on glass must read the same
+ * as a compact table on an outlined card.
+ */
+export declare const TABLE_DENSITIES: readonly ["default", "compact", "minimal"];
+export type TableDensity = (typeof TABLE_DENSITIES)[number];
+export type TableDensityTokens = {
+    /** Padding + text size for body and header cells. */
+    cell: string;
+    /** Leading cell of a row (overrides `cell`'s left padding). */
+    sideLeft: string;
+    /** Trailing cell of a row (overrides `cell`'s right padding). */
+    sideRight: string;
+    /** Vertical padding inside the cell's inner flex wrapper. */
+    contentVertical: string;
+};
+export declare const getTableDensityTokens: (density: TableDensity) => TableDensityTokens;
+/**
+ * Geometry and opacity of the `gradient` variant's glow.
+ *
+ * `pad` is reserved on the control's own wrapper and `inset` positions the glow
+ * inside it, so the halo is drawn **within the control's layout box**. Painting
+ * it outside — the obvious way — means any ancestor with `overflow: auto`
+ * clips it, and `Panel`'s body is `overflow-auto` by default. Same rule as the
+ * inset focus ring.
+ */
+export type GlowTokens = {
+    /**
+     * Padding on the wrapper — sized so the shadow's full reach (offset +
+     * spread + blur/2) lands inside the box, where no clipping ancestor can
+     * slice the glow.
+     */
+    pad: string;
+    /** Positions the emitter exactly over the field, inside the pad. */
+    inset: string;
+    /** Shadow blur radius in px. */
+    blur: number;
+    /** Shadow spread in px. */
+    spread: number;
+    /** How far apart the two colour lobes sit, in px — the gradient axis. */
+    offset: number;
+    idleOpacity: number;
+    focusOpacity: number;
+};
+export declare const getGlowTokens: (intensity: GlowIntensity) => GlowTokens;
+/**
+ * Glow gradient stops: the tone's 600 and 400 shades, read from Tailwind's own
+ * custom properties rather than a hard-coded hex table.
+ */
+export declare const resolveGlowGradient: (tone: TrueColor, from?: string, to?: string) => [string, string];
+/**
+ * Surface treatments for the `SideMenu` container.
+ *
+ * `sidebar` is the kit's standing look (a translucent blur pushed into the
+ * layout), `inset` is a flat panel with a hairline on the content edge,
+ * `floating` is a detached rounded card, `floating-glass` is that card in the
+ * kit's liquid-glass language, and `glass` is the liquid-glass language flush
+ * in the layout — both glass treatments are tinted with the menu's tone. The
+ * rows inside a menu take the matching treatment automatically.
+ */
+export declare const SIDEBAR_VARIANTS: readonly ["sidebar", "inset", "floating", "floating-glass", "glass"];
+export type SidebarVariant = (typeof SIDEBAR_VARIANTS)[number];
+/**
+ * How a `SideMenu` collapses on desktop.
+ *
+ * `icon` shrinks it to an icon rail, `offcanvas` removes the panel from the
+ * layout entirely (a small handle at the edge opens it again), and `none`
+ * makes the panel non-collapsible.
+ */
+export declare const SIDEBAR_COLLAPSIBLE_MODES: readonly ["icon", "offcanvas", "none"];
+export type SidebarCollapsible = (typeof SIDEBAR_COLLAPSIBLE_MODES)[number];
+/** Which edge of the layout the `SideMenu` sits on. */
+export declare const SIDEBAR_SIDES: readonly ["left", "right"];
+export type SidebarSide = (typeof SIDEBAR_SIDES)[number];
+/**
+ * The media query at which a responsive `SideMenu` becomes an offcanvas
+ * overlay (below it) instead of using its desktop collapsible mode (above it).
+ */
+export declare const SIDEBAR_MOBILE_QUERY = "(max-width: 1023px)";
+export interface SideMenuItemTokens {
+    /** Fill of the active row. */
+    bg: string;
+    /** Copy of the active row. */
+    text: string;
+    /** Wash under the cursor on an idle row. */
+    hoverBg: string;
+    /** Copy of an idle row under the cursor. */
+    hoverText: string;
+    /** Icon of the active row. */
+    iconActive: string;
+    /** Icon of an idle row under the cursor. */
+    iconHover: string;
+}
+export declare const getSideMenuItemTokens: (color: TrueColor) => SideMenuItemTokens;
+/**
+ * Resting copy for an idle `SideMenu` row, per surface context.
+ *
+ * A see-through surface composites over unknown content, so the light end of
+ * the neutral scale disappears on it — the same two-step rule as
+ * `getSurfaceTextTokens`.
+ */
+export declare const SIDEBAR_IDLE_COPY: {
+    readonly solid: {
+        readonly text: "text-neutral-600 dark:text-neutral-400";
+        readonly icon: "text-neutral-400 dark:text-neutral-500";
+    };
+    readonly glass: {
+        readonly text: "text-neutral-800 dark:text-neutral-100";
+        readonly icon: "text-neutral-600 dark:text-neutral-300";
+    };
+};
+export type SidebarIdleCopyKind = keyof typeof SIDEBAR_IDLE_COPY;
+export interface SidebarSurfaceTokens {
+    /** Fill and blur of the layer painted behind the content. */
+    fill: string;
+    /**
+     * Opaque counterpart of `fill`, for states where the panel grows over other
+     * content (the hover-rail expansion) and must not show it through. A
+     * translucent `fill` there reads as a second, see-through layer.
+     */
+    solidFill: string;
+    /** Edge treatment. Empty when the panel is flush and borderless. */
+    border: string;
+    /** Which edges carry the border: the content-facing one only, or all. */
+    borderSides: "start" | "all";
+    /** Shadow cast toward the content (left-side panel). */
+    shadow: string;
+    /** Shadow cast toward the content (right-side panel). */
+    shadowRight: string;
+    /** Corner radius. Empty when flush. */
+    radius: string;
+    /** Offset from the layout edges ("" = flush, a margin when detached). */
+    offset: string;
+    /** Whether the row copy needs the see-through contrast step. */
+    idleCopy: SidebarIdleCopyKind;
+    /** Hairline between regions of the panel (dividers, section seams). */
+    divider: string;
+    /** Tertiary copy — section titles, the empty-search note, idle glyphs. */
+    muted: string;
+}
+/**
+ * The container treatment for a `SideMenu` variant. The glass treatments are
+ * resolved from the shared glass module at the call site, so their fill is
+ * tinted with the menu's tone and cannot drift from `Panel`'s glass.
+ * `floating-glass` is the glass treatment with the floating card's geometry
+ * (offset, radius) layered on top.
+ */
+export declare const getSidebarSurfaceTokens: (variant: SidebarVariant, color: TrueColor) => SidebarSurfaceTokens;
+/**
+ * The tone of a `Breadcrumb` — what the links turn into under the cursor,
+ * what the current crumb is painted with, and the ring a crumb focuses with.
+ *
+ * The copy pair follows the kit's contrast rule for text on the page
+ * background (the one `Button`'s `link` treatment follows): `-700` light —
+ * measured min 4.93:1 across the 21 tones — and `-300` dark. The old inline
+ * `-600`/`-400` hover pair was the mid-luminance band that whole rule exists
+ * to leave: `{c}-600` on white measured 2.94:1 on yellow.
+ */
+export type BreadcrumbToneTokens = {
+    /** Copy of a crumb under the cursor. */
+    hover: string;
+    /** Copy of the crumb that *is* the current page. */
+    current: string;
+    /** Focus ring of a crumb link, including its `focus-visible:` prefix. */
+    focusRing: string;
+};
+export declare const getBreadcrumbToneTokens: (color: TrueColor) => BreadcrumbToneTokens;
+/**
+ * Geometry of a `Breadcrumb` at each shared control size.
+ *
+ * Anchored to the control scale — the text step is `getControlSizeTokens`'
+ * at every size — but the chip insets and icons are the compact versions of
+ * those steps, because a crumb is hierarchy copy that happens to be a link,
+ * not a control: the trigger-family paddings would space the trail wider
+ * than the sentence it sits in. Same precedent as the Toast size table.
+ */
+export type BreadcrumbSizeTokens = {
+    /** Crumb text size — the control scale's step. */
+    text: string;
+    /** Hit-area inset of the crumb chip. */
+    chip: string;
+    /** Space between a crumb's icon and its label. */
+    gap: string;
+    /** Icon dimensions. */
+    icon: string;
+    /** Separator glyph dimensions. */
+    separator: string;
+};
+export declare const getBreadcrumbSizeTokens: (size: ControlSize) => BreadcrumbSizeTokens;
 type ButtonTheme = Record<ButtonVariant, Record<TrueColor, string>>;
 type ButtonHoverTheme = Record<ButtonVariant, Record<TrueColor, string>>;
 type ButtonActiveTheme = Record<ButtonVariant, Record<TrueColor, string>>;
@@ -50,6 +624,12 @@ type TabsColorTokens = {
 type TabsTheme = Record<TrueColor, TabsColorTokens>;
 type PanelToneConfig = {
     border: string;
+    /**
+     * Hairline for the `outlined` variant. Deliberately lighter than `border`
+     * and paired with a low-alpha dark value, so the outline reads as a hairline
+     * in both modes instead of a hard rule in light mode.
+     */
+    outlineBorder: string;
     heading: string;
     muted: string;
     badge: string;
@@ -80,6 +660,7 @@ type BadgeTheme = Record<TrueColor, string>;
 type PillTheme = Record<TrueColor, Record<"solid" | "soft" | "outline", {
     base: string;
     border?: string;
+    hover?: string;
 }>>;
 type AlertTheme = Record<TrueColor, {
     subtle: string;
@@ -135,9 +716,164 @@ export declare const getButtonHoverClasses: (variant: ButtonVariant, color: True
 export declare const getButtonActiveClasses: (variant: ButtonVariant, color: TrueColor) => string;
 export declare const getButtonActiveHoverClasses: (variant: ButtonVariant, color: TrueColor) => string;
 export declare const getButtonBaseClasses: (variant: ButtonVariant, color: TrueColor) => string;
+/**
+ * The `ButtonVariant`s that read as a slider.
+ *
+ * `link` and `clear` are text treatments — a slider has no text to treat —
+ * and `icon` is a square affordance, so all three are excluded rather than
+ * aliased onto something else. What remains covers the full range a track
+ * can express: a saturated fill, a tinted one, a bordered wash, a quiet
+ * translucent one and a frosted one.
+ */
+export declare const SLIDER_VARIANTS: readonly ["solid", "soft", "outline", "ghost", "glass"];
+export type SliderVariant = (typeof SLIDER_VARIANTS)[number];
+export interface SliderVariantTokens {
+    /** Paint for the active track segment, from the start (or min handle) to the value. */
+    fill: string;
+    /** Border of the handle. */
+    handle: string;
+    /** The handle's focus-ring colour, including its `focus-visible:` prefix. */
+    ring: string;
+}
+/**
+ * Slider treatments — the same visual language `Button` uses, mapped onto a
+ * slider's two paintable surfaces (the track segment and the handle) so a
+ * slider dropped next to a button row reads as part of the same UI.
+ */
+export declare const getSliderVariantTokens: (color: TrueColor, variant: SliderVariant) => SliderVariantTokens;
+/**
+ * The `ButtonVariant`s that read as a toggle.
+ *
+ * Same rationale as `SLIDER_VARIANTS`: `link` and `clear` are text treatments
+ * a track has nothing to treat, and `icon` is a square affordance. What
+ * remains covers the full range a track can express — a saturated fill, a
+ * tinted one, a bordered wash, a quiet translucent one and a frosted one.
+ */
+export declare const TOGGLE_VARIANTS: readonly ["solid", "soft", "outline", "ghost", "glass"];
+export type ToggleVariant = (typeof TOGGLE_VARIANTS)[number];
+export interface ToggleVariantTokens {
+    /** Paint for the track when the switch is on (carries `peer-checked:`). */
+    track: string;
+    /** The thumb's focus-ring colour, driven off the input's `focus-visible`. */
+    ring: string;
+    /** True when the on-state fill is see-through and sits over unknown content. */
+    translucent: boolean;
+}
+/**
+ * Toggle treatments — the same visual language `Button` and `Slider` use,
+ * mapped onto the toggle's one paintable surface (the on-state track fill) so
+ * a toggle dropped next to a button or slider reads as part of the same UI.
+ *
+ * The off-state track is deliberately identical across variants — the neutral
+ * base — so the on-state fill is what expresses the treatment, exactly as a
+ * slider's neutral track does.
+ *
+ * The `glass` token only carries the frosted fill; the backdrop blur,
+ * vibrancy and specular overlay stay with the component, because they depend
+ * on the `glassOpacity` / `vibrancy` / `specularMode` props. The same numeric
+ * opacity caveat as `getGlassFillClass` applies: only the three presets are
+ * safelisted.
+ */
+export declare const getToggleVariantTokens: (color: TrueColor, variant: ToggleVariant, glassOpacity?: GlassOpacity) => ToggleVariantTokens;
 export declare const getToggleColorClasses: (color: TrueColor) => string;
+/**
+ * @deprecated Returns `accent-{color}-600`, which only paints a *native*
+ * checkbox — and a native checkbox ignores border, radius and background, so
+ * every other class the control carried was dead. Use
+ * `getCheckboxControlTokens`, which styles a real box.
+ */
 export declare const getCheckboxColorClasses: (color: TrueColor) => string;
+export interface CheckboxControlTokens {
+    /** Fill and border of the box once checked or indeterminate. */
+    checked: string;
+    /** Focus ring, driven off the sibling input's focus. */
+    ring: string;
+    /** Colour of the tick/dash glyph, which sits on the checked fill. */
+    glyph: string;
+}
+/**
+ * Fills step to `-700` light / `-400` dark rather than the `-600` / `-500` the
+ * native `accent-color` used, for the same reason `Alert`'s solid variant does:
+ * a white glyph on `{color}-600` measures 2.94:1 on yellow and 3.06 on lime,
+ * under even the 3:1 that WCAG asks of a *graphical* object, and on a `-500`
+ * fill it is worse. At `-700` under white and `-400` under `{color}-950` the
+ * worst case across all 21 tones is 4.93:1.
+ */
+export interface CheckboxVariantTokens {
+    /** Fill, shadow and backdrop of the resting box. */
+    fill: string;
+    /** Resting border colour. Replaced wholesale by the error state. */
+    border: string;
+    /** Border colour under the cursor. */
+    hover: string;
+    /** True when the box is see-through and sits over unknown content. */
+    translucent: boolean;
+}
+export declare const getCheckboxVariantTokens: (variant: InputVariant) => CheckboxVariantTokens;
+/**
+ * The checked/indeterminate fill for the checkbox `glass` variant — Toggle's
+ * glass rule in miniature: the full-chroma 500 step at a translucent alpha
+ * (600 in dark), never the `100` pastel, so the box reads as *tinted glass*
+ * on any surface. The border is deliberately left out: unlike the opaque
+ * variants, glass keeps its frost edge in the on-state and lets the fill
+ * alone carry the tone.
+ */
+export declare const getCheckboxGlassCheckedTokens: (color: TrueColor) => string;
+export declare const getCheckboxControlTokens: (color: TrueColor) => CheckboxControlTokens;
 export declare const getSpinnerColorTokens: (color: TrueColor) => [string, string, string, string];
+/**
+ * The geometry of a `StatusSpinner` at each shared control size.
+ *
+ * The wrapper is the same circle `Spinner` draws at that size, so the two can
+ * sit side by side and line up; the dot and the ring width scale with it.
+ */
+export interface StatusSpinnerSizeTokens {
+    /** Outer circle. Matches `Spinner`'s diameter at the same size. */
+    wrapper: string;
+    /** Centre dot. */
+    dot: string;
+    /** Ring border width. */
+    border: string;
+}
+export declare const getStatusSpinnerSizeTokens: (size: ControlSize) => StatusSpinnerSizeTokens;
+/**
+ * The paint of a `StatusSpinner` in one tone.
+ *
+ * Generated from `TRUE_COLORS` — there is no hand-written per-colour map to
+ * drift. `dot` is the one class-shaped token (both steps are already in the
+ * generated safelist); the arc and track are CSS colours rather than classes,
+ * because the four border sides carry four different values and a `dark:`
+ * variant cannot reach an inline style. They read the tone's own Tailwind
+ * variable — emitted for all 21 tones — and `color-mix` derives the track and
+ * the glow from it, so a tone can never render as another colour.
+ */
+export interface StatusSpinnerToneTokens {
+    /** Centre dot fill. */
+    dot: string;
+    /** The rotating arc, as a CSS colour. */
+    arc: string;
+    /** The idle ring (30% of the tone), as a CSS colour. */
+    track: string;
+    /** The halo around the dot, as a CSS colour. */
+    glow: string;
+}
+export declare const getStatusSpinnerToneTokens: (tone: TrueColor) => StatusSpinnerToneTokens;
+/**
+ * The paint of a `ProgressSpinner` in one tone.
+ *
+ * The same generated-from-`TRUE_COLORS` approach as `StatusSpinner`: the arc
+ * reads the tone's own Tailwind variable and `color-mix` derives the idle
+ * track from it, so a tone can never render as another colour. The inline
+ * SVG cannot use `dark:` variants, which is why these are CSS colours rather
+ * than classes.
+ */
+export interface ProgressSpinnerToneTokens {
+    /** The moving arc (or the determinate range), as a CSS colour. */
+    arc: string;
+    /** The idle ring (30% of the tone), as a CSS colour. */
+    track: string;
+}
+export declare const getProgressSpinnerToneTokens: (tone: TrueColor) => ProgressSpinnerToneTokens;
 export declare const getLoaderProgressColors: (color: TrueColor) => {
     track: string;
     bar: string;
@@ -150,13 +886,215 @@ export declare const getMultiToggleColorTokens: (color: TrueColor) => {
 };
 export declare const getMultiToggleVariantTokens: (color: TrueColor) => MultiToggleVariantTokens;
 export declare const getTabsColorTokens: (color: TrueColor) => TabsColorTokens;
+/**
+ * Base treatment per surface variant — the shadow, ring, blur and fill that do
+ * not depend on tone.
+ *
+ * Lifted out of `Panel` so any control that draws a *surface* can mirror it
+ * exactly rather than copying the switch. `MultiToggle`'s track is the first
+ * other consumer: a segmented control is a container holding segments, so it
+ * belongs to the same family and has to read identically beside a `Panel`.
+ */
+export declare const SURFACE_VARIANT_BASE: Record<SurfaceVariant, string>;
+/**
+ * Rim for the translucent variants. Deliberately tone-independent: a saturated
+ * `{tone}-500` edge fights the backdrop it is meant to sit over, so glass gets
+ * a light rim that reads as a bevel instead of an outline.
+ */
+export declare const SURFACE_GLASS_RIM = "border-white/50 dark:border-white/10";
+/** Variants whose surface is see-through. */
+export declare const TRANSLUCENT_SURFACE_VARIANTS: readonly SurfaceVariant[];
+export interface SurfaceVariantOverrides {
+    /** Replaces the variant's own fill, keeping its shadow and ring. */
+    bgClass?: string;
+    /** Replaces the variant's own rim colour. */
+    borderClass?: string;
+    /** Extra classes folded in for `liquid-glass` (vibrancy, glass fill). */
+    liquidExtras?: string;
+}
+/**
+ * The full class set for a surface variant at a tone — the same combination
+ * `Panel` renders, so a control using this sits flush beside one.
+ */
+export declare const getSurfaceVariantClasses: (variant: SurfaceVariant, tone: TrueColor, overrides?: SurfaceVariantOverrides) => string;
 export declare const getPanelToneStyles: (tone: TrueColor) => PanelToneConfig;
 export declare const getStepperTonePalette: (tone: TrueColor) => StepperToneConfig;
 export declare const getBadgeColorClasses: (color: TrueColor) => string;
 export declare const getPillColorClasses: (color: TrueColor, variant: "solid" | "soft" | "outline") => {
     base: string;
     border?: string;
+    hover?: string;
 };
+/**
+ * @deprecated Use `getAlertVariantTokens(color, variant)`. This bag hands the
+ * same icon/text/dismiss classes to every variant, which is unreadable on
+ * `solid`. Kept so existing call sites keep compiling.
+ */
 export declare const getAlertColorClasses: (color: TrueColor) => AlertTheme[TrueColor];
+/**
+ * Alert treatments. `glass` and `liquid-glass` are the same pair `Panel` and
+ * `Pill` offer, so a callout dropped on a glass card no longer has to be the
+ * one opaque slab in the layout.
+ */
+export declare const ALERT_VARIANTS: readonly ["subtle", "solid", "outline", "glass", "liquid-glass"];
+export type AlertVariant = (typeof ALERT_VARIANTS)[number];
+/**
+ * Where the leading icon sits against the callout's content.
+ *
+ * `top` is the default and the only one that was previously possible: the icon
+ * centres on the *title's* line box, which is what you want for a one- or
+ * two-line callout. `center` centres it against the whole block — right when
+ * the body runs long enough that a top-aligned glyph looks stranded — and
+ * `bottom` pins it to the last line.
+ */
+export declare const ALERT_ICON_ALIGNMENTS: readonly ["top", "center", "bottom"];
+export type AlertIconAlign = (typeof ALERT_ICON_ALIGNMENTS)[number];
+/**
+ * What the callout *means*, as opposed to what colour it is.
+ *
+ * Both kits' demos have been passing `tone="info"` / `"success"` / `"warning"`
+ * / `"danger"` since tone became a `TrueColor` — none of them are one, so every
+ * such alert fell through to the blue fallback and four "different" tones
+ * rendered identically. The semantics were real and worth keeping; they just
+ * belong in their own prop, which resolves to a tone *and* the right icon *and*
+ * the right live-region politeness.
+ */
+export declare const ALERT_INTENTS: readonly ["info", "success", "warning", "danger", "neutral"];
+export type AlertIntent = (typeof ALERT_INTENTS)[number];
+export interface AlertIntentConfig {
+    tone: TrueColor;
+    /** Registry icon name used when the caller does not supply one. */
+    icon: string;
+    /**
+     * How assistive technology should announce it. `role="alert"` is an
+     * *assertive* live region: it interrupts whatever the user is reading, which
+     * is right for a failure and wrong for a page that merely renders an
+     * informational banner on load.
+     */
+    live: "assertive" | "polite";
+}
+export declare const ALERT_INTENT_CONFIG: Record<AlertIntent, AlertIntentConfig>;
+/**
+ * Where a toast viewport sits on the screen — PrimeVue's seven anchor
+ * positions, kept as a runtime list so demos and docs enumerate the same
+ * seven. `center` is the only one without a corner.
+ */
+export declare const TOAST_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right", "center"];
+export type ToastPosition = (typeof TOAST_POSITIONS)[number];
+/**
+ * How the stack reads: `stacked` (the PrimeVue 4.5.5 default — a deck of
+ * collapsed cards that fans out on hover) or `expanded` (always fanned out,
+ * the classic list).
+ */
+export declare const TOAST_MODES: readonly ["stacked", "expanded"];
+export type ToastMode = (typeof TOAST_MODES)[number];
+export declare const DEFAULT_TOAST_POSITION: ToastPosition;
+export declare const DEFAULT_TOAST_MODE: ToastMode;
+/** Distance the stack offsets each card (stacked peek and expanded seam). */
+export declare const DEFAULT_TOAST_GAP_PX = 12;
+/** How many newest toasts stay visible; older ones wait their turn. */
+export declare const DEFAULT_TOAST_LIMIT = 3;
+/**
+ * Kit default — PrimeVue has no default auto-dismiss, and a toast that never
+ * dies is a trap. `life: 0` or `sticky: true` for a persistent message.
+ */
+export declare const DEFAULT_TOAST_LIFE_MS = 5000;
+/** Above Modal's 1600: a toast raised while a modal is open sits above it. */
+export declare const DEFAULT_TOAST_Z_INDEX = 2000;
+/** PrimeVue's viewport width (18.75rem = 300px). */
+export declare const TOAST_DEFAULT_WIDTH = "18.75rem";
+/**
+ * The geometry of a toast card at each shared control size.
+ *
+ * Same reasoning as Alert's size table, promoted to the theme because the
+ * card lives in a different folder than the callout it shares its language
+ * with, and a second size table for the same scale would drift (brief §2).
+ * The close button and the action buttons sit on the trigger family's scale,
+ * so a toast and the Button beside it are described in the same language.
+ */
+export interface ToastSizeTokens {
+    /** The card's own padding. */
+    container: string;
+    /** Space between the leading glyph and the copy. */
+    gap: string;
+    /** Title type. */
+    title: string;
+    /** Detail type. */
+    detail: string;
+    /** The intent glyph, on the shared control scale. */
+    icon: ControlSize;
+    /**
+     * Height of the glyph's box: exactly the title's line box, so the glyph
+     * centres on the title's cap height at any size (Alert's calibration).
+     */
+    iconBox: string;
+    /** The close button's square box. */
+    close: string;
+    /** The close glyph's size. */
+    closeIcon: ControlSize;
+    /** The progress bar's height, on the shared scale. */
+    progress: ControlSize;
+    /** The action buttons' size (trigger family). */
+    action: ControlSize;
+    /** Space above the actions row. */
+    actions: string;
+}
+export declare const getToastSizeTokens: (size: ControlSize) => ToastSizeTokens;
+/**
+ * Whether a field is reporting a problem.
+ *
+ * One list, because it was six: `INPUT_`, `SELECT_`, `CHECKBOX_` and
+ * `INPUT_GROUP_VALIDATION_STATUSES` each declared it, and `Textarea` and
+ * `FormField` had bare unions exporting no runtime list at all — so their
+ * demos could not enumerate the states they support. Same three strings, six
+ * names: the day one changes, the other five will not.
+ */
+export declare const VALIDATION_STATUSES: readonly ["none", "error", "success"];
+export type ValidationStatus = (typeof VALIDATION_STATUSES)[number];
+/**
+ * What went wrong with a request, as opposed to what colour to paint it.
+ *
+ * The same reasoning as `ALERT_INTENTS`: a failing call already knows whether
+ * it was refused, throttled, or simply could not be reached, and every caller
+ * translating that into a tone *and* a glyph *and* two strings is how one
+ * screen ends up saying "Connection Error" for a 403. The kind resolves all
+ * four; anything the caller states explicitly still wins.
+ */
+export declare const API_ERROR_KINDS: readonly ["unknown", "offline", "server", "forbidden", "notFound", "rateLimited"];
+export type ApiErrorKind = (typeof API_ERROR_KINDS)[number];
+export interface ApiErrorKindConfig {
+    tone: TrueColor;
+    /** Registry icon name used when the caller does not supply one. */
+    icon: string;
+    title: string;
+    subtitle: string;
+    /**
+     * Whether retrying it stands a chance. A 403 does not get a "Try again"
+     * button by default — offering one for a failure the user cannot clear is
+     * how a dead end starts looking like a bug.
+     */
+    retryable: boolean;
+}
+export declare const API_ERROR_KIND_CONFIG: Record<ApiErrorKind, ApiErrorKindConfig>;
+export interface AlertVariantTokens {
+    /** Fill plus the callout's base copy colour. */
+    surface: string;
+    /** Border colour. The `border` utility itself is on the base class. */
+    border: string;
+    /** Leading icon. */
+    icon: string;
+    /** Secondary copy under the title. */
+    text: string;
+    /** Dismiss button: rest, hover and focus ring. */
+    dismiss: string;
+}
+/**
+ * Replaces the old flat `getAlertColorClasses` bag, which handed the *same*
+ * `icon`, `text` and `dismiss` classes to every variant. On `solid` — a
+ * `{color}-600` fill — that painted the description `{color}-700` and the icon
+ * `{color}-500`, i.e. a dark tone on a saturated tone of itself. It was
+ * unreadable at every tone and no test could see it.
+ */
+export declare const getAlertVariantTokens: (color: TrueColor, variant: AlertVariant) => AlertVariantTokens;
 export declare const getStatTileColorClasses: (color: TrueColor) => StatTileTheme[TrueColor];
 export {};