@m3e/core 1.0.0-rc.1 → 1.0.0-rc.2

package/src/shared/primitives/ElevationElement.ts

@@ -1,254 +0,0 @@
-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

@@ -1,2 +0,0 @@
-/** 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

@@ -1,18 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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;
-  }
-}