@m3e/button 1.0.0-rc.1

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./ButtonElement";
+export * from "./ButtonShape";
+export * from "./ButtonSize";
+export * from "./ButtonVariant";

package/src/styles/ButtonSizeStyle.ts

@@ -0,0 +1,102 @@
+import { css, CSSResult, CSSResultGroup, unsafeCSS } from "lit";
+
+import { ButtonSize } from "../ButtonSize";
+import { ButtonSizeToken } from "./ButtonSizeToken";
+
+/** @private */
+function buttonStyle(size: ButtonSize): CSSResult {
+  return css`
+    :host([size="${unsafeCSS(size)}"]) .base {
+      height: ${ButtonSizeToken[size].containerHeight};
+    }
+    :host([size="${unsafeCSS(size)}"]) .wrapper {
+      padding-inline-start: ${ButtonSizeToken[size].leadingSpace};
+      padding-inline-end: ${ButtonSizeToken[size].trailingSpace};
+      column-gap: ${ButtonSizeToken[size].iconLabelSpace};
+    }
+    :host([size="${unsafeCSS(size)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper {
+      padding-inline-start: calc(
+        ${ButtonSizeToken[size].leadingSpace} -
+          calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25)
+      );
+      padding-inline-end: calc(
+        ${ButtonSizeToken[size].trailingSpace} -
+          calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25)
+      );
+    }
+    :host([size="${unsafeCSS(size)}"]) .label {
+      font-size: ${ButtonSizeToken[size].labelTextFontSize};
+      font-weight: ${ButtonSizeToken[size].labelTextFontWeight};
+      line-height: ${ButtonSizeToken[size].labelTextLineHeight};
+      letter-spacing: ${ButtonSizeToken[size].labelTextTracking};
+    }
+    :host([size="${unsafeCSS(size)}"]) .icon {
+      font-size: ${ButtonSizeToken[size].iconSize};
+      --m3e-icon-size: ${ButtonSizeToken[size].iconSize};
+    }
+    :host([size="${unsafeCSS(size)}"]) .base {
+      outline-offset: calc(0px - ${ButtonSizeToken[size].outlineThickness});
+      outline-width: ${ButtonSizeToken[size].outlineThickness};
+    }
+    :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"]) .base {
+      border-radius: var(--_button-shape, ${ButtonSizeToken[size].shapeRound});
+    }
+    :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base {
+      border-radius: ${ButtonSizeToken[size].selectedShapeRound};
+    }
+    :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"]) .base {
+      border-radius: ${ButtonSizeToken[size].shapeSquare};
+    }
+    :host(:not(.-connected)[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
+      border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare});
+    }
+    :host(:not(.-connected)[size="${unsafeCSS(size)}"].-pressed) .base {
+      border-radius: ${ButtonSizeToken[size].shapePressedMorph};
+    }
+    :host(.-connected[size="${unsafeCSS(size)}"][shape="rounded"]) .base {
+      border-start-start-radius: var(
+        --_button-rounded-start-shape,
+        var(--_button-shape, ${ButtonSizeToken[size].shapeRound})
+      );
+      border-end-start-radius: var(
+        --_button-rounded-start-shape,
+        var(--_button-shape, ${ButtonSizeToken[size].shapeRound})
+      );
+      border-start-end-radius: var(
+        --_button-rounded-end-shape,
+        var(--_button-shape, ${ButtonSizeToken[size].shapeRound})
+      );
+      border-end-end-radius: var(
+        --_button-rounded-end-shape,
+        var(--_button-shape, ${ButtonSizeToken[size].shapeRound})
+      );
+    }
+    :host(.-connected[size="${unsafeCSS(size)}"][shape="square"]) .base {
+      border-start-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare});
+      border-end-start-radius: var(--_button-square-start-shape, ${ButtonSizeToken[size].shapeSquare});
+      border-start-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare});
+      border-end-end-radius: var(--_button-square-end-shape, ${ButtonSizeToken[size].shapeSquare});
+    }
+    :host(.-connected[size="${unsafeCSS(size)}"][shape="square"][toggle][selected]:not(.-pressed)) .base {
+      border-radius: var(--_button-shape, ${ButtonSizeToken[size].selectedShapeSquare});
+    }
+    :host(.-connected[size="${unsafeCSS(size)}"].-pressed) .base {
+      border-start-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph});
+      border-end-start-radius: var(--_button-start-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph});
+      border-start-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph});
+      border-end-end-radius: var(--_button-end-shape-pressed-morph, ${ButtonSizeToken[size].shapePressedMorph});
+    }
+  `;
+}
+
+/**
+ * Size variant styles for `M3eButtonElement`.
+ * @internal
+ */
+export const ButtonSizeStyle: CSSResultGroup = [
+  buttonStyle("extra-small"),
+  buttonStyle("small"),
+  buttonStyle("medium"),
+  buttonStyle("large"),
+  buttonStyle("extra-large"),
+];

package/src/styles/ButtonSizeToken.ts

@@ -0,0 +1,180 @@
+import { CSSResult, unsafeCSS } from "lit";
+
+import { DesignToken } from "@m3e/core";
+
+import { ButtonSize } from "../ButtonSize";
+
+/** @private */
+type _ButtonSizeToken = {
+  containerHeight: CSSResult;
+  outlineThickness: CSSResult;
+  labelTextFontSize: CSSResult;
+  labelTextFontWeight: CSSResult;
+  labelTextLineHeight: CSSResult;
+  labelTextTracking: CSSResult;
+  iconSize: CSSResult;
+  shapeRound: CSSResult;
+  shapeSquare: CSSResult;
+  selectedShapeRound: CSSResult;
+  selectedShapeSquare: CSSResult;
+  shapePressedMorph: CSSResult;
+  leadingSpace: CSSResult;
+  trailingSpace: CSSResult;
+  iconLabelSpace: CSSResult;
+};
+
+/**
+ * Component design tokens that control the `M3eButtonElement` for all size variants.
+ * @internal
+ */
+export const ButtonSizeToken: Record<ButtonSize, _ButtonSizeToken> = {
+  "extra-small": {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-button-extra-small-container-height, 2rem) + ${DesignToken.density.calc(0)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-button-extra-small-outline-thickness, 1px)"),
+    labelTextFontSize: unsafeCSS(
+      `var(--m3e-button-extra-small-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize})`
+    ),
+    labelTextFontWeight: unsafeCSS(
+      `var(--m3e-button-extra-small-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight})`
+    ),
+    labelTextLineHeight: unsafeCSS(
+      `var(--m3e-button-extra-small-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight})`
+    ),
+    labelTextTracking: unsafeCSS(
+      `var(--m3e-button-extra-small-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking})`
+    ),
+    iconSize: unsafeCSS("var(--m3e-button-extra-small-icon-size, 1.25rem)"),
+    shapeRound: unsafeCSS(`var(--m3e-button-extra-small-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-extra-small-shape-square, ${DesignToken.shape.corner.medium})`),
+    selectedShapeRound: unsafeCSS(
+      `var(--m3e-button-extra-small-selected-shape-round, ${DesignToken.shape.corner.medium})`
+    ),
+    selectedShapeSquare: unsafeCSS(
+      `var(--m3e-button-extra-small-selected-shape-square, ${DesignToken.shape.corner.full})`
+    ),
+    shapePressedMorph: unsafeCSS(
+      `var(--m3e-button-extra-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`
+    ),
+    leadingSpace: unsafeCSS("var(--m3e-button-extra-small-leading-space, 0.75rem)"),
+    trailingSpace: unsafeCSS("var(--m3e-button-extra-small-trailing-space, 0.75rem)"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-extra-small-icon-label-space, 0.5rem)"),
+  },
+  small: {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-button-small-container-height, 2.5rem) + ${DesignToken.density.calc(-1)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, 1px)"),
+    labelTextFontSize: unsafeCSS(
+      `var(--m3e-button-small-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize})`
+    ),
+    labelTextFontWeight: unsafeCSS(
+      `var(--m3e-button-small-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight})`
+    ),
+    labelTextLineHeight: unsafeCSS(
+      `var(--m3e-button-small-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight})`
+    ),
+    labelTextTracking: unsafeCSS(
+      `var(--m3e-button-small-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking})`
+    ),
+    iconSize: unsafeCSS("var(--m3e-button-small-icon-size, 1.25rem)"),
+    shapeRound: unsafeCSS(`var(--m3e-button-small-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-small-shape-square, ${DesignToken.shape.corner.medium})`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-small-selected-shape-round, ${DesignToken.shape.corner.medium})`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-small-selected-shape-square, ${DesignToken.shape.corner.full})`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-small-shape-pressed-morph, ${DesignToken.shape.corner.small})`),
+    leadingSpace: unsafeCSS("var(--m3e-button-small-leading-space, 1rem)"),
+    trailingSpace: unsafeCSS("var(--m3e-button-small-trailing-space, 1rem)"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-small-icon-label-space, 0.5rem)"),
+  },
+  medium: {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-button-medium-container-height, 3.5rem) + ${DesignToken.density.calc(-2)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, 1px)"),
+    labelTextFontSize: unsafeCSS(
+      `var(--m3e-button-medium-label-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`
+    ),
+    labelTextFontWeight: unsafeCSS(
+      `var(--m3e-button-medium-label-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`
+    ),
+    labelTextLineHeight: unsafeCSS(
+      `var(--m3e-button-medium-label-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`
+    ),
+    labelTextTracking: unsafeCSS(
+      `var(--m3e-button-medium-label-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`
+    ),
+    iconSize: unsafeCSS("var(--m3e-button-medium-icon-size, 1.5rem)"),
+    shapeRound: unsafeCSS(`var(--m3e-button-medium-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-medium-shape-square, ${DesignToken.shape.corner.large})`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-medium-selected-shape-round, ${DesignToken.shape.corner.large})`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-medium-selected-shape-square, ${DesignToken.shape.corner.full})`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-medium-shape-pressed-morph, ${DesignToken.shape.corner.medium})`),
+    leadingSpace: unsafeCSS("var(--m3e-button-medium-leading-space, 1.5rem)"),
+    trailingSpace: unsafeCSS("var(--m3e-button-medium-trailing-space, 1.5rem)"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-medium-icon-label-space, 0.5rem)"),
+  },
+  large: {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-button-large-container-height, 6rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-button-large-outline-thickness, 0.125rem)"),
+    labelTextFontSize: unsafeCSS(
+      `var(--m3e-button-large-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize})`
+    ),
+    labelTextFontWeight: unsafeCSS(
+      `var(--m3e-button-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight})`
+    ),
+    labelTextLineHeight: unsafeCSS(
+      `var(--m3e-button-large-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight})`
+    ),
+    labelTextTracking: unsafeCSS(
+      `var(--m3e-button-large-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking})`
+    ),
+    iconSize: unsafeCSS("var(--m3e-button-large-icon-size, 2rem)"),
+    shapeRound: unsafeCSS(`var(--m3e-button-large-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
+    selectedShapeRound: unsafeCSS(
+      `var(--m3e-button-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`
+    ),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-large-selected-shape-square, ${DesignToken.shape.corner.full})`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`),
+    leadingSpace: unsafeCSS("var(--m3e-button-large-leading-space, 3rem)"),
+    trailingSpace: unsafeCSS("var(--m3e-button-large-trailing-space, 3rem)"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-large-icon-label-space, 0.75rem)"),
+  },
+  "extra-large": {
+    containerHeight: unsafeCSS(
+      `calc(var(--m3e-button-extra-large-container-height, 8.5rem) + ${DesignToken.density.calc(-3)})`
+    ),
+    outlineThickness: unsafeCSS("var(--m3e-button-extra-large-outline-thickness, 0.1875rem)"),
+    labelTextFontSize: unsafeCSS(
+      `var(--m3e-button-extra-large-label-text-font-size, ${DesignToken.typescale.standard.headline.large.fontSize})`
+    ),
+    labelTextFontWeight: unsafeCSS(
+      `var(--m3e-button-extra-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.large.fontWeight})`
+    ),
+    labelTextLineHeight: unsafeCSS(
+      `var(--m3e-button-extra-large-label-text-line-height, ${DesignToken.typescale.standard.headline.large.lineHeight})`
+    ),
+    labelTextTracking: unsafeCSS(
+      `var(--m3e-button-extra-large-label-text-tracking, ${DesignToken.typescale.standard.headline.large.tracking})`
+    ),
+    iconSize: unsafeCSS("var(--m3e-button-extra-large-icon-size, 2.5rem)"),
+    shapeRound: unsafeCSS(`var(--m3e-button-extra-large-shape-round, ${DesignToken.shape.corner.full})`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-extra-large-shape-square, ${DesignToken.shape.corner.extraLarge})`),
+    selectedShapeRound: unsafeCSS(
+      `var(--m3e-button-extra-large-selected-shape-round, ${DesignToken.shape.corner.extraLarge})`
+    ),
+    selectedShapeSquare: unsafeCSS(
+      `var(--m3e-button-extra-large-selected-shape-square, ${DesignToken.shape.corner.full})`
+    ),
+    shapePressedMorph: unsafeCSS(
+      `var(--m3e-button-extra-large-shape-pressed-morph, ${DesignToken.shape.corner.large})`
+    ),
+    leadingSpace: unsafeCSS("var(--m3e-button-extra-large-leading-space, 4rem)"),
+    trailingSpace: unsafeCSS("var(--m3e-button-extra-large-trailing-space, 4rem)"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-extra-large-icon-label-space, 1rem)"),
+  },
+} as const;

package/src/styles/ButtonStyle.ts

@@ -0,0 +1,191 @@
+import { css, CSSResultGroup, unsafeCSS } from "lit";
+
+import { DesignToken } from "@m3e/core";
+
+/**
+ * Baseline styles for `M3eButtonElement`.
+ * @internal
+ */
+export const ButtonStyle: 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;
+    height: 3rem;
+    left: 0;
+    right: 0;
+  }
+  :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;
+  }
+  .label {
+    justify-self: center;
+    flex: 1 1 auto;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
+  }
+  .icon {
+    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};
+  }
+  :host(:not(:disabled):not([disabled-interactive])) {
+    cursor: pointer;
+  }
+  :host([disabled-interactive]) {
+    cursor: not-allowed;
+  }
+  ::slotted([slot="icon"]),
+  ::slotted([slot="selected-icon"]),
+  ::slotted([slot="trailing-icon"]) {
+    font-size: inherit !important;
+    flex: none;
+  }
+  ::slotted(svg[slot="icon"]),
+  ::slotted(svg[slot="selected-icon"]),
+  ::slotted(svg[slot="trailing-icon"]) {
+    width: 1em;
+    height: 1em;
+  }
+  :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"],
+  :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] {
+    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)) {
+    transition: ${unsafeCSS(`padding-inline ${DesignToken.motion.spring.fastEffects}`)};
+  }
+  :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,
+    .label,
+    .icon {
+      transition: none;
+    }
+    :host(.-pressed) .base,
+    :host(.-resting) .base {
+      transition: ${unsafeCSS(`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-button-extra-small-outline-thickness, 1px));
+      outline-width: var(--m3e-button-extra-small-outline-thickness, 1px);
+    }
+    :host([size="small"]) .base {
+      outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px));
+      outline-width: var(--m3e-button-small-outline-thickness, 1px);
+    }
+    :host([size="medium"]) .base {
+      outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px));
+      outline-width: var(--m3e-button-medium-outline-thickness, 1px);
+    }
+    :host([size="large"]) .base {
+      outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem));
+      outline-width: var(--m3e-button-large-outline-thickness, 0.125rem);
+    }
+    :host([size="extra-large"]) .base {
+      outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 0.1875rem));
+      outline-width: var(--m3e-button-extra-large-outline-thickness, 0.1875rem);
+    }
+  }
+  @media (prefers-reduced-motion) {
+    :host(.-pressed) .base,
+    :host(.-resting) .base,
+    .base,
+    .label,
+    .icon {
+      transition: none;
+    }
+  }
+`;

package/src/styles/ButtonVariantStyle.ts

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