@kubex/zinc 1.1.185 → 2.0.1

package/src/components/query-builder/query-builder.component.ts

@@ -64,6 +64,7 @@ export enum QueryBuilderOperators {
   NMatch = 'nmatch',
   Contains = 'contains',
   DoesNotContain = 'doesnotcontain',
+  DnContain = 'dncontain',
   Starts = 'starts',
   NStarts = 'nstarts',
   Ends = 'ends',
@@ -72,6 +73,8 @@ export enum QueryBuilderOperators {
   NWild = 'nwild',
   Like = 'like',
   NLike = 'nlike',
+  LikeIn = 'likein',
+  NLikeIn = 'nlikein',
   Fuzzy = 'fuzzy',
   NFuzzy = 'nfuzzy',
   Gte = 'gte',
@@ -97,6 +100,7 @@ export const operatorText: { [key in QueryBuilderOperators]: string } = {
   [QueryBuilderOperators.NMatch]: 'Does Not Match',
   [QueryBuilderOperators.Contains]: 'Contains',
   [QueryBuilderOperators.DoesNotContain]: 'Does Not Contain',
+  [QueryBuilderOperators.DnContain]: 'Does Not Contain',
   [QueryBuilderOperators.Starts]: 'Starts With',
   [QueryBuilderOperators.NStarts]: 'Does Not Start With',
   [QueryBuilderOperators.Ends]: 'Ends With',
@@ -105,6 +109,8 @@ export const operatorText: { [key in QueryBuilderOperators]: string } = {
   [QueryBuilderOperators.NWild]: 'Does Not Match Wildcard',
   [QueryBuilderOperators.Like]: 'Like Match With',
   [QueryBuilderOperators.NLike]: 'Does Not Like Match With',
+  [QueryBuilderOperators.LikeIn]: 'Like Any Of',
+  [QueryBuilderOperators.NLikeIn]: 'Not Like Any Of',
   [QueryBuilderOperators.Fuzzy]: 'Fuzzy Match With',
   [QueryBuilderOperators.NFuzzy]: 'Does Not Match Fuzzy With',
   [QueryBuilderOperators.Gte]: 'Greater Than or Equals',
@@ -113,6 +119,12 @@ export const operatorText: { [key in QueryBuilderOperators]: string } = {
   [QueryBuilderOperators.Lte]: 'Less Than or Equals',
 };
 
+export interface QueryBuilderRule {
+  key: string;
+  comparator: string;
+  value: string | string[];
+}
+
 export interface CreatedRule {
   id: string;
   name: string;
@@ -167,8 +179,15 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     }
   }) showValues: string[] = [];
 
+  /** Rules to start with, in the shape the builder submits. */
+  @property({type: Array}) rules: QueryBuilderRule[] = [];
+
+  /** Allows a filter to be added more than once, e.g. for a date range. */
+  @property({type: Boolean}) repeatable: boolean = false;
+
 
   private get _usedFilterIds(): Set<string> {
+    if (this.repeatable) return new Set();
     return new Set([...this._selectedRules.values()].map(rule => rule.id));
   }
 
@@ -187,6 +206,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
         this._addRule(null, item);
       });
     }
+    this.rules?.forEach(rule => this._addRule(null, rule.key, undefined, rule));
     this._handleChange();
     this._formController.updateValidity();
   }
@@ -225,7 +245,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     this.emit("zn-change");
   }
 
-  private _addRule(event: Event | null, value: string, pos?: number) {
+  private _addRule(event: Event | null, value: string, pos?: number, initial?: QueryBuilderRule) {
     const target = event?.target as ZnSelect;
     const id = value ? value : target.value;
     if (id === '') return;
@@ -236,11 +256,16 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
 
     const uniqueId = Math.random().toString(36).substring(7);
 
+    const defaultOperator = filter.operators.length > 0 ? filter.operators[0] : QueryBuilderOperators.Eq;
+    const selectedComparator = initial && filter.operators.includes(initial.comparator as QueryBuilderOperators)
+      ? initial.comparator as QueryBuilderOperators
+      : defaultOperator;
+
     this._selectedRules.set(uniqueId, {
       id: filter.id,
       name: filter.name,
-      operator: filter.operators.length > 0 ? filter.operators[0] : QueryBuilderOperators.Eq,
-      value: ''
+      operator: selectedComparator,
+      value: (initial?.value ?? '') as string
     });
 
     const availableFilters = this.filters.filter(item => item.id === filter.id || !this._usedFilterIds.has(item.id));
@@ -271,7 +296,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
                      this._updateOperatorValue(uniqueId, e)
                      this._changeValueInput(uniqueId, e, filter);
                    }}"
-                   value="${filter.operators[0]}"
+                   value="${selectedComparator}"
                    ?disabled="${filter.operators.length === 1}">
           ${filter.operators.map((item: QueryBuilderOperators) => {
             return html`
@@ -285,13 +310,13 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
                  icon="delete"
                  icon-size="24"
                  color="transparent"
+                 label="Remove rule"
                  @click="${(e: Event) => this._removeRule(uniqueId, e)}">
       </zn-button>`;
 
-    const selectedComparator = filter.operators.length > 0 ? filter.operators[0] : QueryBuilderOperators.Eq;
     const wrapper = html`
       <div class="query-builder__wrapper">
-        ${this._createInput(filter, uniqueId, selectedComparator)}
+        ${this._createInput(filter, uniqueId, selectedComparator, initial?.value)}
         ${remove}
       </div>
     `;
@@ -315,7 +340,8 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     // Reset back to default placeholder
     this.addRule.value = '';
     this.addRule.displayLabel = '';
-    this.addRule.selectedOptions[0].selected = false;
+    const selected = this.addRule.selectedOptions[0];
+    if (selected) selected.selected = false;
 
     // Auto scroll to keep the add rule select in view
     if (target === this.addRule && this.parentElement?.classList.contains('dropdown__query-builder')) {
@@ -328,7 +354,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     this._handleChange();
   }
 
-  private _createInput(filter: QueryBuilderItem, uniqueId: string, selectedComparator: QueryBuilderOperators) {
+  private _createInput(filter: QueryBuilderItem, uniqueId: string, selectedComparator: QueryBuilderOperators, value?: string | string[]) {
     let input: ZnSelect | ZnInput | ZnDatepicker | null;
     switch (filter.type) {
       case 'bool':
@@ -353,9 +379,47 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
         break;
       }
     }
+
+    if (input && value !== undefined && value !== '') {
+      input.value = this._inputValue(filter, selectedComparator, value);
+    }
     return input;
   }
 
+  private _inputValue(filter: QueryBuilderItem, operator: QueryBuilderOperators, value: string | string[]): string | string[] {
+    switch (filter.type) {
+      case 'bool':
+      case 'boolean':
+        return ['1', 'true'].includes(String(value).toLowerCase()) ? '1' : '0';
+      case 'date':
+      case 'dateTime': {
+        const date = this._submittedDate(String(value), operator, filter.dateSubmitFormat);
+        const pad = (n: number) => String(n).padStart(2, '0');
+        return `${pad(date.getMonth() + 1)}/${pad(date.getDate())}/${date.getFullYear()}`;
+      }
+      default:
+        if (filter.options && (operator === QueryBuilderOperators.In || operator === QueryBuilderOperators.Nin)) {
+          return Array.isArray(value) ? value.map(String) : String(value).split(',');
+        }
+        return Array.isArray(value) ? value.join(',') : String(value);
+    }
+  }
+
+  /** Reverses _updateDateValue, so a submitted date value can be shown again. */
+  private _submittedDate(value: string, operator: QueryBuilderOperators, submitFormat: QueryBuilderDateSubmitFormat = 'legacy'): Date {
+    switch (submitFormat) {
+      case 'timestamp':
+        return new Date(Number(value));
+      case 'iso':
+        return new Date(value);
+      default:
+        if (operator === QueryBuilderOperators.Eq || operator === QueryBuilderOperators.Neq) {
+          return new Date(Number(value) * 1000);
+        }
+        return new Date(Date.now() - Math.abs(Number(value)) * 60_000);
+    }
+  }
+
   private _changeValueInput(uniqueId: string, changeEvent: ZnChangeEvent, filter: QueryBuilderItem) {
     // Only comparisons with options need to change input
     if (!filter.options) return;
@@ -519,15 +583,22 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     this._handleChange();
   }
 
-  private _changeRule(id: string, event: ZnChangeEvent) {
+  private async _changeRule(id: string, event: ZnChangeEvent) {
     // remove the element from the dom
     const pos: number = this._getRulePosition(id);
     const select = event.target as ZnSelect;
+    const hadFocus = select.matches(':focus-within');
     select.popup.active = false;
     select?.parentElement?.remove();
     // recreate the element based on the selected value;
     this._removeRule(id, event);
     this._addRule(event, '', pos);
+
+    const replacement = this.container.children[pos]?.querySelector<ZnSelect>('.query-builder__key');
+    if (hadFocus && replacement) {
+      await replacement.updateComplete;
+      replacement.focus();
+    }
   }
 
   private _getRulePosition(id: string): number {
@@ -544,7 +615,11 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
   private _removeRule(id: string, event: Event) {
     this._selectedRules.delete(id);
     const button = event.target as ZnButton;
-    button?.closest('.query-builder__row')?.remove();
+    const row = button?.closest('.query-builder__row');
+    const hadFocus = row?.matches(':focus-within');
+    const neighbour = row?.nextElementSibling?.matches('.query-builder__row') ? row.nextElementSibling : row?.previousElementSibling;
+    row?.remove();
+    if (hadFocus) (neighbour?.querySelector<ZnButton>('.query-builder__remove')?.button ?? this.addRule).focus();
     this._handleChange();
   }
 

package/src/components/query-builder/query-builder.scss

@@ -35,9 +35,15 @@
     padding-bottom: 10px;
   }
 
+  // A row's parts would otherwise all shrink from their bases, leaving the selects only as wide as their arrow
   &__key,
   &__comparator {
-    flex-basis: 60%;
+    flex: 0 1 220px;
+    min-width: 140px;
+  }
+
+  &__row > .query-builder__wrapper {
+    flex: 1 1 200px;
   }
 
   &__value {

package/src/components/query-builder/query-builder.test.ts

@@ -1,5 +1,14 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnQueryBuilder from './query-builder.component';
+
+const filters = [
+  {id: 'email', name: 'Email', operators: ['eq', 'starts']},
+  {id: 'vip', name: 'VIP', type: 'bool', operators: ['eq']},
+  {id: 'country', name: 'Country', options: {GB: 'United Kingdom', US: 'United States'}, operators: ['eq', 'in']},
+];
+
+const submitted = (el: ZnQueryBuilder) => JSON.parse(atob(String(el.value))) as object[];
 
 describe('<zn-query-builder>', () => {
   it('should render a component', async () => {
@@ -7,4 +16,35 @@ describe('<zn-query-builder>', () => {
 
     expect(el).to.exist;
   });
+
+  it('starts with the given rules and submits them unchanged', async () => {
+    const rules = [
+      {key: 'email', comparator: 'starts', value: 'kyle'},
+      {key: 'vip', comparator: 'eq', value: '1'},
+      {key: 'country', comparator: 'in', value: ['GB', 'US']},
+    ];
+    const el = await fixture<ZnQueryBuilder>(html`
+      <zn-query-builder .filters=${filters} .rules=${rules}></zn-query-builder>`);
+
+    expect(submitted(el)).to.deep.equal(rules);
+    const rows = el.shadowRoot!.querySelectorAll('.query-builder__row');
+    expect(rows.length).to.equal(3);
+    expect((rows[0].querySelector('.query-builder__comparator') as HTMLInputElement).value).to.equal('starts');
+    expect((rows[0].querySelector('.query-builder__value') as HTMLInputElement).value).to.equal('kyle');
+    expect((rows[2].querySelector('.query-builder__value') as HTMLInputElement).value).to.deep.equal(['GB', 'US']);
+  });
+
+  it('only offers a filter more than once when repeatable', async () => {
+    const rules = [{key: 'email', comparator: 'eq', value: 'a'}];
+    const options = (el: ZnQueryBuilder) =>
+      [...el.shadowRoot!.querySelectorAll('.add-rule zn-option')].map(o => o.getAttribute('value'));
+
+    const single = await fixture<ZnQueryBuilder>(html`
+      <zn-query-builder .filters=${filters} .rules=${rules}></zn-query-builder>`);
+    expect(options(single)).to.not.include('email');
+
+    const repeatable = await fixture<ZnQueryBuilder>(html`
+      <zn-query-builder repeatable .filters=${filters} .rules=${rules}></zn-query-builder>`);
+    expect(options(repeatable)).to.include('email');
+  });
 });

package/src/components/radio/radio.component.ts

@@ -1,3 +1,4 @@
+import {animateTo, EASE_OUT} from "../../internal/animate";
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
@@ -5,6 +6,7 @@ import {FormControlController} from "../../internal/form";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {live} from "lit/directives/live.js";
+import {PointerIntentController} from "../../internal/pointer-intent";
 import {property, query, state} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
@@ -38,7 +40,7 @@ import styles from './radio.scss';
  * @csspart base - The component's base wrapper.
  * @csspart control - The square container that wraps the radio's checked state.
  * @csspart control--checked - Matches the control part when the radio is checked.
- * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
+ * @csspart checked-icon - The checked dot, a `<span>` element.
  * @csspart image-container - The wrapper around the built-in image or image slot.
  * @csspart image - The built-in image.
  * @csspart card-title - The title inside a selection card.
@@ -68,6 +70,9 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'description', 'image');
 
   @query('input[type="radio"]') input: HTMLInputElement;
+  @query('.radio__control') control: HTMLElement;
+
+  private readonly pointerIntent = new PointerIntentController(this);
 
   @state() private hasFocus = false;
 
@@ -97,6 +102,9 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
   @property({type: Boolean, reflect: true}) square = false;
 
+  /** Centres the text of a contained radio that has no image or `card-title`. */
+  @property({type: Boolean, reflect: true}) centered = false;
+
   /** URL for the image shown in a contained radio. */
   @property() src = '';
 
@@ -107,14 +115,20 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   @property({attribute: 'image-position', reflect: true}) imagePosition: SelectionCardImagePosition = 'left';
 
   /**
-   * Places the radio indicator within a contained card. Use `none` to hide the indicator so the card itself
-   * shows the selected state. Requires `contained`.
+   * Places the radio indicator within a contained card. A contained radio without an image or `card-title` hides it
+   * at `start`, as does `none`. Requires `contained`.
    */
   @property({attribute: 'control-position', reflect: true}) controlPosition: SelectionCardControlPosition = 'start';
 
   /** Applies styles relevant to radios in a horizontal layout. */
   @property({type: Boolean, reflect: true}) horizontal = false;
 
+  /** Draws the radio as one segment of a scale. Set by a radio group with `scale`. */
+  @property({type: Boolean, reflect: true}) scale = false;
+
+  /** Fills a scale segment, as one at or before the group's checked radio. Set by a radio group with `scale`. */
+  @property({type: Boolean, reflect: true}) filled = false;
+
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue('checked') defaultChecked = false;
 
@@ -150,14 +164,31 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   }
 
   private handleClick() {
-    if (this.disabled) {
+    // A radio group checks its radio on the label click, before this input click, so grouped radios must still emit.
+    if (this.disabled || (this.checked && !this.closest('zn-radio-group'))) {
       return;
     }
 
-    this.checked = !this.checked;
+    this.checked = true;
+    this.uncheckNamedSiblings();
     this.emit('zn-change');
   }
 
+  /** Each input sits in its own shadow root, so the browser can't group same-named radios outside a radio group. */
+  private uncheckNamedSiblings() {
+    if (!this.name || this.closest('zn-radio-group')) {
+      return;
+    }
+
+    const root = this.getRootNode() as Document | ShadowRoot;
+    const form = this.closest('form');
+    root.querySelectorAll<ZnRadio>('zn-radio').forEach(radio => {
+      if (radio !== this && radio.name === this.name && radio.closest('form') === form) {
+        radio.checked = false;
+      }
+    });
+  }
+
   private handleBlur() {
     this.hasFocus = false;
     this.emit('zn-blur');
@@ -189,9 +220,17 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   }
 
   @watch(['checked'], {waitUntilFirstUpdate: true})
-  handleStateChange() {
+  async handleStateChange() {
     this.input.checked = this.checked; // force a sync update
     this.formControlController.updateValidity();
+
+    const animate = this.pointerIntent.consume();
+    await this.updateComplete;
+    const dot = this.control.querySelector('.radio__checked-icon');
+    if (dot && animate) {
+      animateTo(this.control, [{scale: '0.9'}, {scale: '1'}], {duration: 160, easing: EASE_OUT});
+      animateTo(dot, [{scale: '0.5', opacity: 0}, {scale: '1', opacity: 1}], {duration: 180, easing: EASE_OUT});
+    }
   }
 
   /** Simulates a click on the radio. */
@@ -285,6 +324,8 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
             'radio--focused': this.hasFocus,
             'radio--contained': this.contained,
             'radio--horizontal': this.horizontal,
+            'radio--scale': this.scale,
+            'radio--filled': this.scale && this.filled,
             'radio--small': this.size === 'small',
             'radio--medium': this.size === 'medium',
             'radio--large': this.size === 'large',
@@ -318,8 +359,7 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
             class="radio__control selection-card__control">
             ${this.checked
               ? html`
-                <zn-icon part="checked-icon" size="18" class="radio__checked-icon"
-                         src="radio_button_checked"></zn-icon>`
+                <span part="checked-icon" class="radio__checked-icon"></span>`
               : ''}
           </span>
 
@@ -345,16 +385,15 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
               part="description">
               <slot name="description">${this.description}</slot>
             </div>
-            ${this.checked
-              ? html`
-                <zn-animation name="fadeIn" easing="ease" duration="300" iterations="1" play>
-                  <slot
-                    name="selected-content"
-                    part="selected-content"
-                    class="radio__selected-content"
-                    @click=${this.handleSelectedContentClick}></slot>
-                </zn-animation>`
-              : ''}
+            <div class="radio__selected-content-wrapper">
+              <div class="radio__selected-content-inner">
+                <slot
+                  name="selected-content"
+                  part="selected-content"
+                  class="radio__selected-content"
+                  @click=${this.handleSelectedContentClick}></slot>
+              </div>
+            </div>
           </div>
         </label>
       </div>

package/src/components/radio/radio.scss

@@ -55,7 +55,7 @@
   justify-content: center;
   width: var(--toggle-size);
   height: var(--toggle-size);
-  border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  border: solid var(--zn-checkbox-border-width, var(--zn-input-border-width)) var(--zn-checkbox-border-color, var(--zn-input-border-color));
   border-radius: 50%;
   background-color: var(--zn-input-background-color);
   color: var(--zn-color-neutral-0);
@@ -74,28 +74,27 @@
 }
 
 .radio__checked-icon {
-  --icon-size: var(--toggle-size);
-  --icon-color: var(--zn-color-primary);
-
-  display: inline-flex;
+  width: 40%;
+  height: 40%;
+  border-radius: 50%;
+  background-color: currentColor;
 }
 
 /* Hover */
 .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-  border-color: rgb(var(--zn-primary));
-  background-color: rgb(var(--zn-primary), .2);
+  border-color: var(--zn-color-primary-500);
 }
 
 /* Checked */
 .radio--checked .radio__control {
-  color: rgb(var(--zn-primary));
-  border: none;
+  border-color: var(--zn-color-primary-600);
+  background-color: var(--zn-color-primary-600);
 }
 
 /* Checked + hover */
 .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-  color: rgba(var(--zn-primary), .6);
-  border: none;
+  border-color: var(--zn-color-primary-500);
+  background-color: var(--zn-color-primary-500);
 }
 
 /* Focus */
@@ -122,14 +121,6 @@
   opacity: 0;
 }
 
-:host-context([required]) .radio__label::after {
-  display: none;
-}
-
-:host([required]) .radio__label::after {
-  display: none;
-}
-
 /* If parent Radio Group has 'data-user-invalid', style all radios in the group as 'data-user-invalid' by targeting with a class ('radio-user-invalid'), since the radios can't be targeted using ::slotted */
 :host(.radio-user-invalid) .radio__control {
   border-color: var(--zn-color-danger-600);
@@ -165,22 +156,95 @@
   -webkit-user-select: none;
 }
 
+/* Scale: the control becomes a bar segment with the label centred beneath it. */
+.radio--scale {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--zn-spacing-x-small);
+  width: 100%;
+  padding-block: var(--zn-spacing-x-small);
+
+  .radio__control {
+    width: 100%;
+    height: var(--zn-radio-scale-segment-height, 0.875rem);
+    border: none;
+    border-radius: var(--zn-radio-scale-segment-radius, 4px);
+    background-color: var(--zn-color-neutral-200);
+    transition: background-color var(--zn-transition-fast) ease-out;
+  }
+
+  .radio__checked-icon {
+    display: none;
+  }
+
+  .radio__label {
+    margin-inline-start: 0;
+    text-align: center;
+    font-size: var(--zn-font-size-small);
+    font-weight: var(--zn-font-weight-medium, 500);
+    line-height: var(--zn-line-height-dense);
+    color: var(--zn-text-color-muted, var(--zn-color-neutral-500));
+    transition: color var(--zn-transition-fast) ease-out;
+  }
+}
+
+.radio.radio--scale:not(.radio--disabled):hover {
+  .radio__control {
+    background-color: var(--zn-color-primary-400);
+  }
+
+  .radio__label {
+    color: var(--zn-color-primary-fg, var(--zn-color-primary-600));
+  }
+}
+
+.radio.radio--scale.radio--filled .radio__control {
+  background-color: var(--zn-color-primary-600);
+}
+
+.radio.radio--scale.radio--filled:not(.radio--disabled):hover .radio__control {
+  background-color: var(--zn-color-primary-700);
+}
+
+.radio.radio--scale.radio--checked .radio__control {
+  outline: 2px solid var(--zn-color-primary-600);
+  outline-offset: 2px;
+}
+
+.radio.radio--scale.radio--checked .radio__label {
+  color: var(--zn-color-primary-fg, var(--zn-color-primary-600));
+  font-weight: var(--zn-font-weight-semibold, 600);
+}
+
 /* Contained */
 .radio--contained {
   padding: 1.375rem var(--zn-spacing-large) 1.375rem var(--zn-spacing-medium);
   border: 1px solid var(--zn-color-gray-400);
+  // A transparent outline from the start lets the checked outline fade in rather than pop.
+  outline: 1px solid transparent;
   width: 100%;
   height: 100%;
+  transition: background-color var(--zn-transition-fast) ease-out,
+  border-color var(--zn-transition-fast) ease-out,
+  outline-color var(--zn-transition-fast) ease-out,
+  scale var(--zn-transition-fast) var(--zn-ease-out);
+
+  .radio__label {
+    transition: color var(--zn-transition-fast) ease-out;
+  }
 }
 
 :not(.radio--disabled).radio--contained:hover,
 :not(.radio--disabled).radio--contained.radio--checked:hover {
-  background-color: var(--zn-color-purple-50);
-  transition: var(--zn-transition-medium) all;
+  background-color: var(--zn-selection-card-hover-background, var(--zn-color-purple-50));
+}
+
+:not(.radio--disabled).radio--contained:active {
+  scale: 0.99;
 }
 
 .radio--contained.radio--checked .radio__label {
-  color: var(--zn-color-purple-600);
+  color: var(--zn-selection-card-checked-color, var(--zn-color-purple-600));
   font-weight: var(--zn-font-weight-semibold);
 }
 
@@ -190,13 +254,24 @@
 }
 
 .radio--contained.radio--checked {
-  background-color: var(--zn-color-purple-100);
-  border: 1px solid var(--zn-color-purple-600);
-  outline: 1px solid var(--zn-color-purple-600);
-  transition: var(--zn-transition-medium) all;
+  background-color: var(--zn-selection-card-checked-background, var(--zn-color-purple-100));
+  border-color: var(--zn-selection-card-checked-color, var(--zn-color-purple-600));
+  outline-color: var(--zn-selection-card-checked-color, var(--zn-color-purple-600));
 }
 
 /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
 .radio:not(.radio--checked) svg circle {
   opacity: 0;
 }
+
+/* Icon and SVG card images take the card's state colour */
+.radio--contained .selection-card__image-container {
+  color: var(--zn-color-gray-500);
+  transition: color var(--zn-transition-fast) ease-out;
+}
+
+.radio--contained.radio--checked .selection-card__image-container {
+  color: var(--zn-selection-card-checked-color, var(--zn-color-purple-600));
+}
+
+@include wc.selected-content-reveal(radio);