@kubex/zinc 1.1.184 → 2.0.0

package/src/components/chart/chart.scss

@@ -8,3 +8,124 @@
 .chart {
   position: relative;
 }
+
+.chart--loading #chart {
+  visibility: hidden;
+}
+
+// Mirrors the cartesian grid in builders.ts (left 40, right 20, top 40, bottom 30)
+.loading {
+  position: absolute;
+  inset: 0 0 auto;
+  pointer-events: none;
+
+  &--out {
+    animation: loading-out .4s ease-out both;
+  }
+}
+
+// ECharts pads its legend by 5px
+.loading__legend {
+  position: absolute;
+  top: 7px;
+  right: 5px;
+  display: flex;
+  gap: 12px;
+}
+
+.loading__pill {
+  display: block;
+  height: 10px;
+  border-radius: 5px;
+  background: var(--zn-skeleton-background, rgb(var(--zn-border-color)));
+}
+
+.loading__plot {
+  position: absolute;
+  inset: 40px 20px 30px 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.loading__row {
+  position: relative;
+  height: 1px;
+  background: rgb(var(--zn-border-color));
+}
+
+.loading__label {
+  position: absolute;
+  right: calc(100% + 8px);
+  top: -4px;
+  width: 22px;
+  height: 8px;
+}
+
+.loading__x {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+
+  .loading__pill {
+    width: 44px;
+    height: 8px;
+  }
+}
+
+.loading__track {
+  position: relative;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--zn-skeleton-background, rgb(var(--zn-border-color)));
+
+  .loading__label {
+    top: -3px;
+  }
+
+  // Clipped here rather than on the track, which would cut off its axis label
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    overflow: hidden;
+    background: linear-gradient(90deg, transparent, var(--zn-chart-color-1, rgb(var(--zn-primary))), transparent) no-repeat;
+    background-size: 40% 100%;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .loading__row,
+  .loading__x,
+  .loading__legend .loading__pill {
+    animation: loading-pulse 1.4s ease-in-out infinite;
+  }
+
+  .loading__track::before {
+    animation: loading-sweep 1.4s ease-in-out infinite;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading__track::before {
+    display: none;
+  }
+}
+
+@keyframes loading-pulse {
+  0%, 100% { opacity: .4; }
+  50% { opacity: 1; }
+}
+
+@keyframes loading-sweep {
+  from { background-position: -70% 0; }
+  to { background-position: 170% 0; }
+}
+
+@keyframes loading-out {
+  to { opacity: 0; }
+}

package/src/components/chart/chart.test.ts

@@ -116,4 +116,85 @@ describe('<zn-chart>', () => {
     await new Promise((r) => setTimeout(r, 50));
     expect(a.chart?.group).to.equal('g1');
   });
+
+  it('emits zn-chart-click with the clicked point', async () => {
+    const el: any = await fixture(html`
+      <zn-chart type="bar"
+        .data=${[{ name: 'S', data: [1, 2] }]}
+        .categories=${['A', 'B']}></zn-chart>
+    `);
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 50));
+    let detail: any;
+    el.addEventListener('zn-chart-click', (e: CustomEvent) => { detail = e.detail; });
+    el.chart.trigger('click', { seriesName: 'S', name: 'B', dataIndex: 1, value: 2 });
+    expect(detail).to.deep.equal({ seriesName: 'S', name: 'B', dataIndex: 1, value: 2 });
+  });
+
+  it('uses the theme palette when no colors are given', async () => {
+    const el: any = await fixture(html`
+      <zn-chart style="--zn-chart-color-1: #010203; --zn-chart-color-2: #040506"
+                categories='["a"]' data='[{"name":"s","data":[1]}]'></zn-chart>`);
+
+    expect(el.getPalette()).to.deep.equal(['#010203', '#040506']);
+  });
+
+  it('prefers explicit colors over the theme palette', async () => {
+    const el: any = await fixture(html`<zn-chart style="--zn-chart-color-1: #010203"></zn-chart>`);
+    el.colors = ['#ffffff'];
+
+    expect(el.buildOption().color).to.deep.equal(['#ffffff']);
+  });
+
+  it('fetches data-url once without live, taking categories and data from the response', async () => {
+    const original = window.fetch;
+    const calls: RequestInit[] = [];
+    window.fetch = ((_url: string, init: RequestInit) => {
+      calls.push(init);
+      return Promise.resolve(new Response(JSON.stringify({categories: ['a', 'b'], data: [{name: 'Sent', data: [1, 2]}]})));
+    }) as any;
+
+    try {
+      const el: any = await fixture(html`<zn-chart type="line" data-url="/metrics/chart"></zn-chart>`);
+      await el.initPromise;
+      await new Promise(r => setTimeout(r, 50));
+      await el.updateComplete;
+
+      expect(calls.length).to.equal(1);
+      expect((calls[0].headers as Record<string, string>)['x-kx-fetch-style']).to.equal('raw-json');
+      expect(el.categories).to.deep.equal(['a', 'b']);
+      expect(el.chart.getOption().series[0].data).to.deep.equal([1, 2]);
+      expect(el.chart.getOption().yAxis[0].max).to.not.equal(6);
+
+      await new Promise(r => setTimeout(r, 1200));
+      expect(calls.length).to.equal(1);
+    } finally {
+      window.fetch = original;
+    }
+  });
+
+  it('shows a placeholder until data-url loads', async () => {
+    const original = window.fetch;
+    let resolve!: (r: Response) => void;
+    window.fetch = (() => new Promise<Response>(r => { resolve = r; })) as any;
+
+    try {
+      const el: any = await fixture(html`<zn-chart type="line" data-url="/metrics/chart"></zn-chart>`);
+      await el.initPromise;
+      expect(el.shadowRoot.querySelector('.loading')).to.exist;
+      expect(el.shadowRoot.querySelector('.chart--loading')).to.exist;
+
+      resolve(new Response(JSON.stringify([{name: 'Sent', data: [1, 2]}])));
+      await new Promise(r => setTimeout(r, 50));
+      await el.updateComplete;
+      expect(el.shadowRoot.querySelector('.chart--loading')).to.not.exist;
+      expect(el.chart.getOption().series[0].data).to.deep.equal([1, 2]);
+
+      await new Promise(r => setTimeout(r, 450));
+      await el.updateComplete;
+      expect(el.shadowRoot.querySelector('.loading')).to.not.exist;
+    } finally {
+      window.fetch = original;
+    }
+  });
 });

package/src/components/chat-message/chat-message.component.ts

@@ -25,6 +25,7 @@ export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added'
  * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
  * @slot attachments - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`,
  * which auto-assigns itself to this slot.
+ * @slot footer - Content beneath the bubble, such as reactions or a thread summary.
  * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).
  * @slot edit-dialog - Pass-through for an associated dialog element.
  *
@@ -35,6 +36,7 @@ export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added'
  * @csspart bubble - The message bubble.
  * @csspart content - The message content within the bubble.
  * @csspart attachments - The attachments row beneath the message content.
+ * @csspart footer - The row beneath the bubble.
  * @csspart system-card - The card rendered for system action types.
  *
  * @cssproperty --message-background - The bubble's background color.
@@ -86,6 +88,9 @@ export default class ZnChatMessage extends ZincElement {
   /** Whether any element is assigned to the `attachments` slot — drives the attachments row visibility. */
   @state() private hasAttachments = false;
 
+  /** Whether any element is assigned to the `footer` slot — drives the footer row visibility. */
+  @state() private hasFooter = false;
+
   connectedCallback() {
     const isContent = !this.actionType || this.actionType === 'internal';
     const agentInitiated = isContent && this.agentInitiated;
@@ -141,6 +146,12 @@ export default class ZnChatMessage extends ZincElement {
                 <slot name="edit-dialog-trigger"></slot>
               </div>`}
           </div>
+          <slot
+            name="footer"
+            part="footer"
+            class="message__footer ${this.hasFooter ? 'message__footer--visible' : ''}"
+            @slotchange=${this.syncHasFooter}
+          ></slot>
         </div>
       </div>
       <slot name="edit-dialog"></slot>
@@ -149,7 +160,11 @@ export default class ZnChatMessage extends ZincElement {
 
   protected firstUpdated() {
     this.syncHasAttachments();
-    Promise.resolve().then(() => this.syncHasAttachments());
+    this.syncHasFooter();
+    Promise.resolve().then(() => {
+      this.syncHasAttachments();
+      this.syncHasFooter();
+    });
   }
 
   private handleAttachmentsSlotChange() {
@@ -161,6 +176,11 @@ export default class ZnChatMessage extends ZincElement {
     this.hasAttachments = !!slot && slot.assignedElements().length > 0;
   }
 
+  private syncHasFooter() {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="footer"]');
+    this.hasFooter = !!slot && slot.assignedElements().length > 0;
+  }
+
   private isSystemMessage() {
     return ZnChatMessage.SYSTEM_ACTION_TYPES.includes(this.actionType);
   }

package/src/components/chat-message/chat-message.scss

@@ -104,11 +104,11 @@
     }
 
     pre {
-      background-color: #23241f;
+      background-color: var(--zn-code-background, #23241f);
       border-radius: 3px;
       margin-block: 5px;
       padding: 5px 10px;
-      color: #f8f8f2;
+      color: var(--zn-code-color, #f8f8f2);
       overflow: auto;
     }
 
@@ -167,6 +167,17 @@
     @include wc.text-style(subheading-small);
   }
 
+  &__footer {
+    display: none;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--zn-spacing-x-small);
+
+    &--visible {
+      display: flex;
+    }
+  }
+
   &__actions {
     flex-shrink: 0;
     display: flex;

package/src/components/chat-message/chat-message.test.ts

@@ -16,6 +16,15 @@ describe('<zn-chat-message>', () => {
     expect(el).to.exist;
   });
 
+  it('should show the footer row only when content is slotted into it', async () => {
+    const empty = await fixture<LitElement>('<zn-chat-message sender="Sam">Hi</zn-chat-message>');
+    const filled = await fixture<LitElement>('<zn-chat-message sender="Sam">Hi<span slot="footer">👍 1</span></zn-chat-message>');
+    await filled.updateComplete;
+
+    expect(empty.shadowRoot!.querySelector('.message__footer--visible')).to.be.null;
+    expect(filled.shadowRoot!.querySelector('.message__footer--visible')).to.exist;
+  });
+
   it('should render formatting and blocks chat styles', async () => {
     const content = await messageContent('<p><strong>Hi</strong></p><pre>code</pre><blockquote>quoted</blockquote>');
 

package/src/components/checkbox/checkbox.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';
@@ -71,8 +73,10 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     setValue: (control: ZnCheckbox, checked: boolean) => (control.checked = checked)
   });
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'description', 'image');
+  private readonly pointerIntent = new PointerIntentController(this);
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
+  @query('.checkbox__control') control: HTMLElement;
 
   @state() private hasFocus = false;
 
@@ -111,6 +115,9 @@ export default class ZnCheckbox 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 checkbox that has no image or `card-title`. */
+  @property({type: Boolean, reflect: true}) centered = false;
+
   /** URL for the image shown in a contained checkbox. */
   @property() src = '';
 
@@ -121,8 +128,8 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   @property({attribute: 'image-position', reflect: true}) imagePosition: SelectionCardImagePosition = 'left';
 
   /**
-   * Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself
-   * shows the selected state. Requires `contained`.
+   * Places the checkbox indicator within a contained card. A contained checkbox without an image or `card-title` hides it
+   * at `start`, as does `none`. Requires `contained`.
    */
   @property({attribute: 'control-position', reflect: true}) controlPosition: SelectionCardControlPosition = 'start';
 
@@ -158,7 +165,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** The icon to show when the checkbox is checked. */
   @property({attribute: 'checked-icon'}) checkedIcon = '';
 
-  /** The icon to show when the checkbox is unchecked. */
+  /** The icon to show when the checkbox is unchecked. Defaults to a muted `checked-icon`. */
   @property({attribute: 'unchecked-icon'}) uncheckedIcon = '';
 
   /** The color of the checkbox. */
@@ -234,10 +241,35 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   }
 
   @watch(['checked', 'indeterminate'], {waitUntilFirstUpdate: true})
-  handleStateChange() {
+  async handleStateChange() {
     this.input.checked = this.checked; // force a sync update
     this.input.indeterminate = this.indeterminate; // force a sync update
     this.formControlController.updateValidity();
+
+    const animate = this.pointerIntent.consume();
+    await this.updateComplete;
+    if (!animate) {
+      return;
+    }
+
+    animateTo(this.control, [{scale: '0.9'}, {scale: '1'}], {duration: 160, easing: EASE_OUT});
+
+    const tick = this.control.querySelector('.checkbox__checked-icon');
+    if (tick) {
+      animateTo(tick, [{strokeDashoffset: 12}, {strokeDashoffset: 0}], {duration: 180, delay: 40, easing: EASE_OUT, fill: 'backwards'});
+    }
+
+    if (this.uncheckedIcon && this.uncheckedIcon !== this.checkedIcon && !this.indeterminate) {
+      animateTo(this.control.querySelector('.checkbox__icon')!, [
+        {scale: '0.6', opacity: 0},
+        {scale: '1', opacity: 1}
+      ], {duration: 180, easing: EASE_OUT});
+    }
+
+    const bar = this.control.querySelector('.checkbox__indeterminate-icon');
+    if (bar) {
+      animateTo(bar, [{scale: '0 1'}, {scale: '1 1'}], {duration: 160, easing: EASE_OUT});
+    }
   }
 
   /** Simulates a click on the checkbox. */
@@ -290,6 +322,8 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     const hasLabel = this.label || hasLabelSlot;
 
     // Determine the effective color
+    const hasCustomIcon = Boolean(this.checkedIcon || this.uncheckedIcon);
+    const customIconSize = {small: 16, medium: 20, large: 24}[this.size];
     const effectiveColor = (this.checked || this.indeterminate)
       ? (this.checkedColor || this.color)
       : (this.uncheckedColor || this.color);
@@ -336,6 +370,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             'checkbox--focused': this.hasFocus,
             'checkbox--indeterminate': this.indeterminate,
             'checkbox--contained': this.contained,
+            'checkbox--custom-icon': hasCustomIcon,
             'checkbox--no-border': this.borderless,
             'checkbox--horizontal': this.horizontal,
             'checkbox--small': this.size === 'small',
@@ -384,34 +419,33 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             ${this.checked && !this.indeterminate
               ? this.checkedIcon
                 ? html`
-                  <zn-icon part="checked-icon" class="checkbox__icon" src="${this.checkedIcon}"></zn-icon>`
+                  <zn-icon part="checked-icon" class="checkbox__icon" src="${this.checkedIcon}"
+                           size="${customIconSize}"></zn-icon>`
                 : html`
-                  <svg viewBox="0 0 24 24"
+                  <svg viewBox="0 0 16 16"
                        fill="none"
                        stroke="currentColor"
-                       stroke-width="4"
-                       stroke-linecap="round"
-                       stroke-linejoin="round"
+                       stroke-width="2"
                        class="svg-icon">
-                    <polyline class="checkbox__checked-icon" points="20 6 9 17 4 12"></polyline>
+                    <polyline class="checkbox__checked-icon" points="4 7.8 6.9 10.6 12 5.4"></polyline>
                   </svg>`
               : ''}
 
-            ${!this.checked && !this.indeterminate && this.uncheckedIcon
+            ${!this.checked && !this.indeterminate && hasCustomIcon
               ? html`
-                <zn-icon part="unchecked-icon" class="checkbox__icon" src="${this.uncheckedIcon}"></zn-icon>`
+                <zn-icon part="unchecked-icon" class="checkbox__icon" src="${this.uncheckedIcon || this.checkedIcon}"
+                         size="${customIconSize}"></zn-icon>`
               : ''}
 
             ${!this.checked && this.indeterminate
               ? html`
-                <svg viewBox="0 0 24 24"
+                <svg viewBox="0 0 16 16"
                      fill="none"
                      stroke="currentColor"
-                     stroke-width="4"
-                     stroke-linecap="round"
+                     stroke-width="2"
                      part="indeterminate-icon"
                      class="checkbox__indeterminate-icon">
-                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                  <line x1="4" y1="8" x2="12" y2="8"></line>
                 </svg>`
               : ''}
           </span>
@@ -427,7 +461,8 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
               </span>`
             : ''}
 
-          <div part="label" class="checkbox__label selection-card__content">
+          <div part="label" class="checkbox__label selection-card__content"
+               ?hidden=${!hasDefaultSlot && !this.cardTitle && !hasDescription}>
             <span part="card-title" class="selection-card__title">
               <slot></slot>${hasDefaultSlot ? '' : this.cardTitle}
             </span>
@@ -438,16 +473,15 @@ export default class ZnCheckbox 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="checkbox__selected-content"
-                    @click=${this.handleSelectedContentClick}></slot>
-                </zn-animation>`
-              : ''}
+            <div class="checkbox__selected-content-wrapper">
+              <div class="checkbox__selected-content-inner">
+                <slot
+                  name="selected-content"
+                  part="selected-content"
+                  class="checkbox__selected-content"
+                  @click=${this.handleSelectedContentClick}></slot>
+              </div>
+            </div>
           </div>
         </label>
       </div>

package/src/components/checkbox/checkbox.scss

@@ -112,7 +112,7 @@
   justify-content: center;
   width: var(--toggle-size);
   height: var(--toggle-size);
-  border: solid var(--zn-input-border-width) var(--checkbox-border-color);
+  border: solid var(--zn-checkbox-border-width, var(--zn-input-border-width)) var(--checkbox-border-color);
   background-color: var(--checkbox-bg-color);
   border-radius: var(--zn-border-radius-small);
   color: var(--checkbox-icon-color);
@@ -131,18 +131,18 @@
 }
 
 .checkbox__indeterminate-icon {
-  height: max(16px, 70%);
+  width: 100%;
+  height: 100%;
   color: var(--checkbox-icon-color);
 }
 
 .svg-icon {
-  height: max(16px, 70%);
+  width: 100%;
+  height: 100%;
   --icon-color: var(--checkbox-icon-color);
 
   .checkbox__checked-icon {
-    stroke-dasharray: 24;
-    stroke-dashoffset: 24;
-    transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    stroke-dasharray: 12;
   }
 }
 
@@ -154,10 +154,6 @@
   .svg-icon {
     color: var(--checkbox-icon-color);
   }
-
-  .checkbox__checked-icon {
-    stroke-dashoffset: 0;
-  }
 }
 
 /* Hover */
@@ -201,14 +197,6 @@
   cursor: not-allowed;
 }
 
-:host-context([required]) .checkbox__label::after {
-  display: none;
-}
-
-:host([required]) .checkbox__label::after {
-  display: none;
-}
-
 /* If parent Checkbox Group has 'data-user-invalid', style all checkboxes in the group as 'data-user-invalid' by targeting with a class ('checkbox-user-invalid'), since the checkboxes can't be targeted using ::slotted */
 :host(.checkbox-user-invalid) .checkbox__control {
   border-color: var(--zn-color-danger-600);
@@ -237,6 +225,12 @@
 
 .checkbox__label {
   display: inline-block;
+
+  // Without a label, its margin would sit the box off-centre
+  &[hidden] {
+    display: none;
+  }
+
   color: var(--zn-input-label-color);
   line-height: var(--toggle-size);
   margin-inline-start: 0.75em;
@@ -255,18 +249,31 @@
   padding: 1.375rem var(--zn-spacing-large) 1.375rem var(--zn-spacing-medium);
   border: 1px solid var(--zn-color-gray-400);
   border-radius: var(--zn-border-radius);
+  // 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);
+
+  .checkbox__label {
+    transition: color var(--zn-transition-fast) ease-out;
+  }
 }
 
 :not(.checkbox--disabled).checkbox--contained:hover,
 :not(.checkbox--disabled).checkbox--contained.checkbox--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(.checkbox--disabled).checkbox--contained:active {
+  scale: 0.99;
 }
 
 .checkbox--contained.checkbox--checked .checkbox__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);
 }
 
@@ -276,10 +283,9 @@
 }
 
 .checkbox--contained.checkbox--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));
 }
 
 /** Select prefix slot */
@@ -331,3 +337,30 @@
     color: var(--zn-color-neutral-0);
   }
 }
+
+/* Custom icons replace the box, so the icon's colour carries the state */
+.checkbox--custom-icon .checkbox__control {
+  border-color: transparent !important;
+  background-color: transparent !important;
+  color: var(--zn-color-neutral-500);
+}
+
+.checkbox--custom-icon:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+  color: var(--checkbox-color-hover);
+}
+
+.checkbox--custom-icon.checkbox--checked .checkbox__control {
+  color: var(--checkbox-color);
+}
+
+@include wc.selected-content-reveal(checkbox);
+
+/* Icon and SVG card images take the card's state colour */
+.checkbox--contained .selection-card__image-container {
+  color: var(--zn-color-gray-500);
+  transition: color var(--zn-transition-fast) ease-out;
+}
+
+.checkbox--contained.checkbox--checked .selection-card__image-container {
+  color: var(--zn-selection-card-checked-color, var(--zn-color-purple-600));
+}