@kubex/zinc 1.1.98 → 1.1.99

package/src/components/background/background.component.ts

@@ -0,0 +1,111 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from '../icon';
+
+import styles from './background.scss';
+
+export type BackgroundImageStrength = 'soft' | 'medium' | 'full';
+export type BackgroundMotion = 'none' | 'drift' | 'breathe';
+export type BackgroundOverlay = 'none' | 'soft' | 'strong';
+export type BackgroundOverlayTone = 'light' | 'dark';
+
+/**
+ * @summary Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.
+ *
+ * @documentation https://zinc.style/components/background
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon
+ *
+ * @slot - Content displayed above the background layers.
+ *
+ * @csspart base - The component's full-size background canvas.
+ * @csspart image - The decorative background image.
+ * @csspart overlay - The contrast overlay between the image and content.
+ * @csspart floating-icons - The non-interactive layer containing the floating icons.
+ * @csspart floating-icon - Each floating `zn-icon`.
+ * @csspart content - The wrapper around the default slot.
+ *
+ * @cssproperty --zn-background-color - Fallback colour when the `color` attribute is not set.
+ * @cssproperty --zn-background-image-position - Position of the background image. Defaults to `center`.
+ * @cssproperty --zn-background-overlay-angle - Direction of the overlay gradient. Defaults to `110deg`.
+ * @cssproperty --zn-background-floating-icon-color - Colour of the floating icons. Defaults to `currentColor`.
+ */
+export default class ZnBackground extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {'zn-icon': ZnIcon};
+
+  private readonly resizeObserver = new ResizeController<number>(this, {
+    callback: entries => {
+      const width = entries[0]?.contentRect.width ?? this.offsetWidth;
+      return Math.max(1, Math.min(width * 0.05, 150));
+    },
+  });
+
+  /** URL of the decorative background image. */
+  @property() image = '';
+
+  /** CSS colour painted beneath the image. */
+  @property() color = '';
+
+  /** Visibility of the image: `soft` (30%), `medium` (62%) or `full` (100%). */
+  @property({attribute: 'image-strength', reflect: true}) imageStrength: BackgroundImageStrength = 'full';
+
+  /** Subtle animation applied to the image. Motion stops when reduced motion is requested. */
+  @property({reflect: true}) motion: BackgroundMotion = 'none';
+
+  /** Strength of the contrast gradient above the image. */
+  @property({reflect: true}) overlay: BackgroundOverlay = 'soft';
+
+  /** Whether the overlay uses a light or dark contrast treatment. */
+  @property({attribute: 'overlay-tone', reflect: true}) overlayTone: BackgroundOverlayTone = 'light';
+
+  /** Comma-separated Zinc icon names placed as ambient decoration. At most eight are rendered. */
+  @property({attribute: 'floating-icons'}) floatingIcons = '';
+
+  /** Pauses background motion without changing the selected motion treatment. */
+  @property({type: Boolean, reflect: true}) paused = false;
+
+  render() {
+    const floatingIcons = this.floatingIcons
+      .split(',')
+      .map(icon => icon.trim())
+      .filter(Boolean)
+      .slice(0, 8);
+    const floatingIconSize = this.resizeObserver.value ?? 1;
+
+    return html`
+      <div
+        part="base"
+        class="background"
+        style=${styleMap({'--_zn-background-color': this.color || undefined})}>
+        ${this.image ? html`
+          <img
+            part="image"
+            class="background__image"
+            src=${this.image}
+            alt=""
+            decoding="async">
+        ` : ''}
+        <div part="overlay" class="background__overlay" aria-hidden="true"></div>
+        ${floatingIcons.length ? html`
+          <div part="floating-icons" class="background__floating-icons" aria-hidden="true">
+            ${floatingIcons.map(icon => html`
+              <zn-icon
+                part="floating-icon"
+                class="background__floating-icon"
+                src=${icon}
+                size=${floatingIconSize}
+                aria-hidden="true"></zn-icon>
+            `)}
+          </div>
+        ` : ''}
+        <div part="content" class="background__content"><slot></slot></div>
+      </div>
+    `;
+  }
+}

package/src/components/background/background.scss

@@ -0,0 +1,236 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.background {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  overflow: hidden;
+  background-color: var(--_zn-background-color, var(--zn-background-color, transparent));
+}
+
+.background__image,
+.background__overlay,
+.background__floating-icons {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.background__image {
+  width: 108%;
+  height: 108%;
+  max-width: none;
+  inset: -4%;
+  object-fit: cover;
+  object-position: var(--zn-background-image-position, center);
+  opacity: 1;
+}
+
+:host([image-strength="soft"]) .background__image {
+  opacity: 0.3;
+}
+
+:host([image-strength="medium"]) .background__image {
+  opacity: 0.62;
+}
+
+.background__overlay {
+  background: linear-gradient(
+    var(--zn-background-overlay-angle, 110deg),
+    rgb(255 255 255 / 18%),
+    rgb(255 255 255 / 4%)
+  );
+}
+
+:host([overlay="none"]) .background__overlay {
+  display: none;
+}
+
+:host([overlay="strong"]) .background__overlay {
+  background: linear-gradient(
+    var(--zn-background-overlay-angle, 110deg),
+    rgb(255 255 255 / 48%),
+    rgb(255 255 255 / 18%)
+  );
+}
+
+:host([overlay-tone="dark"]) .background__overlay {
+  background: linear-gradient(
+    var(--zn-background-overlay-angle, 110deg),
+    rgb(4 12 32 / 28%),
+    rgb(4 12 32 / 6%)
+  );
+}
+
+:host([overlay-tone="dark"][overlay="strong"]) .background__overlay {
+  background: linear-gradient(
+    var(--zn-background-overlay-angle, 110deg),
+    rgb(4 12 32 / 62%),
+    rgb(4 12 32 / 28%)
+  );
+}
+
+:host([motion="drift"]) .background__image {
+  animation: zn-background-drift 28s ease-in-out infinite alternate;
+}
+
+:host([motion="breathe"]) .background__image {
+  animation: zn-background-breathe 18s ease-in-out infinite;
+}
+
+:host([paused]) .background__image {
+  animation-play-state: paused;
+}
+
+.background__floating-icons {
+  overflow: hidden;
+  color: var(--zn-background-floating-icon-color, currentColor);
+}
+
+.background__floating-icon {
+  --_zn-background-icon-opacity-min: 0.01;
+  --_zn-background-icon-opacity-max: 0.18;
+  position: absolute;
+  left: 8%;
+  top: 13%;
+  opacity: var(--_zn-background-icon-opacity-min);
+  animation: zn-background-icon-float 11s ease-in-out infinite alternate both;
+}
+
+.background__floating-icon:nth-child(2) {
+  --_zn-background-icon-opacity-min: 0.08;
+  --_zn-background-icon-opacity-max: 0.34;
+  left: auto;
+  right: 9%;
+  top: 9%;
+  animation-delay: -4s;
+  animation-duration: 14s;
+}
+
+.background__floating-icon:nth-child(3) {
+  --_zn-background-icon-opacity-min: 0.03;
+  --_zn-background-icon-opacity-max: 0.5;
+  left: 2%;
+  top: 47%;
+  animation-delay: -7s;
+  animation-duration: 13s;
+}
+
+.background__floating-icon:nth-child(4) {
+  --_zn-background-icon-opacity-min: 0.12;
+  --_zn-background-icon-opacity-max: 0.38;
+  left: auto;
+  right: 12%;
+  top: 45%;
+  animation-delay: -2s;
+  animation-duration: 10s;
+}
+
+.background__floating-icon:nth-child(5) {
+  --_zn-background-icon-opacity-min: 0.05;
+  --_zn-background-icon-opacity-max: 0.29;
+  left: 21%;
+  top: auto;
+  bottom: 4%;
+  animation-delay: -5s;
+  animation-duration: 15s;
+}
+
+.background__floating-icon:nth-child(6) {
+  --_zn-background-icon-opacity-min: 0.01;
+  --_zn-background-icon-opacity-max: 0.42;
+  left: auto;
+  right: 4%;
+  top: auto;
+  bottom: 3%;
+  animation-delay: -9s;
+  animation-duration: 12s;
+}
+
+.background__floating-icon:nth-child(7) {
+  --_zn-background-icon-opacity-min: 0.09;
+  --_zn-background-icon-opacity-max: 0.31;
+  left: 42%;
+  top: 7%;
+  animation-delay: -6s;
+  animation-duration: 16s;
+}
+
+.background__floating-icon:nth-child(8) {
+  --_zn-background-icon-opacity-min: 0.04;
+  --_zn-background-icon-opacity-max: 0.46;
+  left: 54%;
+  top: auto;
+  bottom: 8%;
+  animation-delay: -11s;
+  animation-duration: 17s;
+}
+
+:host([paused]) .background__floating-icon {
+  animation-play-state: paused;
+}
+
+.background__content {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+}
+
+@keyframes zn-background-drift {
+  from {
+    transform: scale(1.04) translate3d(-1.2%, -0.6%, 0);
+  }
+
+  to {
+    transform: scale(1.04) translate3d(1.2%, 0.6%, 0);
+  }
+}
+
+@keyframes zn-background-breathe {
+  0%, 100% {
+    transform: scale(1.02);
+  }
+
+  50% {
+    transform: scale(1.07);
+  }
+}
+
+@keyframes zn-background-icon-float {
+  from {
+    opacity: var(--_zn-background-icon-opacity-min);
+    transform: translate3d(-8%, -12%, 0) scale(0.88) rotate(-8deg);
+  }
+
+  to {
+    opacity: var(--_zn-background-icon-opacity-max);
+    transform: translate3d(8%, 12%, 0) scale(1.06) rotate(8deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .background__image,
+  .background__floating-icon {
+    animation: none;
+  }
+
+  .background__floating-icon {
+    opacity: var(--_zn-background-icon-opacity-max);
+  }
+}

package/src/components/background/background.test.ts

@@ -0,0 +1,120 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnBackground from './background.component';
+
+const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+
+describe('<zn-background>', () => {
+  it('renders slotted content above the background layers', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background><p>Lesson content</p></zn-background>`);
+
+    const content = el.shadowRoot!.querySelector<HTMLElement>('.background__content')!;
+    const slot = content.querySelector<HTMLSlotElement>('slot')!;
+
+    expect(slot.assignedElements()[0].textContent).to.equal('Lesson content');
+    expect(getComputedStyle(content).zIndex).to.equal('1');
+  });
+
+  it('composes the configured colour and decorative image', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background color="#123456" image=${transparentImage}></zn-background>`);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('.background')!;
+    const image = el.shadowRoot!.querySelector<HTMLImageElement>('.background__image')!;
+
+    expect(getComputedStyle(base).backgroundColor).to.equal('rgb(18, 52, 86)');
+    expect(image.src).to.equal(transparentImage);
+    expect(image.alt).to.equal('');
+    expect(image.getAttribute('part')).to.equal('image');
+  });
+
+  it('does not render an image element without an image URL', async () => {
+    const el = await fixture<ZnBackground>(html`<zn-background></zn-background>`);
+
+    expect(el.shadowRoot!.querySelector('.background__image')).to.not.exist;
+  });
+
+  it('applies soft, medium and full image strengths', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background image=${transparentImage} image-strength="soft"></zn-background>`);
+    const image = el.shadowRoot!.querySelector<HTMLImageElement>('.background__image')!;
+
+    expect(getComputedStyle(image).opacity).to.equal('0.3');
+    el.imageStrength = 'medium';
+    await el.updateComplete;
+    expect(getComputedStyle(image).opacity).to.equal('0.62');
+    el.imageStrength = 'full';
+    await el.updateComplete;
+    expect(getComputedStyle(image).opacity).to.equal('1');
+  });
+
+  it('supports drift and breathe motion and can pause it', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background image=${transparentImage} motion="drift"></zn-background>`);
+    const image = el.shadowRoot!.querySelector<HTMLImageElement>('.background__image')!;
+
+    expect(getComputedStyle(image).animationName).to.equal('zn-background-drift');
+    el.motion = 'breathe';
+    el.paused = true;
+    await el.updateComplete;
+    expect(getComputedStyle(image).animationName).to.equal('zn-background-breathe');
+    expect(getComputedStyle(image).animationPlayState).to.equal('paused');
+  });
+
+  it('supports none, soft and strong light or dark overlays', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background overlay="none"></zn-background>`);
+    const overlay = el.shadowRoot!.querySelector<HTMLElement>('.background__overlay')!;
+
+    expect(getComputedStyle(overlay).display).to.equal('none');
+    el.overlay = 'soft';
+    await el.updateComplete;
+    const lightGradient = getComputedStyle(overlay).backgroundImage;
+    expect(lightGradient).to.contain('255, 255, 255');
+
+    el.overlay = 'strong';
+    el.overlayTone = 'dark';
+    await el.updateComplete;
+    const darkGradient = getComputedStyle(overlay).backgroundImage;
+    expect(darkGradient).to.contain('4, 12, 32');
+    expect(darkGradient).to.not.equal(lightGradient);
+  });
+
+  it('renders up to eight comma-separated floating Zinc icons', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background
+        floating-icons="school, lightbulb, quiz, psychology, star, rocket, science, public, hidden">
+      </zn-background>`);
+    const icons = el.shadowRoot!.querySelectorAll<HTMLElement>('.background__floating-icon');
+
+    expect(icons).to.have.lengthOf(8);
+    expect(icons[0].getAttribute('src')).to.equal('school');
+    expect(icons[7].getAttribute('src')).to.equal('public');
+    expect(el.shadowRoot!.querySelector('.background__floating-icons')!.getAttribute('aria-hidden')).to.equal('true');
+  });
+
+  it('sizes floating icons to five percent of the background width', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background floating-icons="school" style="width: 1000px;"></zn-background>`);
+    const icon = el.shadowRoot!.querySelector<HTMLElement & {size: number}>('.background__floating-icon')!;
+
+    await waitUntil(() => icon.size === 50);
+    expect(icon.size).to.equal(50);
+  });
+
+  it('caps floating icons at 150 pixels and keeps opacity within one to fifty percent', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background floating-icons="school,lightbulb" style="width: 4000px;"></zn-background>`);
+    const icons = [...el.shadowRoot!.querySelectorAll<HTMLElement & {size: number}>('.background__floating-icon')];
+
+    await waitUntil(() => icons[0].size === 150);
+    expect(icons[0].size).to.equal(150);
+    icons.forEach(icon => {
+      const styles = getComputedStyle(icon);
+      expect(Number(styles.getPropertyValue('--_zn-background-icon-opacity-min'))).to.be.at.least(0.01);
+      expect(Number(styles.getPropertyValue('--_zn-background-icon-opacity-max'))).to.be.at.most(0.5);
+      expect(styles.animationName).to.equal('zn-background-icon-float');
+    });
+  });
+});

package/src/components/background/index.ts

@@ -0,0 +1,12 @@
+import ZnBackground from './background.component';
+
+export * from './background.component';
+export default ZnBackground;
+
+ZnBackground.define('zn-background');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-background': ZnBackground;
+  }
+}

package/src/components/checkbox/checkbox.component.ts

@@ -9,6 +9,7 @@ import {property, query, state} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
+import type {SelectionCardControlPosition, SelectionCardImagePosition} from '../../internal/selection-card';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './checkbox.scss';
@@ -24,6 +25,7 @@ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'suc
  * @dependency zn-icon
  *
  * @slot - The checkbox's label.
+ * @slot image - Replaces the built-in image used by contained checkboxes.
  * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
  * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
  *
@@ -40,9 +42,22 @@ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'suc
  * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
  * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
  * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` 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.
  * @csspart label - The container that wraps the checkbox's label.
  * @csspart description - The container that wraps the checkbox's description.
  * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.
+ *
+ * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
+ * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
+ * @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.
+ * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
+ * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
+ * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
+ * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
+ * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
+ * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
  */
 export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -53,7 +68,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     defaultValue: (control: ZnCheckbox) => control.defaultChecked,
     setValue: (control: ZnCheckbox, checked: boolean) => (control.checked = checked)
   });
-  private readonly hasSlotController = new HasSlotController(this, 'description');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'description', 'image');
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
 
@@ -67,6 +82,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** The current value of the checkbox, submitted as a name/value pair with form data. */
   @property() value: string;
 
+  /** Title rendered inside the card. The default slot takes precedence when provided. */
+  @property({attribute: 'card-title'}) cardTitle = '';
+
   /** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
   @property({attribute: 'unchecked-value', reflect: true}) uncheckedValue: string;
 
@@ -88,6 +106,24 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** Draws a container around the checkbox. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /** URL for the image shown in a contained checkbox. */
+  @property() src = '';
+
+  /** Accessible text for the built-in image. Leave empty when the image is decorative. */
+  @property({attribute: 'image-alt'}) imageAlt = '';
+
+  /** Places the image above, beside, or below the checkbox's text. Requires `contained`. */
+  @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`.
+   */
+  @property({attribute: 'control-position', reflect: true}) controlPosition: SelectionCardControlPosition = 'start';
+
   /** Removes a container around the checkbox. */
   @property({type: Boolean, reflect: true}) borderless = false;
 
@@ -244,6 +280,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   render() {
     const hasDescriptionSlot = this.hasSlotController.test('description');
     const hasDescription = this.description ? true : hasDescriptionSlot;
+    const hasImage = this.contained && (Boolean(this.src) || this.hasSlotController.test('image'));
+    const hasDefaultSlot = this.hasSlotController.test('[default]');
+    const isCard = this.contained && (hasImage || Boolean(this.cardTitle) || this.controlPosition !== 'start');
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltip = this.hasSlotController.test('label-tooltip');
     const hasLabel = this.label || hasLabelSlot;
@@ -309,7 +348,11 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             'checkbox--warning': effectiveColor === 'warning',
             'checkbox--transparent': effectiveColor === 'transparent',
             'checkbox--has-description': hasDescription,
-            'checkbox--has-selected-content': this.hasSlotController.test('selected-content')
+            'checkbox--has-selected-content': this.hasSlotController.test('selected-content'),
+            'selection-card': isCard,
+            'selection-card--has-image': hasImage,
+            [`selection-card--image-${this.imagePosition}`]: hasImage,
+            [`selection-card--control-${this.controlPosition}`]: isCard && this.controlPosition !== 'start'
           })}>
 
           <input
@@ -323,7 +366,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             .disabled=${this.disabled}
             .required=${this.required}
             aria-checked=${this.checked ? 'true' : 'false'}
-            aria-describedby=${hasDescription ? '' : 'description'}
+            aria-describedby=${hasDescription ? 'description' : ''}
             @click=${this.handleClick}
             @input=${this.handleInput}
             @invalid=${this.handleInvalid}
@@ -334,7 +377,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             part="control${this.checked ? ' control--checked' : ''}${this.indeterminate
               ? ' control--indeterminate'
               : ''}"
-            class="checkbox__control">
+            class="checkbox__control selection-card__control">
 
             ${this.checked && !this.indeterminate
               ? this.checkedIcon
@@ -367,8 +410,21 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
               : ''}
           </span>
 
-          <div part="label" class="checkbox__label">
-            <slot></slot>
+          ${hasImage
+            ? html`
+              <span part="image-container" class="selection-card__image-container">
+                <slot name="image">
+                  ${this.src
+                    ? html`<img part="image" class="selection-card__image" src=${this.src} alt=${this.imageAlt}>`
+                    : ''}
+                </slot>
+              </span>`
+            : ''}
+
+          <div part="label" class="checkbox__label selection-card__content">
+            <span part="card-title" class="selection-card__title">
+              <slot></slot>${hasDefaultSlot ? '' : this.cardTitle}
+            </span>
             <div
               aria-hidden=${hasDescription ? 'false' : 'true'}
               class="checkbox__description"

package/src/components/checkbox/checkbox.scss

@@ -1,5 +1,6 @@
 @use "../../wc";
 @use "../../form-control";
+@use "../../selection-card";
 
 :host {
   display: block;