@m3e/icon-button 1.0.0-rc.1

package/src/styles/IconButtonSizeToken.ts

@@ -0,0 +1,215 @@
+import { CSSResult, unsafeCSS } from "lit";
+
+import { DesignToken } from "@m3e/core";
+
+import { IconButtonSize } from "../IconButtonSize";
+
+/** @private */
+type _IconButtonSizeToken = {
+  containerHeight: CSSResult;
+  outlineThickness: CSSResult;
+  iconSize: CSSResult;
+  shapeRound: CSSResult;
+  shapeSquare: CSSResult;
+  selectedShapeRound: CSSResult;
+  selectedShapeSquare: CSSResult;
+  shapePressedMorph: CSSResult;
+  narrowLeadingSpace: CSSResult;
+  narrowTrailingSpace: CSSResult;
+  defaultLeadingSpace: CSSResult;
+  defaultTrailingSpace: CSSResult;
+  wideLeadingSpace: CSSResult;
+  wideTrailingSpace: CSSResult;
+};
+
+/**
+ * Component design tokens that control the `M3eIconButtonElement` for all size variants.
+ * @internal
+ */
+export const IconButtonSizeToken: Record<IconButtonSize, _IconButtonSizeToken> = {
+  /** Design tokens that control the `extra-small` `size` variant. */
+  "extra-small": {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-small-container-height, 2rem) + ${DesignToken.density.calc(0)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${DesignToken.density.calc(0)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, ${DesignToken.shape.corner.medium})`),
+    selectedShapeRound: unsafeCSS(
+      `var(--m3e-icon-button-extra-small-selected-shape-round, ${DesignToken.shape.corner.medium})`
+    ),
+    selectedShapeSquare: unsafeCSS(
+      `var(--m3e-icon-button-extra-small-selected-shape-square, ${DesignToken.shape.corner.full})`
+    ),
+    shapePressedMorph: unsafeCSS(
+      `var(--m3e-icon-button-extra-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`
+    ),
+    narrowLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${DesignToken.density.calc(0)})`
+    ),
+    narrowTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${DesignToken.density.calc(0)})`
+    ),
+    defaultLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${DesignToken.density.calc(0)})`
+    ),
+    defaultTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${DesignToken.density.calc(0)})`
+    ),
+    wideLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${DesignToken.density.calc(0)})`
+    ),
+    wideTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${DesignToken.density.calc(0)})`
+    ),
+  },
+
+  /** Design tokens that control the `small` `size` variant. */
+  small: {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${DesignToken.density.calc(-1)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, 1px)"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${DesignToken.density.calc(-1)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, ${DesignToken.shape.corner.medium})`),
+    selectedShapeRound: unsafeCSS(
+      `var(--m3e-icon-button-small-selected-shape-round, ${DesignToken.shape.corner.medium})`
+    ),
+    selectedShapeSquare: unsafeCSS(
+      `var(--m3e-icon-button-small-selected-shape-square, ${DesignToken.shape.corner.full})`
+    ),
+    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
+    narrowLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${DesignToken.density.calc(-1)})`
+    ),
+    narrowTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${DesignToken.density.calc(-1)})`
+    ),
+    defaultLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${DesignToken.density.calc(-1)})`
+    ),
+    defaultTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${DesignToken.density.calc(-1)})`
+    ),
+    wideLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${DesignToken.density.calc(-1)})`
+    ),
+    wideTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${DesignToken.density.calc(-1)})`
+    ),
+  },
+
+  /** Design tokens that control the `medium` `size` variant. */
+  medium: {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${DesignToken.density.calc(-2)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, 1px)"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${DesignToken.density.calc(-2)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, ${DesignToken.shape.corner.large})`),
+    selectedShapeRound: unsafeCSS(
+      `var(--m3e-icon-button-medium-selected-shape-round, ${DesignToken.shape.corner.large})`
+    ),
+    selectedShapeSquare: unsafeCSS(
+      `var(--m3e-icon-button-medium-selected-shape-square, ${DesignToken.shape.corner.full})`
+    ),
+    shapePressedMorph: unsafeCSS(
+      `var(--m3e-icon-button-medium-shape-pressed-morph, ${DesignToken.shape.corner.medium})`
+    ),
+    narrowLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${DesignToken.density.calc(-2)})`
+    ),
+    narrowTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${DesignToken.density.calc(-2)})`
+    ),
+    defaultLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${DesignToken.density.calc(-2)})`
+    ),
+    defaultTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${DesignToken.density.calc(-2)})`
+    ),
+    wideLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${DesignToken.density.calc(-2)})`
+    ),
+    wideTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${DesignToken.density.calc(-2)})`
+    ),
+  },
+
+  /** Design tokens that control the `large` `size` variant. */
+  large: {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-icon-button-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${DesignToken.density.calc(-3)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
+    selectedShapeRound: unsafeCSS(
+      `var(--m3e-icon-button-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`
+    ),
+    selectedShapeSquare: unsafeCSS(
+      `var(--m3e-icon-button-large-selected-shape-square, ${DesignToken.shape.corner.full})`
+    ),
+    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
+    narrowLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    narrowTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    defaultLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    defaultTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    wideLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    wideTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${DesignToken.density.calc(-3)})`
+    ),
+  },
+
+  /** Design tokens that control the `extra-large` `size` variant. */
+  "extra-large": {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${DesignToken.density.calc(-3)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
+    selectedShapeRound: unsafeCSS(
+      `var(--m3e-icon-button-extra-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`
+    ),
+    selectedShapeSquare: unsafeCSS(
+      `var(--m3e-icon-button-extra-large-selected-shape-square, ${DesignToken.shape.corner.full})`
+    ),
+    shapePressedMorph: unsafeCSS(
+      `var(--m3e-icon-button-extra-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`
+    ),
+    narrowLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    narrowTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    defaultLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    defaultTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    wideLeadingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    wideTrailingSpace: unsafeCSS(
+      `calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${DesignToken.density.calc(-3)})`
+    ),
+  },
+} as const;

package/src/styles/IconButtonStyle.ts

@@ -0,0 +1,184 @@
+import { css, CSSResultGroup, unsafeCSS } from "lit";
+
+import { DesignToken } from "@m3e/core";
+
+/**
+ * Baseline styles for `M3eIconButtonElement`.
+ * @internal
+ */
+export const IconButtonStyle: CSSResultGroup = css`
+  :host {
+    display: inline-block;
+    outline: none;
+    user-select: none;
+  }
+  .base {
+    box-sizing: border-box;
+    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    transition: ${unsafeCSS(
+      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`
+    )};
+  }
+  .touch {
+    position: absolute;
+    aspect-ratio: 1 / 1;
+    height: 3rem;
+    left: auto;
+    right: auto;
+  }
+  :host(.-pressed) .base,
+  :host(.-resting) .base {
+    transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
+          border-radius ${DesignToken.motion.spring.fastEffects}`)};
+  }
+  .wrapper {
+    width: 100%;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)};
+  }
+  .icon {
+    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
+
+    --m3e-icon-size: 1em;
+  }
+  :host(:not(:disabled):not([disabled-interactive])) {
+    cursor: pointer;
+  }
+  :host([disabled-interactive]) {
+    cursor: not-allowed;
+  }
+  ::slotted(*) {
+    font-size: inherit !important;
+    flex: none;
+    transform: var(--_icon-button-icon-transform);
+    transform-origin: center center;
+    transition: ${unsafeCSS(
+      `transform var(--_icon-button-icon-transform-transition, ${DesignToken.motion.spring.fastEffects})`
+    )};
+  }
+  ::slotted(svg) {
+    width: 1em;
+    height: 1em;
+  }
+  :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"],
+  :host([toggle][selected]) .base.with-selected-icon slot:not([name]) {
+    display: none;
+  }
+  a {
+    all: unset;
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 1;
+  }
+  :host(.-grouped.-connected) {
+    flex: 1 1 auto;
+  }
+  :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) {
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+  :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+  :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label {
+    text-overflow: clip;
+  }
+  :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) {
+    flex-shrink: 0;
+    flex-basis: calc(
+      var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15))
+    );
+  }
+  @media (forced-colors: active) {
+    .base,
+    .icon {
+      transition: none;
+    }
+    :host(.-pressed) .base,
+    :host(.-resting) .base {
+      transition: border-radius ${DesignToken.motion.spring.fastEffects};
+    }
+    :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base {
+      background-color: ButtonFace;
+      outline-color: ButtonText;
+    }
+    :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label,
+    :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon {
+      color: ButtonText;
+    }
+    :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base {
+      background-color: ButtonFace;
+      outline-color: ButtonText;
+    }
+    :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label,
+    :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon {
+      color: ButtonText;
+    }
+    :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base {
+      background-color: ButtonText;
+      outline: none;
+    }
+    :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label,
+    :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon {
+      forced-color-adjust: none;
+      color: ButtonFace;
+      background-color: ButtonText;
+    }
+    :host([variant]:disabled) .base,
+    :host([variant][disabled-interactive]) .base {
+      outline-color: GrayText;
+      background-color: unset;
+    }
+    :host([variant]:disabled) .label,
+    :host([variant][disabled-interactive]) .label,
+    :host([variant]:disabled) .icon,
+    :host([variant][disabled-interactive]) .icon {
+      color: GrayText;
+    }
+    .base {
+      outline-style: solid;
+    }
+    :host([size="extra-small"]) .base {
+      outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px));
+      outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px);
+    }
+    :host([size="small"]) .base {
+      outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px));
+      outline-width: var(--m3e-icon-button-small-outline-thickness, 1px);
+    }
+    :host([size="medium"]) .base {
+      outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px));
+      outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px);
+    }
+    :host([size="large"]) .base {
+      outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem));
+      outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem);
+    }
+    :host([size="extra-large"]) .base {
+      outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem));
+      outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem);
+    }
+  }
+  @media (prefers-reduced-motion) {
+    :host(.-pressed) .base,
+    :host(.-resting) .base,
+    .base,
+    .wrapper,
+    .icon {
+      transition: none;
+    }
+  }
+`;

package/src/styles/IconButtonVariantStyle.ts

@@ -0,0 +1,123 @@
+import { css, CSSResult, CSSResultGroup, unsafeCSS } from "lit";
+
+import { IconButtonVariant } from "../IconButtonVariant";
+import { IconButtonVariantToken } from "./IconButtonVariantToken";
+
+/** @private */
+function iconButtonVariantStyle(variant: IconButtonVariant | "elevated"): CSSResult {
+  return css`
+    :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base {
+      background-color: ${IconButtonVariantToken[variant].containerColor ?? unsafeCSS("unset")};
+      --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.stateLayerColor};
+      --m3e-state-layer-hover-opacity: ${IconButtonVariantToken[variant].hover.stateLayerOpacity};
+      --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.stateLayerColor};
+      --m3e-state-layer-focus-opacity: ${IconButtonVariantToken[variant].focus.stateLayerOpacity};
+      --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.stateLayerColor};
+      --m3e-ripple-opacity: ${IconButtonVariantToken[variant].pressed.stateLayerOpacity};
+      --m3e-elevation-level: ${IconButtonVariantToken[variant].containerElevation ?? unsafeCSS("unset")};
+      --m3e-elevation-hover-level: ${IconButtonVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")};
+      --m3e-elevation-focus-level: ${IconButtonVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")};
+      --m3e-elevation-pressed-level: ${IconButtonVariantToken[variant].pressed.containerElevation ??
+      unsafeCSS("unset")};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base {
+      background-color: ${IconButtonVariantToken[variant].unselectedContainerColor ?? unsafeCSS("unset")};
+      --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.unselectedStateLayerColor};
+      --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.unselectedStateLayerColor};
+      --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.unselectedStateLayerColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base {
+      background-color: ${IconButtonVariantToken[variant].selectedContainerColor ?? unsafeCSS("unset")};
+      --m3e-state-layer-hover-color: ${IconButtonVariantToken[variant].hover.selectedStateLayerColor};
+      --m3e-state-layer-focus-color: ${IconButtonVariantToken[variant].focus.selectedStateLayerColor};
+      --m3e-ripple-color: ${IconButtonVariantToken[variant].pressed.selectedStateLayerColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .base {
+      outline-color: ${IconButtonVariantToken[variant].outlineColor ?? unsafeCSS("unset")};
+    }
+    :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .base {
+      outline-color: ${IconButtonVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")};
+    }
+    :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .base {
+      outline-color: ${IconButtonVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")};
+    }
+    :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .base {
+      outline-color: ${IconButtonVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")};
+    }
+    :host([variant="${unsafeCSS(variant)}"]:not(:disabled):not([disabled-interactive])) .icon {
+      color: ${IconButtonVariantToken[variant].iconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon {
+      color: ${IconButtonVariantToken[variant].unselectedIconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon {
+      color: ${IconButtonVariantToken[variant].selectedIconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"]:focus:not(:disabled):not([disabled-interactive])) .icon {
+      color: ${IconButtonVariantToken[variant].focus.iconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive]))
+      .icon {
+      color: ${IconButtonVariantToken[variant].focus.unselectedIconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon {
+      color: ${IconButtonVariantToken[variant].focus.selectedIconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"]:hover:not(:disabled):not([disabled-interactive])) .icon {
+      color: ${IconButtonVariantToken[variant].hover.iconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive]))
+      .icon {
+      color: ${IconButtonVariantToken[variant].hover.unselectedIconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon {
+      color: ${IconButtonVariantToken[variant].hover.selectedIconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon {
+      color: ${IconButtonVariantToken[variant].pressed.iconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive]))
+      .icon {
+      color: ${IconButtonVariantToken[variant].pressed.unselectedIconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive]))
+      .icon {
+      color: ${IconButtonVariantToken[variant].pressed.selectedIconColor};
+    }
+    :host([variant="${unsafeCSS(variant)}"]:disabled) .base,
+    :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .base {
+      outline-color: ${IconButtonVariantToken[variant].disabled.outlineColor ?? unsafeCSS("unset")};
+      background-color: color-mix(
+        in srgb,
+        ${IconButtonVariantToken[variant].disabled.containerColor}
+          ${IconButtonVariantToken[variant].disabled.containerOpacity},
+        transparent
+      );
+    }
+    :host([variant="${unsafeCSS(variant)}"]:disabled) .icon,
+    :host([variant="${unsafeCSS(variant)}"][disabled-interactive]) .icon {
+      color: color-mix(
+        in srgb,
+        ${IconButtonVariantToken[variant].disabled.iconColor} ${IconButtonVariantToken[variant].disabled.iconOpacity},
+        transparent
+      );
+    }
+  `;
+}
+
+/**
+ * Appearance variant styles for `M3eIconButtonElement`.
+ * @internal
+ */
+export const IconButtonVariantStyle: CSSResultGroup = [
+  iconButtonVariantStyle("standard"),
+  iconButtonVariantStyle("outlined"),
+  iconButtonVariantStyle("filled"),
+  iconButtonVariantStyle("tonal"),
+  iconButtonVariantStyle("elevated"),
+  css`
+    :host([variant="outlined"]) .base {
+      outline-style: solid;
+    }
+  `,
+];