@uni-design-system/uni-angular 10.1.0 → 10.2.0

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # @uni-design-system/uni-angular
 
+## 10.2.0
+
+### Minor Changes
+
+- [`1cd0140`](https://github.com/uni-design-system/uni/commit/1cd0140d2e6a4c753f48fb46418ba08769979263) Thanks [@gaenglish](https://github.com/gaenglish)! - Checkbox, radio and toggle take their accent from the theme, not from the
+  variant's name.
+
+  **Twelve sites across the three controls resolved a variant name as a colour
+  token.** That held together only because every name in the closed union happened
+  to also be a colour. Under an open registry the coincidence ends by design:
+  `<uni-checkbox variant="destructive">` would look up `colors['destructive']`,
+  miss, and **silently render primary** — a wrong-coloured control with no error,
+  no warning, and nothing to grep for.
+
+  Checkbox was worse than it looked. Alongside five `getThemeColor` calls it had
+  two more through a second resolver that built `on-${variant}`, so an
+  unregistered intent also missed its paired content colour and fell back to
+  `on-primary` — the tick would have stayed light on a dark fill even after the
+  box was fixed.
+
+  The theme now says which colour draws each intent, through a new
+  `variantOptions` map on `ComponentTheme`:
+
+  ```ts
+  checkbox: {
+    variantOptions: {
+      primary: { accent: 'primary' },
+      warn: { accent: 'warn' },
+    },
+  }
+  ```
+
+  `variantOptions` is per-variant data a component **reads**, as against `variants`,
+  which is CSS that gets **applied**. The distinction earns its place here: a
+  checkbox's accent lands on the box outline, the checked and indeterminate fills,
+  the tick and the focus ring at once, and expressing that as CSS would have meant
+  the theme naming `.checkbox-check` and `.radio-inner` — promoting private DOM to
+  public theme contract.
+
+  All three controls gain a `checkedColor` input as the per-instance override,
+  matching the one `uni-toggle` already had; its resolution order is now input →
+  the variant's themed accent → theme option. The base theme defines the same
+  seven intents `button` and `iconButton` do, so the library is consistent about
+  which exist by default, and `getThemeColor` — triplicated byte-for-byte across
+  the three components, with a silent fallback to primary — is gone.
+
+  Rendering is unchanged for anything that does not set `variant`: the default
+  still resolves to the primary accent and its paired on-colour.
+
+- [`1cd0140`](https://github.com/uni-design-system/uni/commit/1cd0140d2e6a4c753f48fb46418ba08769979263) Thanks [@gaenglish](https://github.com/gaenglish)! - `Variant` is an open registry: a design system can define its own intents.
+
+  A variant names _what an action means_, and it is the theme's job to describe
+  how that intent is drawn. So the set of names was never Uni's to fix — an app
+  whose actions are `destructive`, `subtle` and `info` had to translate them onto
+  twelve names chosen elsewhere. `Variant` is now `keyof UniVariantRegistry`,
+  extended by declaration merging:
+
+  ```ts
+  declare module '@uni-design-system/uni-core' {
+    interface UniVariantRegistry {
+      destructive: true;
+    }
+  }
+  ```
+
+  `variant="destructive"` then compiles wherever a variant is accepted, and
+  `variant="destructve"` still does not — which the library's other open-token
+  idiom, `Named | (string & {})`, cannot give you, and which would also have
+  collapsed the theme's `variants` map keys to `string`.
+
+  Only the type was ever closed: theme validation checks the _shape_ of a
+  `variants` block and never its key names, so a custom variant already reached
+  `componentStyle` untouched at runtime.
+
+  **The registry extends; it cannot replace.** Declaration merging has no way to
+  remove a member, so Uni's twelve names stay legal in a consuming app; enforcing
+  a house set is a lint concern rather than a type. Two names are reserved and
+  documented as always present: `primary`, which every component inherits as its
+  default, and `disabled`, which the disabled state resolves to.
+
+  **An unthemed variant now says so.** With a closed union this was nearly
+  impossible; with an open set it is the ordinary state of a work in progress —
+  a variant registered and used before its theme block exists. The theme service
+  warns once per component and variant in dev, naming what the theme does define,
+  mirroring what it already did for an unknown spacing token. Components that
+  theme no variants at all stay silent, since a missing key there is not a gap.
+
 ## 10.1.0
 
 ### Minor Changes

package/README.md

@@ -10,7 +10,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@uni-design-system/uni-angular"><img src="https://img.shields.io/npm/v/%40uni-design-system%2Funi-angular" alt="npm version"></a>
-  <a href="https://github.com/uni-design-system/uni/actions/workflows/ci.yml"><img src="https://github.com/uni-design-system/uni/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
+  <a href="https://github.com/uni-design-system/uni/actions/workflows/release.yml"><img src="https://github.com/uni-design-system/uni/actions/workflows/release.yml/badge.svg" alt="CI"></a>
 </p>
 
 <p align="center">

package/fesm2022/uni-design-system-uni-angular.mjs

@@ -2193,10 +2193,53 @@ class ThemeService {
     componentStyle = (componentName, variant, size) => computed(() => {
         const component = this.component(componentName)();
         const { fixed, variants, sizes } = component;
+        this.warnUnthemedVariant(componentName, variant, component);
         const variantStyle = variants && variants[variant];
         const sizeStyle = sizes && sizes[size];
         return { ...fixed, ...variantStyle, ...sizeStyle };
     });
+    /**
+     * The active variant's roles from a component's `variantOptions` map — the
+     * per-variant data a component *reads* rather than CSS it applies. See
+     * `ComponentTheme.variantOptions`.
+     */
+    variantRoles = (componentName, variant) => computed(() => {
+        const component = this.component(componentName)();
+        this.warnUnthemedVariant(componentName, variant, component);
+        return component.variantOptions?.[variant];
+    });
+    warnedVariants = new Set();
+    /**
+     * Say something when a component is asked for a variant its theme does not
+     * define, once per component/variant pair.
+     *
+     * `Variant` is an open registry, so a name the theme never styled cannot be a
+     * compile error — and the miss is silent by construction, because an absent
+     * style spreads to nothing and an absent role falls back. That is exactly the
+     * ordinary state of a work in progress: a designer registers `destructive`,
+     * uses it, and has not written its theme block yet. Same reasoning as
+     * {@link resolveSpacing}, whose open scale has the same problem.
+     *
+     * A component that themes no variants at all is not missing anything — most
+     * of the library never varies by intent — so silence there is correct.
+     */
+    warnUnthemedVariant(componentName, variant, component) {
+        const { variants, variantOptions } = component;
+        if (!variants && !variantOptions)
+            return;
+        if (variants?.[variant] !== undefined || variantOptions?.[variant] !== undefined)
+            return;
+        const key = `${componentName}/${variant}`;
+        if (!(typeof ngDevMode === 'undefined' || ngDevMode) || this.warnedVariants.has(key))
+            return;
+        this.warnedVariants.add(key);
+        const defined = [
+            ...new Set([...Object.keys(variants ?? {}), ...Object.keys(variantOptions ?? {})]),
+        ];
+        console.warn(`[uni] Unknown variant "${variant}" on "${componentName}": the active theme does not ` +
+            `define it, so the component falls back to its default appearance. Add it to the ` +
+            `theme's \`components.${componentName}\` entry, or use one of: ${defined.join(', ')}.`);
+    }
     /**
      * Resolve a spacing token to its CSS value. `'none'` resolves through the
      * scale like any other token — it is `0`, not the string `'none'`, which is
@@ -2439,12 +2482,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], ctorParameters: () => [] });
 
 const COMPONENT_NAME = new InjectionToken('');
+// `V` defaults to `unknown` alongside `T`: passing the class as a value erases
+// its parameters to `unknown`, so an `object` default made
+// `TestBed.createComponent(BaseComponent)` disagree with `ComponentFixture<BaseComponent>`.
 class BaseComponent {
     componentName = inject(COMPONENT_NAME);
     theme = inject(ThemeService);
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ [])); // TODO: Make Variant support undefined
     size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     componentTheme = computed(() => this.theme.getComponentTheme(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentTheme" }] : /* istanbul ignore next */ []));
+    /**
+     * The active variant's roles from the theme's `variantOptions` map, for
+     * components whose accent lands on several interior elements and so cannot
+     * be expressed as a single applied style. Undefined when the theme does not
+     * define this variant — which also raises a dev warning.
+     */
+    variantRoles = computed(() => this.theme.variantRoles(this.componentName, this.variant())(), ...(ngDevMode ? [{ debugName: "variantRoles" }] : /* istanbul ignore next */ []));
     componentOptions = computed(() => this.theme.getComponentOptions(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentOptions" }] : /* istanbul ignore next */ []));
     style = computed(() => this.theme.componentStyle(this.componentName, this.variant(), this.size())(), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2558,6 +2611,13 @@ class UniCheckboxComponent extends BaseComponent {
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
     /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Accent colour token, overriding the variant's themed accent for one
+     * instance. Mirrors `uni-toggle`'s input of the same name — it exists because
+     * `variant` defaults to `'primary'`, so the component cannot tell "set to
+     * primary" from "not set".
+     */
+    checkedColor = input(...(ngDevMode ? [undefined, { debugName: "checkedColor" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
      * app-rendered error message — exposed as aria-describedby.
@@ -2601,8 +2661,8 @@ class UniCheckboxComponent extends BaseComponent {
             display: 'block',
         },
         '& .checkbox svg .checkbox-box': {
-            fill: this.getThemeColor(this.componentOptions().boxColor ?? 'surface'),
-            stroke: this.getThemeColor(this.variant()),
+            fill: this.boxColor(),
+            stroke: this.accent().fill,
             strokeWidth: 2,
             rx: this.componentOptions().borderRadius || 2,
             ry: this.componentOptions().borderRadius || 2,
@@ -2611,7 +2671,7 @@ class UniCheckboxComponent extends BaseComponent {
         // Check/dash draw on the variant-filled box, so they wear its on-color.
         '& .checkbox svg .checkbox-check': {
             fill: 'none',
-            stroke: this.getOnColor(this.variant()),
+            stroke: this.accent().on,
             strokeWidth: 2,
             strokeLinecap: 'round',
             strokeLinejoin: 'round',
@@ -2620,7 +2680,7 @@ class UniCheckboxComponent extends BaseComponent {
             transition: 'all 0.5s ease',
         },
         '& .checkbox svg .checkbox-dash': {
-            stroke: this.getOnColor(this.variant()),
+            stroke: this.accent().on,
             strokeWidth: 2,
             strokeLinecap: 'round',
             opacity: 0,
@@ -2634,16 +2694,16 @@ class UniCheckboxComponent extends BaseComponent {
         height: 0,
         opacity: 0,
         '&:checked + .checkbox': {
-            borderColor: this.getThemeColor(this.variant()),
+            borderColor: this.accent().fill,
         },
         '&:checked + .checkbox svg .checkbox-box': {
-            fill: this.getThemeColor(this.variant()),
+            fill: this.accent().fill,
         },
         '&:checked + .checkbox svg .checkbox-check': {
             strokeDashoffset: 0,
         },
         '&:indeterminate + .checkbox svg .checkbox-box': {
-            fill: this.getThemeColor(this.variant()),
+            fill: this.accent().fill,
         },
         '&:indeterminate + .checkbox svg .checkbox-dash': {
             opacity: 1,
@@ -2656,26 +2716,37 @@ class UniCheckboxComponent extends BaseComponent {
         // 4px to round proportionally (as the original hand-drawn ring did) —
         // without it the corners gap away from the box.
         '&:focus + .checkbox': {
-            ...this.theme.focusRingStyle(this.getThemeColor(this.variant()), this.componentOptions().focusRingGap),
+            ...this.theme.focusRingStyle(this.accent().fill, this.componentOptions().focusRingGap),
             borderRadius: `${(Number(this.componentOptions().borderRadius) || 2) + 2}px`,
         },
     }), ...(ngDevMode ? [{ debugName: "checkboxInput" }] : /* istanbul ignore next */ []));
-    getThemeColor(token) {
-        const colors = this.theme.colors();
-        return colors[token] ? colors[token] : colors['primary'];
-    }
-    /** The content color paired with a variant fill (on-primary, on-warn, …). */
-    getOnColor(variant) {
+    /**
+     * The accent and its paired content colour, from the theme's variant roles.
+     *
+     * Previously the variant *name* was looked up as a colour token, which held
+     * together only because every variant happened to also be a colour. With the
+     * registry open that coincidence ends by design: `variant="destructive"`
+     * would have missed and silently rendered primary. The theme now says which
+     * colour draws the intent, and an unthemed variant warns rather than lying.
+     *
+     * `primary` is the last resort because it is a reserved variant name — the
+     * default every component inherits.
+     */
+    accent = computed(() => {
         const colors = this.theme.colors();
-        return colors[`on-${variant}`] ?? colors['on-primary'];
-    }
+        const roles = this.variantRoles();
+        const accent = this.checkedColor() ?? roles?.accent ?? 'primary';
+        const onAccent = roles?.onAccent ?? `on-${accent}`;
+        return { fill: colors[accent], on: colors[onAccent] };
+    }, ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
+    boxColor = computed(() => this.theme.colors()[this.componentOptions().boxColor ?? 'surface'], ...(ngDevMode ? [{ debugName: "boxColor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCheckboxComponent, isStandalone: true, selector: "uni-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", indeterminate: "indeterminateChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"checkboxLabel()\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput()\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n      <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n    </svg>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniCheckboxComponent, isStandalone: true, selector: "uni-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, checkedColor: { classPropertyName: "checkedColor", publicName: "checkedColor", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", indeterminate: "indeterminateChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"checkboxLabel()\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput()\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n      <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n    </svg>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'uni-checkbox', imports: [UniTextDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'checkbox' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"checkboxLabel()\">\n  <input\n    type=\"checkbox\"\n    [class]=\"checkboxInput()\"\n    [checked]=\"checked()\"\n    [indeterminate]=\"indeterminate()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"checkbox\">\n    <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <rect class=\"checkbox-box\" x=\"1\" y=\"1\" width=\"18\" height=\"18\"></rect>\n      <polyline class=\"checkbox-check\" points=\"4 11 8 15 16 6\"></polyline>\n      <line class=\"checkbox-dash\" x1=\"5\" y1=\"10\" x2=\"15\" y2=\"10\"></line>\n    </svg>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n" }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], checkedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedColor", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }] } });
 
 /**
  * Whether the browser can keep a top-layer popup attached to its field.
@@ -5722,7 +5793,7 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRow"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  @if (label(); as fieldLabel) {\n    <span [class]=\"srOnly\">{{ fieldLabel }},</span>\n  }\n  <span [class]=\"srOnly\">{{ selectionSummary() }}</span>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div (keydown)=\"onPanelKeydown($event)\">\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div\n    stack-layout\n    gap=\"xs\"\n    padding=\"xs\"\n    role=\"group\"\n    [attr.aria-label]=\"label() ? label() + ' options' : 'Options'\"\n  >\n    @for (option of filteredOptions(); track option.value; let i = $index) {\n      <div #optionRow (focusin)=\"onOptionFocus(i)\">\n        <uni-checkbox\n          [label]=\"option.label\"\n          [checked]=\"isOptionSelected(option)()\"\n          (checkedChange)=\"toggleOption(option, $event)\"\n          variant=\"primary\"\n          [disabled]=\"disabled() || !!option.disabled\"\n        >\n        </uni-checkbox>\n      </div>\n    }\n    @if (filteredOptions().length === 0) {\n      <span uni-text=\"label\" role=\"status\">No options match.</span>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "containerColor"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "directive", type: UniStackDirective, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRow"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  @if (label(); as fieldLabel) {\n    <span [class]=\"srOnly\">{{ fieldLabel }},</span>\n  }\n  <span [class]=\"srOnly\">{{ selectionSummary() }}</span>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <div (keydown)=\"onPanelKeydown($event)\">\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div\n    stack-layout\n    gap=\"xs\"\n    padding=\"xs\"\n    role=\"group\"\n    [attr.aria-label]=\"label() ? label() + ' options' : 'Options'\"\n  >\n    @for (option of filteredOptions(); track option.value; let i = $index) {\n      <div #optionRow (focusin)=\"onOptionFocus(i)\">\n        <uni-checkbox\n          [label]=\"option.label\"\n          [checked]=\"isOptionSelected(option)()\"\n          (checkedChange)=\"toggleOption(option, $event)\"\n          variant=\"primary\"\n          [disabled]=\"disabled() || !!option.disabled\"\n        >\n        </uni-checkbox>\n      </div>\n    }\n    @if (filteredOptions().length === 0) {\n      <span uni-text=\"label\" role=\"status\">No options match.</span>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "checkedColor", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "containerColor"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "directive", type: UniStackDirective, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "directive", type: UniRowDirective, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height", "width", "fullWidth", "grow", "managedInset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, decorators: [{
             type: Component,
@@ -5788,7 +5859,7 @@ class UniMultiSelectComponent {
         width: '100%',
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, checkboxGap: { classPropertyName: "checkboxGap", publicName: "checkboxGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updates: "updates" }, host: { properties: { "class": "className" } }, ngImport: i0, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n  <!-- track $index: option values may be objects and consumers rebuild the\n       array, so identity tracking recreated every node (NG0956). -->\n  @for (option of options(); track $index) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values().indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n        [disabled]=\"!!option.disabled\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectComponent, isStandalone: true, selector: "uni-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, checkboxGap: { classPropertyName: "checkboxGap", publicName: "checkboxGap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updates: "updates" }, host: { properties: { "class": "className" } }, ngImport: i0, template: "<div box-layout display=\"flex\" [flexDirection]=\"flexDirection()\" [gap]=\"checkboxGap()\">\n  <!-- track $index: option values may be objects and consumers rebuild the\n       array, so identity tracking recreated every node (NG0956). -->\n  @for (option of options(); track $index) {\n    <div [class]=\"optionWrapper\">\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"values().indexOf(option.value) > -1\"\n        (checkedChange)=\"handleCheck($event, option.value)\"\n        variant=\"primary\"\n        [disabled]=\"!!option.disabled\"\n      >\n      </uni-checkbox>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "checkedColor", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "directive", type: UniBoxDirective, selector: "[uni-box-layout], [box-layout]", inputs: ["containerColor", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "flex", "shrink", "basis", "marginInline", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectComponent, decorators: [{
             type: Component,
@@ -5804,6 +5875,12 @@ class UniRadioComponent extends BaseComponent {
     dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
     /** Synced from required() validators by the Signal Forms [formField] directive. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Accent colour token, overriding the variant's themed accent for one
+     * instance. Mirrors the input of the same name on `uni-checkbox` and
+     * `uni-toggle`.
+     */
+    checkedColor = input(...(ngDevMode ? [undefined, { debugName: "checkedColor" }] : /* istanbul ignore next */ []));
     /**
      * Id(s) of external element(s) describing this control — typically your
      * app-rendered error message — exposed as aria-describedby.
@@ -5858,18 +5935,18 @@ class UniRadioComponent extends BaseComponent {
                 height: outerCircleSize,
                 borderRadius: '50%',
                 border: `2px solid ${this.disabled()
-                    ? this.getThemeColor('on-disabled')
-                    : this.getThemeColor(this.componentOptions().ringColor ?? 'outline')}`,
+                    ? this.color('on-disabled')
+                    : this.color(this.componentOptions().ringColor ?? 'outline')}`,
                 position: 'relative',
                 transition: ringTransition,
-                backgroundColor: this.getThemeColor(this.componentOptions().fillColor ?? 'surface'),
+                backgroundColor: this.color(this.componentOptions().fillColor ?? 'surface'),
                 flexShrink: 0,
             },
             '& .radio-inner': {
                 width: innerCircleSize,
                 height: innerCircleSize,
                 borderRadius: '50%',
-                backgroundColor: this.getThemeColor(this.variant()),
+                backgroundColor: this.accent(),
                 position: 'absolute',
                 top: innerCircleOffset,
                 left: innerCircleOffset,
@@ -5879,13 +5956,13 @@ class UniRadioComponent extends BaseComponent {
             '&:hover .radio-button': this.disabled()
                 ? {}
                 : {
-                    borderColor: this.getThemeColor(this.variant()),
+                    borderColor: this.accent(),
                 },
             '&.disabled': {
                 cursor: 'not-allowed',
                 opacity: 0.6,
                 '& .radio-button': {
-                    borderColor: this.getThemeColor('on-disabled'),
+                    borderColor: this.color('on-disabled'),
                 },
             },
         });
@@ -5897,31 +5974,44 @@ class UniRadioComponent extends BaseComponent {
         height: 0,
         opacity: 0,
         '&:checked + .radio-button': {
-            borderColor: this.getThemeColor(this.variant()),
+            borderColor: this.accent(),
         },
         '&:checked + .radio-button .radio-inner': {
             transform: 'scale(1)',
         },
         // The shared, themable focus indicator, keyed off the hidden input.
         '&:focus + .radio-button': {
-            ...this.theme.focusRingStyle(this.getThemeColor(this.variant())),
+            ...this.theme.focusRingStyle(this.accent()),
         },
     }), ...(ngDevMode ? [{ debugName: "radioInputClass" }] : /* istanbul ignore next */ []));
     handleRadioChange(optionValue) {
         this.value.set(optionValue);
         this.markAsTouched();
     }
-    getThemeColor(token) {
-        const colors = this.theme.colors();
-        return colors[token] ? colors[token] : colors['primary'];
+    /**
+     * The accent colour, from the theme's variant roles rather than by treating
+     * the variant name as a colour token — see `uni-checkbox` for why that had
+     * to stop. `primary` is the last resort: a reserved variant name.
+     */
+    /**
+     * A chrome colour by token. Unlike the `getThemeColor` this replaces, there
+     * is no silent fallback to primary: these are tokens the theme is required
+     * to define, so a miss should be visible rather than disguised.
+     */
+    color(token) {
+        return this.theme.colors()[token];
     }
+    accent = computed(() => {
+        const accent = this.checkedColor() ?? this.variantRoles()?.accent ?? 'primary';
+        return this.theme.colors()[accent];
+    }, ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniRadioComponent, isStandalone: true, selector: "uni-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"radioGroupClass\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label() ? groupLabelId : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n>\n  @if (label()) {\n    <span uni-text=\"label\" [attr.id]=\"groupLabelId\">{{ label() }}</span>\n  }\n\n  @for (option of options(); track option.value) {\n    <label [class]=\"radioOptionClass()\" [class.disabled]=\"disabled() || option.disabled\">\n      <input\n        type=\"radio\"\n        [class]=\"radioInputClass()\"\n        [value]=\"option.value\"\n        [name]=\"name()\"\n        [checked]=\"value() === option.value\"\n        [disabled]=\"disabled() || option.disabled\"\n        (change)=\"handleRadioChange(option.value)\"\n      />\n      <div class=\"radio-button\">\n        <div class=\"radio-inner\"></div>\n      </div>\n      <span uni-text=\"label\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniRadioComponent, isStandalone: true, selector: "uni-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, checkedColor: { classPropertyName: "checkedColor", publicName: "checkedColor", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"radioGroupClass\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label() ? groupLabelId : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n>\n  @if (label()) {\n    <span uni-text=\"label\" [attr.id]=\"groupLabelId\">{{ label() }}</span>\n  }\n\n  @for (option of options(); track option.value) {\n    <label [class]=\"radioOptionClass()\" [class.disabled]=\"disabled() || option.disabled\">\n      <input\n        type=\"radio\"\n        [class]=\"radioInputClass()\"\n        [value]=\"option.value\"\n        [name]=\"name()\"\n        [checked]=\"value() === option.value\"\n        [disabled]=\"disabled() || option.disabled\"\n        (change)=\"handleRadioChange(option.value)\"\n      />\n      <div class=\"radio-button\">\n        <div class=\"radio-inner\"></div>\n      </div>\n      <span uni-text=\"label\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'uni-radio', imports: [UniTextDirective], providers: [{ provide: COMPONENT_NAME, useValue: 'radio' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"radioGroupClass\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label() ? groupLabelId : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n>\n  @if (label()) {\n    <span uni-text=\"label\" [attr.id]=\"groupLabelId\">{{ label() }}</span>\n  }\n\n  @for (option of options(); track option.value) {\n    <label [class]=\"radioOptionClass()\" [class.disabled]=\"disabled() || option.disabled\">\n      <input\n        type=\"radio\"\n        [class]=\"radioInputClass()\"\n        [value]=\"option.value\"\n        [name]=\"name()\"\n        [checked]=\"value() === option.value\"\n        [disabled]=\"disabled() || option.disabled\"\n        (change)=\"handleRadioChange(option.value)\"\n      />\n      <div class=\"radio-button\">\n        <div class=\"radio-inner\"></div>\n      </div>\n      <span uni-text=\"label\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], checkedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedColor", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
 
 /**
  * Text input that emits `change` only after the user pauses typing. Wears the
@@ -8845,8 +8935,20 @@ class UniToggleComponent extends BaseComponent {
         const inset = Number(size['padding'] ?? (height - height * 0.8) / 2);
         return geometry(width, height, inset);
     }, ...(ngDevMode ? [{ debugName: "metrics" }] : /* istanbul ignore next */ []));
-    /** The resolved checked/accent color: input, then theme option, then variant. */
-    accent = computed(() => this.checkedColor() ?? this.componentOptions().checkedColor ?? this.variant(), ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
+    /**
+     * The resolved checked/accent color: the per-instance input, then the
+     * variant's themed accent, then the theme option.
+     *
+     * The last link used to be `this.variant()` — the variant *name* resolved as
+     * a colour token. That only ever worked because every variant happened to
+     * also be a colour; with the registry open, `variant="destructive"` would
+     * have missed and silently rendered primary. `primary` is the last resort
+     * because it is a reserved variant name.
+     */
+    accent = computed(() => this.checkedColor() ??
+        this.variantRoles()?.accent ??
+        this.componentOptions().checkedColor ??
+        'primary', ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
     /** Knob slide and track color change, as a motion token — never `all`. */
     transitions = computed(() => {
         const motion = this.theme.motion(this.componentOptions().motion ?? 'control');
@@ -8872,8 +8974,8 @@ class UniToggleComponent extends BaseComponent {
                 width,
                 height,
                 backgroundColor: this.disabled()
-                    ? this.getThemeColor('disabled')
-                    : this.getThemeColor(this.componentOptions().trackColor ?? 'surface-variant'),
+                    ? this.color('disabled')
+                    : this.color(this.componentOptions().trackColor ?? 'surface-variant'),
                 borderRadius: radius,
                 position: 'relative',
                 transition: this.transitions().track,
@@ -8881,7 +8983,7 @@ class UniToggleComponent extends BaseComponent {
             '& .toggle-slider': {
                 width: knob,
                 height: knob,
-                backgroundColor: this.getThemeColor(this.componentOptions().knobColor ?? 'surface'),
+                backgroundColor: this.color(this.componentOptions().knobColor ?? 'surface'),
                 borderRadius: '50%',
                 position: 'absolute',
                 top: inset,
@@ -8899,7 +9001,7 @@ class UniToggleComponent extends BaseComponent {
     }, ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
     toggleInput = computed(() => {
         const { travel } = this.metrics();
-        const accent = this.getThemeColor(this.accent());
+        const accent = this.color(this.accent());
         return css({
             position: 'absolute',
             zIndex: -1,
@@ -8924,9 +9026,9 @@ class UniToggleComponent extends BaseComponent {
             },
         });
     }, ...(ngDevMode ? [{ debugName: "toggleInput" }] : /* istanbul ignore next */ []));
-    getThemeColor(token) {
-        const colors = this.theme.colors();
-        return colors[token] ? colors[token] : colors['primary'];
+    /** A chrome colour by token — no silent fallback; see `uni-radio`. */
+    color(token) {
+        return this.theme.colors()[token];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniToggleComponent, isStandalone: true, selector: "uni-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checkedColor: { classPropertyName: "checkedColor", publicName: "checkedColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "directive", type: UniTextDirective, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });