@m3e/core 1.0.0-rc.1

package/src/shared/primitives/ElevationElement.ts

@@ -0,0 +1,254 @@
+import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+import { FocusController, HoverController, PressedController } from "../controllers";
+import { HtmlFor, Role } from "../mixins";
+
+import { ElevationLevel } from "./ElevationLevel";
+import { ElevationToken } from "./ElevationToken";
+import { DesignToken } from "../tokens";
+
+/**
+ * @summary
+ * Visually depicts elevation using a shadow.
+ *
+ * @description
+ * The `m3e-elevation` component is an absolute positioned element used to depict elevation using a shadow.
+ * The parenting element must be a relative positioned element and allow for overflow. Use the `level` attribute
+ * to specify the elevation level.
+ *
+ * The component can also be attached to another element using the `for` attribute.  When attached, elevation will
+ * be lifted by 1 level on hover. This can be disabled using the `disabled` attribute.
+ *
+ * Alternately, use the `attach` and `detach` methods to programmatically attach and detach this element to another.
+ *
+ * @example
+ * The following example illustrates basic markup. Note how the parenting element's position is `relative`. A parenting
+ * element's position must be `relative` and overflow must be visible.
+ *
+ * ```html
+ * <div style="position: relative;">
+ *  <m3e-elevation level="1"></m3e-elevation>
+ * <div>
+ * ```
+ * @example
+ * The following example illustrates attaching elevation to an interactive element. In this example, the parenting div
+ * is given an `id` referenced by `m3e-elevation` using the `for` attribute.  Note that `#myDiv` is not used when
+ * specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" style="position: relative;">
+ *  <m3e-elevation for="myDiv" level="1"></m3e-elevation>
+ * <div>
+ * ```
+ *
+ * @tag m3e-elevation
+ *
+ * @attr disabled - Whether hover and press events will not trigger changes in elevation, when attached to an interactive element.
+ * @attr for - The identifier of the interactive control to which this element is attached.
+ * @attr level - The level at which to visually depict elevation.
+ *
+ * @cssprop --m3e-elevation-color - Color used to depict elevation.
+ * @cssprop --m3e-elevation-lift-duration - Duration when lifting.
+ * @cssprop --m3e-elevation-lift-easing - Easing curve when lifting.
+ * @cssprop --m3e-elevation-settle-duration - Duration when settling.
+ * @cssprop --m3e-elevation-settle-easing - Easing curve when settling.
+ * @cssprop --m3e-elevation-level - Elevation when resting (box-shadow).
+ * @cssprop --m3e-elevation-hover-level - Elevation on hover (box-shadow).
+ * @cssprop --m3e-elevation-focus-level - Elevation on focus (box-shadow).
+ * @cssprop --m3e-elevation-pressed-level - Elevation on pressed (box-shadow).
+ */
+@customElement("m3e-elevation")
+export class M3eElevationElement extends HtmlFor(Role(LitElement, "none")) {
+  /** The styles of the element. */
+  static override styles: CSSResultGroup = css`
+    :host {
+      display: block;
+    }
+    :host,
+    .shadow {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+    .shadow.resting,
+    .shadow.focus,
+    .shadow.pressed {
+      will-change: box-shadow;
+      transition: ${unsafeCSS(`box-shadow ${ElevationToken.settleDuration} ${ElevationToken.settleEasing};`)};
+    }
+    .shadow.hover {
+      will-change: box-shadow;
+      transition: ${unsafeCSS(`box-shadow ${ElevationToken.liftDuration} ${ElevationToken.liftEasing};`)};
+    }
+    .shadow {
+      box-shadow: ${ElevationToken.level};
+    }
+    .shadow.focus {
+      box-shadow: ${ElevationToken.focusLevel};
+    }
+    .shadow.hover {
+      box-shadow: ${ElevationToken.hoverLevel};
+    }
+    .shadow.pressed {
+      box-shadow: ${ElevationToken.pressedLevel};
+    }
+    :host([level="0"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level0};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level1};
+    }
+    :host([level="1"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level1};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level2};
+    }
+    :host([level="2"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level2};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level3};
+    }
+    :host([level="3"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level3};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level4};
+    }
+    :host([level="4"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level4};
+      --m3e-elevation-hover-level: ${DesignToken.elevation.level5};
+    }
+    :host([level="5"]) .shadow {
+      --m3e-elevation-level: ${DesignToken.elevation.level5};
+      --m3e-elevation-hover-level: ${ElevationToken.level};
+    }
+    :host([level]) .shadow {
+      --m3e-elevation-focus-level: ${ElevationToken.level};
+      --m3e-elevation-pressed-level: ${ElevationToken.level};
+    }
+    @media (prefers-reduced-motion) {
+      .shadow.resting,
+      .shadow.pressed,
+      .shadow.focus,
+      .shadow.hover {
+        transition: none;
+      }
+    }
+    @media (forced-colors: active) {
+      .shadow {
+        display: none;
+      }
+    }
+  `;
+
+  /** @private */
+  readonly #hoverController = new HoverController(this, {
+    target: null,
+    callback: (hovering) => this.#handleHoverChange(hovering),
+  });
+
+  /** @private */
+  readonly #focusController = new FocusController(this, {
+    target: null,
+    callback: (focused) => this.#handleFocusChange(focused),
+  });
+
+  /** @private */
+  readonly #pressedController = new PressedController(this, {
+    target: null,
+    callback: (pressed) => this.#handlePressedChange(pressed),
+  });
+
+  @query(".shadow") private readonly _shadow?: HTMLElement;
+
+  /**
+   * Whether hover and press events will not trigger changes in elevation, when attached to an interactive element.
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * The level at which to visually depict elevation.
+   * @default null
+   */
+  @property({ type: Number, reflect: true }) level: ElevationLevel | null = null;
+
+  /** @inheritdoc */
+  override attach(control: HTMLElement): void {
+    super.attach(control);
+
+    this.#hoverController.observe(control);
+    this.#focusController.observe(control);
+    this.#pressedController.observe(control);
+  }
+
+  /** @inheritdoc */
+  override detach(): void {
+    if (this.control) {
+      this.#hoverController.unobserve(this.control);
+      this.#focusController.unobserve(this.control);
+      this.#pressedController.unobserve(this.control);
+    }
+    super.detach();
+  }
+
+  /** @inheritdoc */
+  override connectedCallback(): void {
+    this.ariaHidden = "true";
+    super.connectedCallback();
+  }
+
+  /** @inheritdoc */
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    this._shadow?.classList.toggle("hover", false);
+    this._shadow?.classList.toggle("focus", false);
+    this._shadow?.classList.toggle("pressed", false);
+    this._shadow?.classList.toggle("resting", false);
+  }
+
+  /** @inheritdoc */
+  protected override updated(_changedProperties: PropertyValues<this>): void {
+    super.updated(_changedProperties);
+
+    if (_changedProperties.has("disabled") && this.disabled) {
+      this._shadow?.classList.toggle("hover", false);
+      this._shadow?.classList.toggle("focus", false);
+      this._shadow?.classList.toggle("pressed", false);
+      this._shadow?.classList.toggle("resting", true);
+    }
+  }
+
+  /** @inheritdoc */
+  protected override render(): unknown {
+    return html`<div class="shadow"></div>`;
+  }
+
+  /** @private */
+  #handleHoverChange(hovering: boolean): void {
+    if (!this.disabled) {
+      this._shadow?.classList.toggle("hover", hovering);
+      this._shadow?.classList.toggle("resting", !hovering);
+    }
+  }
+
+  /** @private */
+  #handleFocusChange(focused: boolean): void {
+    if (!this.disabled) {
+      this._shadow?.classList.toggle("focus", focused);
+    }
+  }
+
+  /** @private */
+  #handlePressedChange(pressed: boolean): void {
+    if (!this.disabled) {
+      this._shadow?.classList.toggle("pressed", pressed);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "m3e-elevation": M3eElevationElement;
+  }
+}

package/src/shared/primitives/ElevationLevel.ts

@@ -0,0 +1,2 @@
+/** Specifies the possible levels in which to visually depict elevation. */
+export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5;

package/src/shared/primitives/ElevationToken.ts

@@ -0,0 +1,18 @@
+import { unsafeCSS } from "lit";
+
+import { DesignToken } from "../tokens";
+
+/**
+ * Component design tokens that control the `M3eElevationElement`.
+ * @internal
+ */
+export const ElevationToken = {
+  liftDuration: unsafeCSS(`var(--m3e-elevation-lift-duration, ${DesignToken.motion.duration.short4})`),
+  liftEasing: unsafeCSS(`var(--m3e-elevation-lift-easing, ${DesignToken.motion.easing.standard})`),
+  settleDuration: unsafeCSS(`var(--m3e-elevation-settle-duration, ${DesignToken.motion.duration.short3})`),
+  settleEasing: unsafeCSS(`var(--m3e-elevation-settle-easing, ${DesignToken.motion.easing.standardAccelerate})`),
+  level: unsafeCSS(`var(--m3e-elevation-level, ${DesignToken.elevation.level0})`),
+  hoverLevel: unsafeCSS(`var(--m3e-elevation-hover-level, ${DesignToken.elevation.level0})`),
+  focusLevel: unsafeCSS(`var(--m3e-elevation-focus-level, ${DesignToken.elevation.level0})`),
+  pressedLevel: unsafeCSS(`var(--m3e-elevation-pressed-level, ${DesignToken.elevation.level0})`),
+} as const;

package/src/shared/primitives/FocusRingElement.ts

@@ -0,0 +1,199 @@
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+import { FocusController } from "../controllers";
+import { HtmlFor, Role } from "../mixins";
+
+import { FocusRingToken } from "./FocusRingToken";
+
+/**
+ * @summary
+ * A focus ring used to depict a strong focus indicator.
+ *
+ * @description
+ * The `m3e-focus-ring` component is an absolute positioned element used to provide a strong focus indicator.
+ * The parenting element must be a relative positioned focusable element and allow for overflow.
+ *
+ * The component can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
+ * The focus ring is displayed when the interactive element receives visible focus and hidden when focus is lost.
+ * This can be disabled using the `disabled` attribute.
+ *
+ * Alternately, you can use the `show` and `hide` methods to programmatically control the focus ring.
+ *
+ * @example
+ * The following example illustrates attaching a focus ring to an interactive element. In this example, the parenting div
+ * has relative positioning and is given an `id` referenced by `m3e-focus-ring` using the `for` attribute.  Note that `#myDiv`
+ * is not used when specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" tabindex="0" style="position: relative;">
+ *  <m3e-focus-ring for="myDiv"></m3e-focus-ring>
+ * <div>
+ * ```
+ *
+ * @tag m3e-focus-ring
+ *
+ * @attr disabled - Whether the focus events will not trigger the focus ring. Focus rings can be still controlled manually by using the `show` and `hide` methods.
+ * @attr inward - Whether the focus ring animates inward instead of outward.
+ *
+ * @cssprop --m3e-focus-ring-color - The color of the focus ring.
+ * @cssprop --m3e-focus-ring-duration - The duration of the focus ring animation.
+ * @cssprop --m3e-focus-ring-growth-factor - The factor by which the focus ring grows.
+ * @cssprop --m3e-focus-ring-thickness - The thickness of the focus ring.
+ * @cssprop --m3e-focus-ring-visibility - The visibility of the focus ring.
+ */
+@customElement("m3e-focus-ring")
+export class M3eFocusRingElement extends HtmlFor(Role(LitElement, "none")) {
+  /** The styles of the element. */
+  static override styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      border-radius: inherit;
+      outline: none;
+    }
+    .outline {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      border-radius: inherit;
+      z-index: 1;
+      outline-color: ${FocusRingToken.color};
+      outline-width: ${FocusRingToken.thickness};
+      visibility: ${FocusRingToken.visibility};
+    }
+    .outline.visible {
+      outline-style: solid;
+    }
+    :host(:not([inward])) .outline {
+      outline-offset: calc(${FocusRingToken.thickness} / ${FocusRingToken.growthFactor});
+    }
+    :host([inward]) .outline {
+      outline-offset: calc(0px - ${FocusRingToken.thickness});
+    }
+    :host(:not([inward])) .outline.visible {
+      animation: grow-shrink ${FocusRingToken.duration};
+    }
+    :host([inward]) .outline.visible {
+      animation: shrink-grow ${FocusRingToken.duration};
+    }
+    @keyframes grow-shrink {
+      50% {
+        outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor});
+      }
+    }
+    @keyframes shrink-grow {
+      50% {
+        outline-offset: calc(0px - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}));
+        outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor});
+      }
+    }
+    @media (prefers-reduced-motion) {
+      :host(:not([inward])) .outline.visible,
+      :host([inward]) .outline.visible {
+        animation: none;
+      }
+    }
+    @media (forced-colors: active) {
+      .outline {
+        outline-color: Highlight;
+      }
+    }
+  `;
+
+  /** @private */
+  readonly #focusController = new FocusController(this, {
+    target: null,
+    callback: (_, focusVisible) => this.#handleFocusChange(focusVisible),
+  });
+
+  /** @private */ @query(".outline") private readonly _outline?: HTMLElement;
+
+  /**
+   * Whether the focus ring animates inward instead of outward.
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true }) inward = false;
+
+  /**
+   * Whether the focus events will not trigger the focus ring.
+   * Focus rings can be still controlled manually by using the `show` and `hide` methods.
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Launches a manual focus ring. */
+  show(): void {
+    this._outline?.classList.toggle("visible", true);
+  }
+
+  /** Hides the focus ring. */
+  hide(): void {
+    this._outline?.classList.toggle("visible", false);
+  }
+
+  /** @inheritdoc */
+  override attach(control: HTMLElement): void {
+    super.attach(control);
+    this.#focusController.observe(control);
+  }
+
+  /** @inheritdoc */
+  override detach(): void {
+    if (this.control) {
+      this.#focusController.unobserve(this.control);
+    }
+    super.detach();
+  }
+
+  /** @inheritdoc */
+  override connectedCallback(): void {
+    this.ariaHidden = "true";
+    super.connectedCallback();
+  }
+
+  /** @inheritdoc */
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.hide();
+  }
+
+  /** @inheritdoc */
+  protected override render(): unknown {
+    return html`<div class="outline"></div>`;
+  }
+
+  /** @inheritdoc */
+  protected override updated(_changedProperties: PropertyValues<this>): void {
+    super.updated(_changedProperties);
+
+    if (_changedProperties.has("disabled") && this.disabled) {
+      this.hide();
+    }
+  }
+
+  /** @private */
+  #handleFocusChange(focusVisible: boolean): void {
+    if (!this.disabled) {
+      if (focusVisible) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "m3e-focus-ring": M3eFocusRingElement;
+  }
+}

package/src/shared/primitives/FocusRingToken.ts

@@ -0,0 +1,24 @@
+import { unsafeCSS } from "lit";
+
+import { DesignToken } from "../tokens";
+
+/**
+ * Component design tokens that control the `M3eFocusRingElement`.
+ * @internal
+ */
+export const FocusRingToken = {
+  /** The color of the focus ring. */
+  color: unsafeCSS(`var(--m3e-focus-ring-color, ${DesignToken.color.secondary})`),
+
+  /** The duration of the focus ring animation. */
+  duration: unsafeCSS(`var(--m3e-focus-ring-duration, ${DesignToken.motion.duration.long2})`),
+
+  /** The thickness of the focus ring. */
+  thickness: unsafeCSS(`var(--m3e-focus-ring-thickness, 0.1875rem)`),
+
+  /** The visibility of the focus ring. */
+  visibility: unsafeCSS(`var(--m3e-focus-ring-visibility, visible)`),
+
+  /** The factor by which the focus ring grows. */
+  growthFactor: unsafeCSS(`var(--m3e-focus-ring-growth-factor, 2)`),
+} as const;

package/src/shared/primitives/PseudoCheckboxElement.ts

@@ -0,0 +1,116 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import { CheckedIndeterminate, Disabled, Role } from "../mixins";
+import { DesignToken } from "../tokens";
+
+/**
+ * @summary
+ * An element which looks like a checkbox.
+ *
+ * @description
+ * The `m3e-pseudo-checkbox` component is a pseudo-checkbox supporting checked, indeterminate, and disabled
+ * states. It is customizable via CSS properties for expressive, accessible UI design.
+ *
+ * @example
+ * The following example illustrates how to render a checked pseudo-checkbox.
+ * ```html
+ * <m3e-pseudo-checkbox checked></m3e-pseudo-checkbox>
+ * ```
+ *
+ * @tag m3e-pseudo-checkbox
+ *
+ * @attr checked - A value indicating whether the element is checked.
+ * @attr disabled - A value indicating whether the element is disabled.
+ * @attr indeterminate - A value indicating whether the element's checked state is indeterminate.
+ *
+ * @cssprop --m3e-checkbox-icon-size - Size of the checkbox icon.
+ * @cssprop --m3e-checkbox-container-shape - Border radius of the checkbox container.
+ * @cssprop --m3e-checkbox-unselected-outline-thickness - Outline thickness for unselected state.
+ * @cssprop --m3e-checkbox-unselected-outline-color - Outline color for unselected state.
+ * @cssprop --m3e-checkbox-selected-container-color - Background color for selected state.
+ * @cssprop --m3e-checkbox-selected-icon-color - Icon color for selected state.
+ * @cssprop --m3e-checkbox-unselected-disabled-outline-color - Outline color for unselected disabled state.
+ * @cssprop --m3e-checkbox-unselected-disabled-outline-opacity - Outline opacity for unselected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-container-color - Background color for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-container-opacity - Background opacity for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-icon-color - Icon color for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-icon-opacity - Icon opacity for selected disabled state.
+ */
+@customElement("m3e-pseudo-checkbox")
+export class M3ePseudoCheckboxElement extends CheckedIndeterminate(Disabled(Role(LitElement, "none"))) {
+  /** The styles of the element. */
+  static override styles: CSSResultGroup = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      width: var(--m3e-checkbox-icon-size, 1.125rem);
+      height: var(--m3e-checkbox-icon-size, 1.125rem);
+      border-radius: var(--m3e-checkbox-container-shape, 0.125rem);
+      box-sizing: border-box;
+      flex: none;
+    }
+    :host(:not([checked]):not([indeterminate])) {
+      border-width: var(--m3e-checkbox-unselected-outline-thickness, 0.125rem);
+      border-style: solid;
+    }
+    :host(:not([disabled])[checked]),
+    :host(:not([disabled])[indeterminate]) {
+      background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary});
+      color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary});
+    }
+    :host(:not([disabled]):not([checked]):not([indeterminate])) {
+      border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant});
+    }
+    :host([disabled]:not([checked]):not([indeterminate])) {
+      border-color: color-mix(
+        in srgb,
+        var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface})
+          var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%),
+        transparent
+      );
+    }
+    :host([disabled][checked]),
+    :host([disabled][indeterminate]) {
+      background-color: color-mix(
+        in srgb,
+        var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface})
+          var(--m3e-checkbox-selected-disabled-container-opacity, 38%),
+        transparent
+      );
+      color: color-mix(
+        in srgb,
+        var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface})
+          var(--m3e-checkbox-selected-disabled-icon-opacity, 100%),
+        transparent
+      );
+    }
+  `;
+
+  /** @inheritdoc */
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.ariaHidden = "true";
+  }
+
+  /** @inheritdoc */
+  protected override render(): unknown {
+    if (this.indeterminate) {
+      return html`<svg viewBox="0 -960 960 960" fill="currentColor">
+        <path Required d="M240-440v-80h480v80H240Z" />
+      </svg>`;
+    }
+    if (this.checked) {
+      return html`<svg viewBox="0 -960 960 960" fill="currentColor">
+        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+      </svg>`;
+    }
+    return nothing;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "m3e-pseudo-checkbox": M3ePseudoCheckboxElement;
+  }
+}

package/src/shared/primitives/PseudoRadioElement.ts

@@ -0,0 +1,83 @@
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import { Checked, Disabled, Role } from "../mixins";
+import { DesignToken } from "../tokens";
+
+/**
+ * @summary
+ * An element which looks like a radio button.
+ *
+ * @description
+ * The `m3e-pseudo-radio` component is a pseudo-radio supporting checked and disabled
+ * states. It is customizable via CSS properties for expressive, accessible UI design.
+ *
+ * @example
+ * The following example illustrates how to render a checked pseudo-radio.
+ * ```html
+ * <m3e-pseudo-radio checked></m3e-pseudo-radio>
+ * ```
+ *
+ * @tag m3e-pseudo-radio
+ *
+ * @attr checked - A value indicating whether the element is checked.
+ * @attr disabled - A value indicating whether the element is disabled.
+ *
+ * @cssprop --m3e-radio-icon-size - Size of the radio icon.
+ * @cssprop --m3e-radio-unselected-icon-color - Color of the unselected radio icon.
+ * @cssprop --m3e-radio-selected-icon-color - Color of the selected radio icon.
+ * @cssprop --m3e-radio-disabled-icon-color - Color of the disabled radio icon.
+ */
+@customElement("m3e-pseudo-radio")
+export class M3ePseudoRadioElement extends Checked(Disabled(Role(LitElement, "none"))) {
+  /** The styles of the element. */
+  static override styles: CSSResultGroup = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      box-sizing: border-box;
+      width: var(--m3e-radio-icon-size, 1.25rem);
+      height: var(--m3e-radio-icon-size, 1.25rem);
+      flex: none;
+    }
+    .circle {
+      fill: currentColor;
+    }
+    :host(:not([checked])) .circle.inner {
+      opacity: 0;
+    }
+    :host(:not([checked])) {
+      color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant});
+    }
+    :host([checked]) {
+      color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary});
+    }
+    :host([disabled]) {
+      color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);
+    }
+  `;
+
+  /** @inheritdoc */
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.ariaHidden = "true";
+  }
+
+  /** @inheritdoc */
+  protected override render(): unknown {
+    return html`<svg class="icon" viewBox="0 0 20 20">
+      <mask id="cutout2">
+        <rect width="100%" height="100%" fill="white"></rect>
+        <circle cx="10" cy="10" r="8" fill="black"></circle>
+      </mask>
+      <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout2)"></circle>
+      <circle class="inner circle" cx="10" cy="10" r="5"></circle>
+    </svg>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "m3e-pseudo-radio": M3ePseudoRadioElement;
+  }
+}