@m3e/icon-button 1.0.0-rc.1 → 1.0.0-rc.2

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from "./IconButtonElement";
-export * from "./IconButtonShape";
-export * from "./IconButtonSize";
-export * from "./IconButtonVariant";
-export * from "./IconButtonWidth";

package/src/styles/IconButtonSizeStyle.ts

@@ -1,95 +0,0 @@
-import { css, CSSResult, CSSResultGroup, unsafeCSS } from "lit";
-
-import { IconButtonSize } from "../IconButtonSize";
-import { IconButtonSizeToken } from "./IconButtonSizeToken";
-
-/** @private */
-function iconButtonStyle(size: IconButtonSize): CSSResult {
-  return css`
-    :host([size="${unsafeCSS(size)}"]) .base {
-      height: ${IconButtonSizeToken[size].containerHeight};
-    }
-    :host([size="${unsafeCSS(size)}"][width="default"]) .wrapper {
-      padding-inline-start: ${IconButtonSizeToken[size].defaultLeadingSpace};
-      padding-inline-end: ${IconButtonSizeToken[size].defaultTrailingSpace};
-    }
-    :host([size="${unsafeCSS(size)}"][width="narrow"]) .wrapper {
-      padding-inline-start: ${IconButtonSizeToken[size].narrowLeadingSpace};
-      padding-inline-end: ${IconButtonSizeToken[size].narrowTrailingSpace};
-    }
-    :host([size="${unsafeCSS(size)}"][width="wide"]) .wrapper {
-      padding-inline-start: ${IconButtonSizeToken[size].wideLeadingSpace};
-      padding-inline-end: ${IconButtonSizeToken[size].wideTrailingSpace};
-    }
-    :host([size="${unsafeCSS(size)}"]) .icon {
-      font-size: ${IconButtonSizeToken[size].iconSize};
-    }
-    :host([size="${unsafeCSS(size)}"]) .base {
-      outline-offset: calc(0px - ${IconButtonSizeToken[size].outlineThickness});
-      outline-width: ${IconButtonSizeToken[size].outlineThickness};
-    }
-    :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]:not(.-pressed)) .base {
-      border-radius: var(--_button-shape, ${IconButtonSizeToken[size].shapeRound});
-    }
-    :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base {
-      border-radius: ${IconButtonSizeToken[size].shapeSquare};
-    }
-    :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base {
-      border-radius: ${IconButtonSizeToken[size].selectedShapeRound};
-    }
-    :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
-      border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare});
-    }
-    :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base {
-      border-radius: ${IconButtonSizeToken[size].shapePressedMorph};
-    }
-    :host(.-connected[size="${unsafeCSS(size)}"][shape="rounded"]) .base {
-      border-start-start-radius: var(
-        --_button-rounded-start-shape,
-        var(--_button-shape, ${IconButtonSizeToken[size].shapeRound})
-      );
-      border-end-start-radius: var(
-        --_button-rounded-start-shape,
-        var(--_button-shape, ${IconButtonSizeToken[size].shapeRound})
-      );
-      border-start-end-radius: var(
-        --_button-rounded-end-shape,
-        var(--_button-shape, ${IconButtonSizeToken[size].shapeRound})
-      );
-      border-end-end-radius: var(
-        --_button-rounded-end-shape,
-        var(--_button-shape, ${IconButtonSizeToken[size].shapeRound})
-      );
-    }
-    :host(.-connected[size="${unsafeCSS(size)}"][shape="square"]) .base {
-      border-start-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare});
-      border-end-start-radius: var(--_button-square-start-shape, ${IconButtonSizeToken[size].shapeSquare});
-      border-start-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare});
-      border-end-end-radius: var(--_button-square-end-shape, ${IconButtonSizeToken[size].shapeSquare});
-    }
-    :host(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
-      border-radius: var(--_button-shape, ${IconButtonSizeToken[size].selectedShapeSquare});
-    }
-    :host(.-connected[size="${unsafeCSS(size)}"].-pressed) .base {
-      border-start-start-radius: var(
-        --_button-start-shape-pressed-morph,
-        ${IconButtonSizeToken[size].shapePressedMorph}
-      );
-      border-end-start-radius: var(--_button-start-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph});
-      border-start-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph});
-      border-end-end-radius: var(--_button-end-shape-pressed-morph, ${IconButtonSizeToken[size].shapePressedMorph});
-    }
-  `;
-}
-
-/**
- * Size variant styles for `M3eIconButtonElement`.
- * @internal
- */
-export const IconButtonSizeStyle: CSSResultGroup = [
-  iconButtonStyle("extra-small"),
-  iconButtonStyle("small"),
-  iconButtonStyle("medium"),
-  iconButtonStyle("large"),
-  iconButtonStyle("extra-large"),
-];

package/src/styles/IconButtonSizeToken.ts

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

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

@@ -1,123 +0,0 @@
-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;
-    }
-  `,
-];