@m3e/web 2.0.0 → 2.0.1

package/dist/button.js

@@ -440,89 +440,89 @@ function e(e, r) {
  */
 const 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)")
+    containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${DesignToken.density.calc(0)})`),
+    outlineThickness: unsafeCSS("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
+    labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}))`),
+    iconSize: unsafeCSS("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),
+    shapeRound: unsafeCSS(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${DesignToken.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${DesignToken.shape.corner.medium}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken.shape.corner.medium}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken.shape.corner.small}))`),
+    leadingSpace: unsafeCSS("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),
+    trailingSpace: unsafeCSS("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-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)")
+    containerHeight: unsafeCSS(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${DesignToken.density.calc(-1)})`),
+    outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
+    labelTextFontSize: unsafeCSS(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}))`),
+    iconSize: unsafeCSS("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),
+    shapeRound: unsafeCSS(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${DesignToken.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${DesignToken.shape.corner.medium}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken.shape.corner.medium}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken.shape.corner.small}))`),
+    leadingSpace: unsafeCSS("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),
+    trailingSpace: unsafeCSS("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-small-icon-label-space, var(--m3e-button-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)")
+    containerHeight: unsafeCSS(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${DesignToken.density.calc(-2)})`),
+    outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),
+    labelTextFontSize: unsafeCSS(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken.typescale.standard.body.large.tracking}))`),
+    iconSize: unsafeCSS("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),
+    shapeRound: unsafeCSS(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${DesignToken.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${DesignToken.shape.corner.large}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken.shape.corner.large}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken.shape.corner.medium}))`),
+    leadingSpace: unsafeCSS("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),
+    trailingSpace: unsafeCSS("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-medium-icon-label-space, var(--m3e-button-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)")
+    containerHeight: unsafeCSS(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${DesignToken.density.calc(-3)})`),
+    outlineThickness: unsafeCSS("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),
+    labelTextFontSize: unsafeCSS(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking}))`),
+    iconSize: unsafeCSS("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),
+    shapeRound: unsafeCSS(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${DesignToken.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${DesignToken.shape.corner.extraLarge}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken.shape.corner.extraLarge}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken.shape.corner.large}))`),
+    leadingSpace: unsafeCSS("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),
+    trailingSpace: unsafeCSS("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-large-icon-label-space, var(--m3e-button-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)")
+    containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${DesignToken.density.calc(-3)})`),
+    outlineThickness: unsafeCSS("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),
+    labelTextFontSize: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${DesignToken.typescale.standard.headline.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken.typescale.standard.headline.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken.typescale.standard.headline.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken.typescale.standard.headline.large.tracking}))`),
+    iconSize: unsafeCSS("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),
+    shapeRound: unsafeCSS(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${DesignToken.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${DesignToken.shape.corner.extraLarge}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken.shape.corner.extraLarge}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken.shape.corner.large}))`),
+    leadingSpace: unsafeCSS("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),
+    trailingSpace: unsafeCSS("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),
+    iconLabelSpace: unsafeCSS("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")
   }
 };
 
@@ -541,7 +541,7 @@ const ButtonSizeStyle = [buttonStyle("extra-small"), buttonStyle("small"), butto
  * @internal
  */
 const ButtonStyle = css`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .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; } }`;
+          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, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .label, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eButtonElement`.
@@ -551,556 +551,556 @@ const ButtonVariantToken = {
   /** Design tokens that control the `elevated` variant. */
   elevated: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-elevated-button-label-text-color, ${DesignToken.color.primary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken.color.primary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-elevated-button-icon-color, ${DesignToken.color.primary})`),
+    iconColor: unsafeCSS(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${DesignToken.color.primary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-elevated-button-container-color, ${DesignToken.color.surfaceContainerLow})`),
+    containerColor: unsafeCSS(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${DesignToken.color.surfaceContainerLow}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-elevated-button-container-elevation, ${DesignToken.elevation.level1})`),
+    containerElevation: unsafeCSS(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken.elevation.level1}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-unselected-label-text-color, ${DesignToken.color.primary})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken.color.primary}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-unselected-icon-color, ${DesignToken.color.primary})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken.color.primary}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-unselected-container-color, ${DesignToken.color.surfaceContainerLow})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken.color.surfaceContainerLow}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-selected-label-text-color, ${DesignToken.color.onPrimary})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken.color.onPrimary}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken.color.onPrimary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-selected-container-color, ${DesignToken.color.primary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-elevated-button-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-button-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      containerElevation: unsafeCSS(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-button-hover-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken.color.primary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-button-hover-container-elevation, ${DesignToken.elevation.level2})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken.elevation.level2}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken.color.primary}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-label-text-color, ${DesignToken.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken.color.primary}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken.color.primary}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-label-text-color, ${DesignToken.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** Selected ripple color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-button-focus-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken.color.primary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-button-focus-container-elevation, ${DesignToken.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken.elevation.level1}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-label-text-color, ${DesignToken.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken.color.primary}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken.color.primary}))`),
       /** Unselected ripple color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken.color.primary}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-label-text-color, ${DesignToken.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** Selected ripple color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken.color.primary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-button-pressed-container-elevation, ${DesignToken.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken.elevation.level1}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-label-text-color, ${DesignToken.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken.color.primary}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken.color.primary}))`),
       /** Unselected ripple color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-label-text-color, ${DesignToken.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** Selected ripple color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
     }
   },
   /** Design tokens that control the `outlined` variant. */
   outlined: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-outlined-button-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+    labelTextColor: unsafeCSS(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-outlined-button-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+    iconColor: unsafeCSS(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
     /** Default outline color. */
-    outlineColor: unsafeCSS(`var(--m3e-outlined-button-outline-color, ${DesignToken.color.outlineVariant})`),
+    outlineColor: unsafeCSS(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${DesignToken.color.outlineVariant}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken.color.inverseOnSurface}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken.color.inverseOnSurface}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-outlined-button-selected-container-color, ${DesignToken.color.inverseSurface})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken.color.inverseSurface}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-outlined-button-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`),
       /** Outline color when disabled. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-button-disabled-outline-color, ${DesignToken.color.outlineVariant})`)
+      outlineColor: unsafeCSS(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${DesignToken.color.outlineVariant}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Outline color on hover. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-button-hover-outline-color, ${DesignToken.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${DesignToken.color.outlineVariant}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken.color.inverseOnSurface}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken.color.inverseOnSurface}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken.color.inverseOnSurface}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Outline color on focus. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-button-focus-outline-color, ${DesignToken.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${DesignToken.color.outlineVariant}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken.color.inverseOnSurface}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken.color.inverseOnSurface}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken.color.inverseOnSurface}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Outline color on pressed. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-button-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${DesignToken.color.outlineVariant}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-icon-color, ${DesignToken.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken.color.inverseOnSurface}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-label-text-color, ${DesignToken.color.inverseOnSurface})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken.color.inverseOnSurface}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-state-layer-color, ${DesignToken.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken.color.inverseOnSurface}))`)
     }
   },
   /** Design tokens that control the `filled` variant. */
   filled: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-filled-button-label-text-color, ${DesignToken.color.onPrimary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken.color.onPrimary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-filled-button-icon-color, ${DesignToken.color.onPrimary})`),
+    iconColor: unsafeCSS(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${DesignToken.color.onPrimary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-filled-button-container-color, ${DesignToken.color.primary})`),
+    containerColor: unsafeCSS(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${DesignToken.color.primary}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-filled-button-container-elevation, ${DesignToken.elevation.level0})`),
+    containerElevation: unsafeCSS(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken.elevation.level0}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-filled-button-unselected-container-color, ${DesignToken.color.surfaceContainer})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken.color.surfaceContainer}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-selected-label-text-color, ${DesignToken.color.onPrimary})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken.color.onPrimary}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-filled-button-selected-icon-color, ${DesignToken.color.onPrimary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken.color.onPrimary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-filled-button-selected-container-color, ${DesignToken.color.primary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-filled-button-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-filled-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-filled-button-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      containerElevation: unsafeCSS(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-filled-button-hover-icon-color, ${DesignToken.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-label-text-color, ${DesignToken.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken.color.onPrimary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-filled-button-hover-container-elevation, ${DesignToken.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken.elevation.level1}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-icon-color, ${DesignToken.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-label-text-color, ${DesignToken.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-filled-button-focus-icon-color, ${DesignToken.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-label-text-color, ${DesignToken.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken.color.onPrimary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-filled-button-focus-container-elevation, ${DesignToken.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-icon-color, ${DesignToken.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-label-text-color, ${DesignToken.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-filled-button-pressed-icon-color, ${DesignToken.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-label-text-color, ${DesignToken.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken.color.onPrimary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-filled-button-pressed-container-elevation, ${DesignToken.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSurfaceVariant}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-label-text-color, ${DesignToken.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken.color.onPrimary}))`)
     }
   },
   /** Design tokens that control the `tonal` variant. */
   tonal: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-tonal-button-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+    labelTextColor: unsafeCSS(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-tonal-button-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-tonal-button-container-color, ${DesignToken.color.secondaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${DesignToken.color.secondaryContainer}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-tonal-button-container-elevation, ${DesignToken.elevation.level0})`),
+    containerElevation: unsafeCSS(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken.elevation.level0}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-unselected-container-color, ${DesignToken.color.secondaryContainer})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken.color.secondaryContainer}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-selected-label-text-color, ${DesignToken.color.onSecondary})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken.color.onSecondary}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-selected-icon-color, ${DesignToken.color.onSecondary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken.color.onSecondary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-selected-container-color, ${DesignToken.color.secondary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken.color.secondary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-tonal-button-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-tonal-button-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      containerElevation: unsafeCSS(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-button-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-tonal-button-hover-container-elevation, ${DesignToken.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken.elevation.level1}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-icon-color, ${DesignToken.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken.color.onSecondary}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-label-text-color, ${DesignToken.color.onSecondary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken.color.onSecondary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken.color.onSecondary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-button-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-tonal-button-focus-container-elevation, ${DesignToken.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-icon-color, ${DesignToken.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken.color.onSecondary}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-label-text-color, ${DesignToken.color.onSecondary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken.color.onSecondary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken.color.onSecondary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-tonal-button-pressed-container-elevation, ${DesignToken.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-icon-color, ${DesignToken.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken.color.onSecondary}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-label-text-color, ${DesignToken.color.onSecondary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken.color.onSecondary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-state-layer-color, ${DesignToken.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken.color.onSecondary}))`)
     }
   },
   /** Design tokens that control the `text` variant. */
   text: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-text-button-label-text-color, ${DesignToken.color.primary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken.color.primary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-text-button-icon-color, ${DesignToken.color.primary})`),
+    iconColor: unsafeCSS(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${DesignToken.color.primary}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-unselected-label-text-color, ${DesignToken.color.primary})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken.color.primary}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-text-button-unselected-icon-color, ${DesignToken.color.primary})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken.color.primary}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-selected-label-text-color, ${DesignToken.color.primary})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken.color.primary}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-text-button-selected-icon-color, ${DesignToken.color.primary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-text-button-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-text-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-text-button-disabled-icon-color, ${DesignToken.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-text-button-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-text-button-disabled-label-text-color, ${DesignToken.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-text-button-disabled-label-text-opacity, 38%)`)
+      labelTextOpacity: unsafeCSS(`var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-text-button-hover-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-text-button-hover-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken.color.primary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-icon-color, ${DesignToken.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken.color.primary}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-label-text-color, ${DesignToken.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken.color.primary}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-state-layer-color, ${DesignToken.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken.color.primary}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-selected-icon-color, ${DesignToken.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken.color.primary}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-selected-label-text-color, ${DesignToken.color.primary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken.color.primary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-selected-state-layer-color, ${DesignToken.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken.color.primary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-text-button-focus-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-text-button-focus-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken.color.primary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-icon-color, ${DesignToken.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken.color.primary}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-label-text-color, ${DesignToken.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken.color.primary}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-state-layer-color, ${DesignToken.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken.color.primary}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-selected-icon-color, ${DesignToken.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken.color.primary}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-selected-label-text-color, ${DesignToken.color.primary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken.color.primary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-selected-state-layer-color, ${DesignToken.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken.color.primary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-text-button-pressed-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken.color.primary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-icon-color, ${DesignToken.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken.color.primary}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-label-text-color, ${DesignToken.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken.color.primary}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken.color.primary}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-icon-color, ${DesignToken.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken.color.primary}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-label-text-color, ${DesignToken.color.primary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken.color.primary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-state-layer-color, ${DesignToken.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken.color.primary}))`)
     }
   }
 };
@@ -1113,7 +1113,7 @@ function buttonVariantStyle(variant) {
  * Appearance variant styles for `M3eButtonElement`.
  * @internal
  */
-const ButtonVariantStyle = [buttonVariantStyle("text"), buttonVariantStyle("elevated"), buttonVariantStyle("outlined"), buttonVariantStyle("filled"), buttonVariantStyle("tonal"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
+const ButtonVariantStyle = [buttonVariantStyle("text"), buttonVariantStyle("elevated"), buttonVariantStyle("outlined"), buttonVariantStyle("filled"), buttonVariantStyle("tonal"), css`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];
 
 var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonElement_handleClick, _M3eButtonElement_handleSelectedIconSlotChange, _M3eButtonElement_updateButtonShape, _M3eButtonElement_handlePressedChange;
 /**
@@ -1167,6 +1167,21 @@ var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonEleme
  * @fires change - Dispatched when a toggle button's selected state changes.
  * @fires click - Emitted when the element is clicked.
  *
+ * @cssprop --m3e-button-container-height - Height of the button container, for all size variants.
+ * @cssprop --m3e-button-outline-thickness - Thickness of the button outline, for all size variants.
+ * @cssprop --m3e-button-label-text-font-size - Font size for the label text, for all size variants.
+ * @cssprop --m3e-button-label-text-font-weight - Font weight for the label text, for all size variants.
+ * @cssprop --m3e-button-label-text-line-height - Line height for the label text, for all size variants.
+ * @cssprop --m3e-button-label-text-tracking - Letter tracking for the label text, for all size variants.
+ * @cssprop --m3e-button-icon-size - Size of the icon, for all size variants.
+ * @cssprop --m3e-button-shape-round - Corner radius for round shape, for all size variants.
+ * @cssprop --m3e-button-shape-square - Corner radius for square shape, for all size variants.
+ * @cssprop --m3e-button-selected-shape-round - Corner radius when selected (round), for all size variants.
+ * @cssprop --m3e-button-selected-shape-square - Corner radius when selected (square), for all size variants.
+ * @cssprop --m3e-button-shape-pressed-morph - Corner radius when pressed, for all size variants.
+ * @cssprop --m3e-button-leading-space - Space before icon or label, for all size variants.
+ * @cssprop --m3e-button-trailing-space - Space after icon or label, for all size variants.
+ * @cssprop --m3e-button-icon-label-space - Space between icon and label, for all size variants.
  * @cssprop --m3e-button-extra-small-container-height - Height of the button container, for the extra-small size variant.
  * @cssprop --m3e-button-extra-small-outline-thickness - Thickness of the button outline, for the extra-small size variant.
  * @cssprop --m3e-button-extra-small-label-text-font-size - Font size for the label text, for the extra-small size variant.
@@ -1242,6 +1257,61 @@ var _M3eButtonElement_instances, _M3eButtonElement_clickHandler, _M3eButtonEleme
  * @cssprop --m3e-button-extra-large-leading-space - Space before icon or label, for the extra-large size variant.
  * @cssprop --m3e-button-extra-large-trailing-space - Space after icon or label, for the extra-large size variant.
  * @cssprop --m3e-button-extra-large-icon-label-space - Space between icon and label, for the extra-large size variant.
+ * @cssprop --m3e-button-outline-color - Outline color, for all variants.
+ * @cssprop --m3e-button-disabled-outline-color - Disabled outline color, for all variants.
+ * @cssprop --m3e-button-hover-outline-color - Hover outline color, for all variants.
+ * @cssprop --m3e-button-focus-outline-color - Focus outline color, for all variants.
+ * @cssprop --m3e-button-pressed-outline-color - Pressed outline color, for all variants.
+ * @cssprop --m3e-button-container-color - Container background color, for all variants.
+ * @cssprop --m3e-button-container-elevation - Elevation, for all variants.
+ * @cssprop --m3e-button-unselected-container-color - Unselected container color, for all variants.
+ * @cssprop --m3e-button-selected-container-color - Selected container color, for all variants.
+ * @cssprop --m3e-button-disabled-container-elevation - Disabled elevation, for all variants.
+ * @cssprop --m3e-button-hover-container-elevation - Hover elevation, for all variants.
+ * @cssprop --m3e-button-focus-container-elevation - Focus elevation, for all variants.
+ * @cssprop --m3e-button-pressed-container-elevation - Pressed elevation, for all variants.
+ * @cssprop --m3e-button-label-text-color - Label color, for all variants.
+ * @cssprop --m3e-button-icon-color - Icon color, for all variants.
+ * @cssprop --m3e-button-unselected-label-text-color - Unselected label color, for all variants.
+ * @cssprop --m3e-button-unselected-icon-color - Unselected icon color, for all variants.
+ * @cssprop --m3e-button-selected-label-text-color - Selected label color, for all variants.
+ * @cssprop --m3e-button-selected-icon-color - Selected icon color, for all variants.
+ * @cssprop --m3e-button-disabled-container-color - Disabled container color, for all variants.
+ * @cssprop --m3e-button-disabled-container-opacity - Disabled container opacity, for all variants.
+ * @cssprop --m3e-button-disabled-icon-color - Disabled icon color, for all variants.
+ * @cssprop --m3e-button-disabled-icon-opacity - Disabled icon opacity, for all variants.
+ * @cssprop --m3e-button-disabled-label-text-color - Disabled label color, for all variants.
+ * @cssprop --m3e-button-disabled-label-text-opacity - Disabled label opacity, for all variants.
+ * @cssprop --m3e-button-hover-icon-color - Hover icon color, for all variants.
+ * @cssprop --m3e-button-hover-label-text-color - Hover label color, for all variants.
+ * @cssprop --m3e-button-hover-state-layer-color - Hover state layer color, for all variants.
+ * @cssprop --m3e-button-hover-state-layer-opacity - Hover state layer opacity, for all variants.
+ * @cssprop --m3e-button-hover-unselected-icon-color - Hover unselected icon color, for all variants.
+ * @cssprop --m3e-button-hover-unselected-label-text-color - Hover unselected label color, for all variants.
+ * @cssprop --m3e-button-hover-unselected-state-layer-color - Hover unselected state layer color, for all variants.
+ * @cssprop --m3e-button-hover-selected-icon-color - Hover selected icon color, for all variants.
+ * @cssprop --m3e-button-hover-selected-label-text-color - Hover selected label color, for all variants.
+ * @cssprop --m3e-button-hover-selected-state-layer-color - Hover selected state layer color, for all variants.
+ * @cssprop --m3e-button-focus-icon-color - Focus icon color, for all variants.
+ * @cssprop --m3e-button-focus-label-text-color - Focus label color, for all variants.
+ * @cssprop --m3e-button-focus-state-layer-color - Focus state layer color, for all variants.
+ * @cssprop --m3e-button-focus-state-layer-opacity - Focus state layer opacity, for all variants.
+ * @cssprop --m3e-button-focus-unselected-icon-color - Focus unselected icon color, for all variants.
+ * @cssprop --m3e-button-focus-unselected-label-text-color - Focus unselected label color, for all variants.
+ * @cssprop --m3e-button-focus-unselected-state-layer-color - Focus unselected state layer color, for all variants.
+ * @cssprop --m3e-button-focus-selected-icon-color - Focus selected icon color, for all variants.
+ * @cssprop --m3e-button-focus-selected-label-text-color - Focus selected label color, for all variants.
+ * @cssprop --m3e-button-focus-selected-state-layer-color - Focus selected state layer color, for all variants.
+ * @cssprop --m3e-button-pressed-icon-color - Pressed icon color, for all variants.
+ * @cssprop --m3e-button-pressed-label-text-color - Pressed label color, for all variants.
+ * @cssprop --m3e-button-pressed-state-layer-color - Pressed state layer color, for all variants.
+ * @cssprop --m3e-button-pressed-state-layer-opacity - Pressed state layer opacity, for all variants.
+ * @cssprop --m3e-button-pressed-unselected-icon-color - Pressed unselected icon color, for all variants.
+ * @cssprop --m3e-button-pressed-unselected-label-text-color - Pressed unselected label color, for all variants.
+ * @cssprop --m3e-button-pressed-unselected-state-layer-color - Pressed unselected state layer color, for all variants.
+ * @cssprop --m3e-button-pressed-selected-icon-color - Pressed selected icon color, for all variants.
+ * @cssprop --m3e-button-pressed-selected-label-text-color - Pressed selected label color, for all variants.
+ * @cssprop --m3e-button-pressed-selected-state-layer-color - Pressed selected state layer color, for all variants.
  * @cssprop --m3e-elevated-button-label-text-color - Label color, for the elevated variant.
  * @cssprop --m3e-elevated-button-icon-color - Icon color, for the elevated variant.
  * @cssprop --m3e-elevated-button-container-color - Container background color, for the elevated variant.