@m3e/web 2.0.0 → 2.0.2

package/dist/all.js

@@ -1722,6 +1722,11 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
     }
   }
   /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add("-no-animate");
+  }
+  /** @inheritdoc */
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("modal")) {
@@ -1743,6 +1748,7 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
       __classPrivateFieldSet(this, _M3eBottomSheetElement_cachedHeaderHeight, header.clientHeight, "f");
       __classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(header);
     }
+    this.classList.remove("-no-animate");
   }
   /** @inheritdoc */
   updated(_changedProperties) {
@@ -2150,15 +2156,15 @@ _M3eBottomSheetElement_restoreInert = function _M3eBottomSheetElement_restoreIne
   }
 })();
 /** The styles of the element. */
-M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken$1.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standardDecelerate},
-        border-radius ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([modal]):not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken$1.elevation.level1}); } :host([modal]:not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken$1.elevation.level1}); } :host(.-full) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken$1.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken$1.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(.-full)), :host([modal]:not(.-full):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open].-full), :host([modal].-full:popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal])::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
+M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken$1.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standardDecelerate},
+        border-radius ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([modal]):not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken$1.elevation.level1}); } :host([modal]:not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken$1.elevation.level1}); } :host(.-full) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken$1.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken$1.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(.-full)), :host([modal]:not(.-full):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open].-full), :host([modal].-full:popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal]:not(.-no-animate))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
+        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(.-no-animate))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard}, 
         overlay ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle]):not(.-has-header)) .header { display: none; } :host(:not([handle]):not(.-has-header)) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}); } .header { cursor: grab; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
+        visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle]):not(.-has-header)) .header { display: none; } :host(:not([handle]):not(.-has-header)) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}); } .header { cursor: grab; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(.-no-animate)) .handle-row { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
         padding ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
         height ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
-        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 0.25rem); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken$1.color.onSurfaceVariant}); } .focus-ring { top: calc(0px - var(--m3e-bottom-sheet-handle-focus-ring-offset, 0.125rem)); left: calc(0px - var(--m3e-bottom-sheet-handle-focus-ring-offset, 0.125rem)); right: calc(0px - var(--m3e-bottom-sheet-handle-focus-ring-offset, 0.125rem)); bottom: calc(0px - var(--m3e-bottom-sheet-handle-focus-ring-offset, 0.125rem)); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 0.25rem) / 2 ) ) ); } @media (prefers-reduced-motion) { :host, :host([modal])::backdrop, :host([modal]:popover-open)::backdrop, .handle { transition: none; } } @media (forced-colors: active) { :host([modal])::backdrop, :host([modal]:popover-open)::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
+        visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken$1.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(.-no-animate)), :host([modal]:not(.-no-animate))::backdrop, :host([modal]:popover-open:not(.-no-animate))::backdrop, :host(:not(.-no-animate)) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(.-no-animate))::backdrop, :host([modal]:popover-open:not(.-no-animate))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
 __decorate([n$1({
   type: Boolean,
   reflect: true
@@ -2262,89 +2268,89 @@ M3eBottomSheetTriggerElement = __decorate([t$3("m3e-bottom-sheet-trigger")], M3e
  */
 const ButtonSizeToken = {
   "extra-small": {
-    containerHeight: unsafeCSS(`calc(var(--m3e-button-extra-small-container-height, 2rem) + ${DesignToken$1.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$1.typescale.standard.label.large.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-button-extra-small-label-text-tracking, ${DesignToken$1.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$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-button-extra-small-shape-square, ${DesignToken$1.shape.corner.medium})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-round, ${DesignToken$1.shape.corner.medium})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-small-shape-pressed-morph, ${DesignToken$1.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$1.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$1.typescale.standard.label.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.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$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.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$1.density.calc(-1)})`),
-    outlineThickness: unsafeCSS("var(--m3e-button-small-outline-thickness, 1px)"),
-    labelTextFontSize: unsafeCSS(`var(--m3e-button-small-label-text-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-button-small-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-button-small-label-text-tracking, ${DesignToken$1.typescale.standard.label.large.tracking})`),
-    iconSize: unsafeCSS("var(--m3e-button-small-icon-size, 1.25rem)"),
-    shapeRound: unsafeCSS(`var(--m3e-button-small-shape-round, ${DesignToken$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-button-small-shape-square, ${DesignToken$1.shape.corner.medium})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-button-small-selected-shape-round, ${DesignToken$1.shape.corner.medium})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-button-small-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-button-small-shape-pressed-morph, ${DesignToken$1.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$1.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$1.typescale.standard.label.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.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$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.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$1.density.calc(-2)})`),
-    outlineThickness: unsafeCSS("var(--m3e-button-medium-outline-thickness, 1px)"),
-    labelTextFontSize: unsafeCSS(`var(--m3e-button-medium-label-text-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-button-medium-label-text-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-button-medium-label-text-tracking, ${DesignToken$1.typescale.standard.body.large.tracking})`),
-    iconSize: unsafeCSS("var(--m3e-button-medium-icon-size, 1.5rem)"),
-    shapeRound: unsafeCSS(`var(--m3e-button-medium-shape-round, ${DesignToken$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-button-medium-shape-square, ${DesignToken$1.shape.corner.large})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-button-medium-selected-shape-round, ${DesignToken$1.shape.corner.large})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-button-medium-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-button-medium-shape-pressed-morph, ${DesignToken$1.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$1.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$1.typescale.standard.body.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.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$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.large}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.large}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.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$1.density.calc(-3)})`),
-    outlineThickness: unsafeCSS("var(--m3e-button-large-outline-thickness, 0.125rem)"),
-    labelTextFontSize: unsafeCSS(`var(--m3e-button-large-label-text-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-button-large-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-button-large-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-button-large-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking})`),
-    iconSize: unsafeCSS("var(--m3e-button-large-icon-size, 2rem)"),
-    shapeRound: unsafeCSS(`var(--m3e-button-large-shape-round, ${DesignToken$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-button-large-shape-square, ${DesignToken$1.shape.corner.extraLarge})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-button-large-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-button-large-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-button-large-shape-pressed-morph, ${DesignToken$1.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$1.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$1.typescale.standard.headline.small.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.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$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.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$1.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$1.typescale.standard.headline.large.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-button-extra-large-label-text-tracking, ${DesignToken$1.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$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-button-extra-large-shape-square, ${DesignToken$1.shape.corner.extraLarge})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-large-shape-pressed-morph, ${DesignToken$1.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$1.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$1.typescale.standard.headline.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${DesignToken$1.typescale.standard.headline.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${DesignToken$1.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$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${DesignToken$1.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))")
   }
 };
 
@@ -2363,7 +2369,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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
-          border-radius ${DesignToken$1.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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.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$1.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$1.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$1.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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.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$1.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$1.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`.
@@ -2373,556 +2379,556 @@ const ButtonVariantToken = {
   /** Design tokens that control the `elevated` variant. */
   elevated: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-elevated-button-label-text-color, ${DesignToken$1.color.primary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.primary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-elevated-button-icon-color, ${DesignToken$1.color.primary})`),
+    iconColor: unsafeCSS(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.primary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-elevated-button-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
+    containerColor: unsafeCSS(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-elevated-button-container-elevation, ${DesignToken$1.elevation.level1})`),
+    containerElevation: unsafeCSS(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken$1.elevation.level1}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-unselected-label-text-color, ${DesignToken$1.color.primary})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-unselected-icon-color, ${DesignToken$1.color.primary})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.primary}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-unselected-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-selected-container-color, ${DesignToken$1.color.primary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken$1.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-elevated-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.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$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.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$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.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$1.elevation.level0})`)
+      containerElevation: unsafeCSS(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-button-hover-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-button-hover-container-elevation, ${DesignToken$1.elevation.level2})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken$1.elevation.level2}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-label-text-color, ${DesignToken$1.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected ripple color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-button-focus-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.primary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-button-focus-container-elevation, ${DesignToken$1.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken$1.elevation.level1}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-label-text-color, ${DesignToken$1.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected ripple color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected ripple color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-button-pressed-container-elevation, ${DesignToken$1.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken$1.elevation.level1}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-label-text-color, ${DesignToken$1.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected ripple color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected ripple color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     }
   },
   /** Design tokens that control the `outlined` variant. */
   outlined: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-outlined-button-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    labelTextColor: unsafeCSS(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-outlined-button-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    iconColor: unsafeCSS(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Default outline color. */
-    outlineColor: unsafeCSS(`var(--m3e-outlined-button-outline-color, ${DesignToken$1.color.outlineVariant})`),
+    outlineColor: unsafeCSS(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${DesignToken$1.color.outlineVariant}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-outlined-button-selected-container-color, ${DesignToken$1.color.inverseSurface})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken$1.color.inverseSurface}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-outlined-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.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$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.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$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.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$1.color.outlineVariant})`)
+      outlineColor: unsafeCSS(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${DesignToken$1.color.outlineVariant}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Outline color on hover. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-button-hover-outline-color, ${DesignToken$1.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${DesignToken$1.color.outlineVariant}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Outline color on focus. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-button-focus-outline-color, ${DesignToken$1.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${DesignToken$1.color.outlineVariant}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      labelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Outline color on pressed. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-button-pressed-outline-color, ${DesignToken$1.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${DesignToken$1.color.outlineVariant}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
     }
   },
   /** Design tokens that control the `filled` variant. */
   filled: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-filled-button-label-text-color, ${DesignToken$1.color.onPrimary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.onPrimary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-filled-button-icon-color, ${DesignToken$1.color.onPrimary})`),
+    iconColor: unsafeCSS(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.onPrimary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-filled-button-container-color, ${DesignToken$1.color.primary})`),
+    containerColor: unsafeCSS(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${DesignToken$1.color.primary}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-filled-button-container-elevation, ${DesignToken$1.elevation.level0})`),
+    containerElevation: unsafeCSS(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken$1.elevation.level0}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-filled-button-unselected-container-color, ${DesignToken$1.color.surfaceContainer})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken$1.color.surfaceContainer}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-filled-button-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-filled-button-selected-container-color, ${DesignToken$1.color.primary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken$1.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-filled-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.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$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.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$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.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$1.elevation.level0})`)
+      containerElevation: unsafeCSS(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-filled-button-hover-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-filled-button-hover-container-elevation, ${DesignToken$1.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken$1.elevation.level1}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-filled-button-focus-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-filled-button-focus-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-filled-button-pressed-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-filled-button-pressed-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     }
   },
   /** Design tokens that control the `tonal` variant. */
   tonal: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-tonal-button-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+    labelTextColor: unsafeCSS(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-tonal-button-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-tonal-button-container-color, ${DesignToken$1.color.secondaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${DesignToken$1.color.secondaryContainer}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-tonal-button-container-elevation, ${DesignToken$1.elevation.level0})`),
+    containerElevation: unsafeCSS(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${DesignToken$1.elevation.level0}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-unselected-container-color, ${DesignToken$1.color.secondaryContainer})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${DesignToken$1.color.secondaryContainer}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-selected-label-text-color, ${DesignToken$1.color.onSecondary})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.onSecondary}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-selected-container-color, ${DesignToken$1.color.secondary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${DesignToken$1.color.secondary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-tonal-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.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$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.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$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.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$1.elevation.level0})`)
+      containerElevation: unsafeCSS(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-button-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-tonal-button-hover-container-elevation, ${DesignToken$1.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${DesignToken$1.elevation.level1}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-label-text-color, ${DesignToken$1.color.onSecondary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-button-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-tonal-button-focus-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-label-text-color, ${DesignToken$1.color.onSecondary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-tonal-button-pressed-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-label-text-color, ${DesignToken$1.color.onSecondary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
     }
   },
   /** Design tokens that control the `text` variant. */
   text: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-text-button-label-text-color, ${DesignToken$1.color.primary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${DesignToken$1.color.primary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-text-button-icon-color, ${DesignToken$1.color.primary})`),
+    iconColor: unsafeCSS(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${DesignToken$1.color.primary}))`),
     /** Unselected label color. */
-    unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-unselected-label-text-color, ${DesignToken$1.color.primary})`),
+    unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-text-button-unselected-icon-color, ${DesignToken$1.color.primary})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${DesignToken$1.color.primary}))`),
     /** Selected label color. */
-    selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-selected-label-text-color, ${DesignToken$1.color.primary})`),
+    selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${DesignToken$1.color.primary}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-text-button-selected-icon-color, ${DesignToken$1.color.primary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${DesignToken$1.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-text-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${DesignToken$1.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$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${DesignToken$1.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$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${DesignToken$1.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$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-text-button-hover-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected label color on hover. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-label-text-color, ${DesignToken$1.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-selected-icon-color, ${DesignToken$1.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Selected label color on hover. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-selected-label-text-color, ${DesignToken$1.color.primary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-selected-state-layer-color, ${DesignToken$1.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-text-button-focus-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-text-button-focus-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${DesignToken$1.color.primary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected label color on focus. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-label-text-color, ${DesignToken$1.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-selected-icon-color, ${DesignToken$1.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Selected label color on focus. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-selected-label-text-color, ${DesignToken$1.color.primary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-selected-state-layer-color, ${DesignToken$1.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-text-button-pressed-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected label color on pressed. */
-      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-label-text-color, ${DesignToken$1.color.primary})`),
+      unselectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-icon-color, ${DesignToken$1.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Selected label color on pressed. */
-      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-label-text-color, ${DesignToken$1.color.primary})`),
+      selectedLabelTextColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${DesignToken$1.color.primary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-state-layer-color, ${DesignToken$1.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
     }
   }
 };
@@ -2935,7 +2941,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;
 /**
@@ -2989,6 +2995,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.
@@ -3064,6 +3085,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.
@@ -3706,106 +3782,106 @@ const CardToken = {
  */
 const CardVariantToken = {
   filled: {
-    textColor: unsafeCSS(`var(--m3e-filled-card-text-color, ${DesignToken$1.color.onSurface})`),
-    containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, ${DesignToken$1.color.surfaceContainerHighest})`),
-    containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, ${DesignToken$1.elevation.level0})`),
+    textColor: unsafeCSS(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
+    containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surfaceContainerHighest}))`),
+    containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level0}))`),
     disabled: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, ${DesignToken$1.color.onSurface})`),
-      textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, 38%)`),
-      imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, 38%)`),
-      containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, ${DesignToken$1.color.surfaceVariant})`),
-      containerElevation: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
-      containerElevationColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface})`),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)`),
-      containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, 38%)`)
+      textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
+      textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
+      imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
+      containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken$1.color.surfaceVariant}))`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
+      containerElevationColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
+      containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
+      containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
     },
     hover: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-filled-card-hover-container-elevation, ${DesignToken$1.elevation.level1})`)
+      textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level1}))`)
     },
     focus: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-filled-card-focus-container-elevation, ${DesignToken$1.elevation.level0})`)
+      textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     pressed: {
-      textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-filled-card-pressed-container-elevation, ${DesignToken$1.elevation.level0})`)
+      textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`)
     }
   },
   elevated: {
-    textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, ${DesignToken$1.color.onSurface})`),
-    containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
-    containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, ${DesignToken$1.elevation.level1})`),
+    textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
+    containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
+    containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level1}))`),
     disabled: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, ${DesignToken$1.color.onSurface})`),
-      textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, 38%)`),
-      imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, 38%)`),
-      containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, ${DesignToken$1.color.surface})`),
-      containerElevation: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation, ${DesignToken$1.elevation.level1})`),
-      containerElevationColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface})`),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)`),
-      containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, 38%)`)
+      textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
+      textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
+      imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
+      containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken$1.color.surface}))`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level1}))`),
+      containerElevationColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
+      containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
+      containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
     },
     hover: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-elevated-card-hover-container-elevation, ${DesignToken$1.elevation.level2})`)
+      textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level2}))`)
     },
     focus: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-elevated-card-focus-container-elevation, ${DesignToken$1.elevation.level1})`)
+      textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level1}))`)
     },
     pressed: {
-      textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-elevated-card-pressed-container-elevation, ${DesignToken$1.elevation.level1})`)
+      textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level1}))`)
     }
   },
   outlined: {
-    textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, ${DesignToken$1.color.onSurface})`),
-    containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, ${DesignToken$1.elevation.level0})`),
-    outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, ${DesignToken$1.color.outlineVariant})`),
-    outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, 1px)"),
+    textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken$1.color.onSurface}))`),
+    containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken$1.elevation.level0}))`),
+    outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken$1.color.outlineVariant}))`),
+    outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),
     disabled: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, ${DesignToken$1.color.onSurface})`),
-      textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, 38%)`),
-      imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, 38%)`),
-      containerElevation: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
-      containerElevationColor: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface})`),
-      containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, ${DesignToken$1.color.outline})`),
-      outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, 12%)`)
+      textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken$1.color.onSurface}))`),
+      textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
+      imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
+      containerElevation: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
+      containerElevationColor: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken$1.color.onSurface}))`),
+      containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken$1.color.outline}))`),
+      outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`)
     },
     hover: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-outlined-card-hover-container-elevation, ${DesignToken$1.elevation.level1})`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, ${DesignToken$1.color.outlineVariant})`)
+      textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken$1.elevation.level1}))`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken$1.color.outlineVariant}))`)
     },
     focus: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-outlined-card-focus-container-elevation, ${DesignToken$1.elevation.level0})`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, ${DesignToken$1.color.onSurface})`)
+      textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken$1.elevation.level0}))`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken$1.color.onSurface}))`)
     },
     pressed: {
-      textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface})`),
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
-      containerElevation: unsafeCSS(`var(--m3e-outlined-card-pressed-container-elevation, ${DesignToken$1.elevation.level0})`),
-      outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, ${DesignToken$1.color.outlineVariant})`)
+      textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken$1.color.onSurface}))`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
+      containerElevation: unsafeCSS(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken$1.elevation.level0}))`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken$1.color.outlineVariant}))`)
     }
   }
 };
@@ -4235,9 +4311,13 @@ _M3eCheckboxElement_handleClick = function _M3eCheckboxElement_handleClick(e) {
   } else {
     this.checked = !this.checked;
   }
+  // Prevent default avoids double-click in FireFox.
+  if (this.closest("label")) {
+    e.preventDefault();
+  }
 };
 /** The styles of the element. */
-M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 0.125rem); border-style: solid; } :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken$1.color.primary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken$1.color.onPrimary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken$1.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken$1.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken$1.color.error}); } :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken$1.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken$1.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken$1.color.onError}); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base, :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
+M3eCheckboxElement.styles = css`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${DesignToken$1.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${DesignToken$1.color.primary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken$1.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken$1.color.onPrimary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${DesignToken$1.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken$1.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${DesignToken$1.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${DesignToken$1.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${DesignToken$1.color.error}); } :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${DesignToken$1.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${DesignToken$1.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${DesignToken$1.color.onError}); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${DesignToken$1.color.error}); } @media (forced-colors: active) { :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base, :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`;
 __decorate([e$4(".focus-ring")], M3eCheckboxElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eCheckboxElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eCheckboxElement.prototype, "_ripple", void 0);
@@ -6673,10 +6753,10 @@ class PressedController extends MonitorControllerBase {
     document.removeEventListener("pointerup", __classPrivateFieldGet(this, _PressedController_pointerUpHandler, "f"), {
       capture: __classPrivateFieldGet(this, _PressedController_capture, "f")
     });
-    document.addEventListener("touchend", __classPrivateFieldGet(this, _PressedController_touchEndHandler, "f"), {
+    document.removeEventListener("touchend", __classPrivateFieldGet(this, _PressedController_touchEndHandler, "f"), {
       capture: __classPrivateFieldGet(this, _PressedController_capture, "f")
     });
-    document.addEventListener("touchcancel", __classPrivateFieldGet(this, _PressedController_touchEndHandler, "f"), {
+    document.removeEventListener("touchcancel", __classPrivateFieldGet(this, _PressedController_touchEndHandler, "f"), {
       capture: __classPrivateFieldGet(this, _PressedController_capture, "f")
     });
     super.hostDisconnected();
@@ -6735,43 +6815,47 @@ _PressedController_capture = new WeakMap(), _PressedController_callback = new We
   if (e.pointerType === "mouse" && e.button > 1) return;
   const x = e.x;
   const y = e.y;
-  for (const target of __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").keys()) {
-    const remainingTime = __classPrivateFieldGet(this, _PressedController_minPressedDuration, "f") - (performance.now() - __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").get(target));
-    if (remainingTime > 0) {
-      setTimeout(() => {
+  for (const target of e.composedPath()) {
+    if (target instanceof HTMLElement && __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").has(target)) {
+      const remainingTime = __classPrivateFieldGet(this, _PressedController_minPressedDuration, "f") - (performance.now() - __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").get(target));
+      if (remainingTime > 0) {
+        setTimeout(() => {
+          __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
+          __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
+            x,
+            y
+          }, target);
+        }, remainingTime);
+      } else {
         __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
         __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
           x,
           y
         }, target);
-      }, remainingTime);
-    } else {
-      __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
-      __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
-        x,
-        y
-      }, target);
+      }
     }
   }
 }, _PressedController_handleTouchEnd = function _PressedController_handleTouchEnd(e) {
-  const x = e.touches[0]?.clientX ?? 0;
-  const y = e.touches[0]?.clientY ?? 0;
-  for (const target of __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").keys()) {
-    const remainingTime = __classPrivateFieldGet(this, _PressedController_minPressedDuration, "f") - (performance.now() - __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").get(target));
-    if (remainingTime > 0) {
-      setTimeout(() => {
+  const x = e.changedTouches[0]?.clientX ?? 0;
+  const y = e.changedTouches[0]?.clientY ?? 0;
+  for (const target of e.composedPath()) {
+    if (target instanceof HTMLElement && __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").has(target)) {
+      const remainingTime = __classPrivateFieldGet(this, _PressedController_minPressedDuration, "f") - (performance.now() - __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").get(target));
+      if (remainingTime > 0) {
+        setTimeout(() => {
+          __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
+          __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
+            x,
+            y
+          }, target);
+        }, remainingTime);
+      } else {
         __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
         __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
           x,
           y
         }, target);
-      }, remainingTime);
-    } else {
-      __classPrivateFieldGet(this, _PressedController_pressedTargets, "f").delete(target);
-      __classPrivateFieldGet(this, _PressedController_callback, "f").call(this, false, {
-        x,
-        y
-      }, target);
+      }
     }
   }
 }, _PressedController_handleKeyDown = function _PressedController_handleKeyDown(e) {
@@ -9453,11 +9537,15 @@ const FocusRingToken = {
   /** The duration of the focus ring animation. */
   duration: unsafeCSS(`var(--m3e-focus-ring-duration, ${DesignToken.motion.duration.long2})`),
   /** The thickness of the focus ring. */
-  thickness: unsafeCSS(`var(--m3e-focus-ring-thickness, 0.1875rem)`),
+  thickness: unsafeCSS("var(--m3e-focus-ring-thickness, 3px)"),
+  /** Offset of an outward focus ring. */
+  outwardOffset: unsafeCSS("var(--m3e-focus-ring-outward-offset, 2px)"),
+  /** Offset of an inward focus ring. */
+  inwardOffset: unsafeCSS("var(--m3e-focus-ring-inward-offset, 0px)"),
   /** The visibility of the focus ring. */
-  visibility: unsafeCSS(`var(--m3e-focus-ring-visibility, visible)`),
+  visibility: unsafeCSS("var(--m3e-focus-ring-visibility, visible)"),
   /** The factor by which the focus ring grows. */
-  growthFactor: unsafeCSS(`var(--m3e-focus-ring-growth-factor, 2)`)
+  growthFactor: unsafeCSS("var(--m3e-focus-ring-growth-factor, 2)")
 };
 
 var _M3eFocusRingElement_instances, _M3eFocusRingElement_focusController, _M3eFocusRingElement_handleFocusChange;
@@ -9495,6 +9583,8 @@ var _M3eFocusRingElement_instances, _M3eFocusRingElement_focusController, _M3eFo
  * @cssprop --m3e-focus-ring-growth-factor - The factor by which the focus ring grows.
  * @cssprop --m3e-focus-ring-thickness - The thickness of the focus ring.
  * @cssprop --m3e-focus-ring-visibility - The visibility of the focus ring.
+ * @cssprop --m3e-focus-ring-outward-offset - Offset of an outward focus ring.
+ * @cssprop --m3e-focus-ring-inward-offset - Offset of an inward focus ring.
  */
 let M3eFocusRingElement = class M3eFocusRingElement extends HtmlFor(Role(LitElement, "none")) {
   constructor() {
@@ -9571,7 +9661,7 @@ _M3eFocusRingElement_handleFocusChange = function _M3eFocusRingElement_handleFoc
   }
 };
 /** The styles of the element. */
-M3eFocusRingElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: calc(${FocusRingToken.thickness} / ${FocusRingToken.growthFactor}); } :host([inward]) .outline { outline-offset: calc(0px - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc(0px - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor})); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
+M3eFocusRingElement.styles = css`:host { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; outline: none; } .outline { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 1; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; visibility: ${FocusRingToken.visibility}; } .outline.visible { outline-style: solid; } :host(:not([inward])) .outline { outline-offset: ${FocusRingToken.outwardOffset}; } :host([inward]) .outline { outline-offset: calc(${FocusRingToken.inwardOffset} - ${FocusRingToken.thickness}); } :host(:not([inward])) .outline.visible { animation: grow-shrink ${FocusRingToken.duration}; } :host([inward]) .outline.visible { animation: shrink-grow ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @keyframes shrink-grow { 50% { outline-offset: calc( ${FocusRingToken.inwardOffset} - calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}) ); outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (prefers-reduced-motion) { :host(:not([inward])) .outline.visible, :host([inward]) .outline.visible { animation: none; } } @media (forced-colors: active) { .outline { outline-color: Highlight; } }`;
 __decorate([e$4(".outline")], M3eFocusRingElement.prototype, "_outline", void 0);
 __decorate([n$1({
   type: Boolean,
@@ -9633,7 +9723,7 @@ let M3ePseudoCheckboxElement = class M3ePseudoCheckboxElement extends CheckedInd
   }
 };
 /** The styles of the element. */
-M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 0.125rem); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); }`;
+M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); }`;
 M3ePseudoCheckboxElement = __decorate([t$3("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
 
 /**
@@ -9962,7 +10052,7 @@ let M3eScrollContainerElement = class M3eScrollContainerElement extends LitEleme
 };
 _M3eScrollContainerElement_scrollHandler = new WeakMap();
 /** The styles of the element. */
-M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline: var(--m3e-focus-ring-color, ${DesignToken.color.secondary}); outline-width: var(--m3e-focus-ring-thickness, 0.25rem); outline-offset: calc(var(--m3e-focus-ring-thickness, 0.25rem) / 2); } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible).-above) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible).-below) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink var(--m3e-focus-ring-duration, ${DesignToken.motion.duration.long2}); } @keyframes grow-shrink { 50% { outline-width: calc(var(--m3e-focus-ring-thickness, 0.25rem) * var(--m3e-focus-ring-factor, 2)); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible).-above) { border-top-color: GrayText; } :host(:not(:focus-visible).-below) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
+M3eScrollContainerElement.styles = css`:host { display: block; overflow-y: auto; position: relative; box-sizing: border-box; scrollbar-color: ${DesignToken.scrollbar.color}; border-top: var(--m3e-divider-thickness, 1px) solid transparent; border-bottom: var(--m3e-divider-thickness, 1px) solid transparent; outline-color: ${FocusRingToken.color}; outline-width: ${FocusRingToken.thickness}; outline-offset: ${FocusRingToken.outwardOffset}; } :host([thin]) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:not([thin])) { scrollbar-width: ${DesignToken.scrollbar.width}; } :host(:not(:focus-visible).-above) { border-top-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:not(:focus-visible).-below) { border-bottom-color: var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host(:focus-visible) { outline-style: solid; animation: grow-shrink ${FocusRingToken.duration}; } @keyframes grow-shrink { 50% { outline-width: calc(${FocusRingToken.thickness} * ${FocusRingToken.growthFactor}); } } @media (forced-colors: active) { :host { border-top: var(--m3e-divider-thickness, 1px) solid Canvas; border-bottom: var(--m3e-divider-thickness, 1px) solid Canvas; } :host(:not(:focus-visible).-above) { border-top-color: GrayText; } :host(:not(:focus-visible).-below) { border-bottom-color: GrayText; } } @media (prefers-reduced-motion) { :host(:focus-visible) { animation: none; } }`;
 __decorate([n$1()], M3eScrollContainerElement.prototype, "dividers", void 0);
 __decorate([n$1({
   type: Boolean,
@@ -11722,7 +11812,7 @@ M3eExpansionPanelElement = M3eExpansionPanelElement_1 = __decorate([t$3("m3e-exp
  * Baseline styles for `M3eFabElement`.
  * @internal
  */
-const FabStyle = 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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } :host(:not([extended])) ::slotted([slot="label"]), .base.-with-menu ::slotted([slot="label"]), .base:not(.-with-menu) ::slotted([slot="close-icon"]), .base:not(.-with-menu) .close-icon, :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.-with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.-with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); } .base.-with-menu { transition: height ${DesignToken$1.motion.spring.fastSpatial}; } .base.-with-menu .wrapper { transition: padding ${DesignToken$1.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { 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; } :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); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
+const FabStyle = 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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } :host(:not([extended])) ::slotted([slot="label"]), .base.-with-menu ::slotted([slot="label"]), .base:not(.-with-menu) ::slotted([slot="close-icon"]), .base:not(.-with-menu) .close-icon, :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.-with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.-with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${DesignToken$1.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)}); } .base.-with-menu { transition: height ${DesignToken$1.motion.spring.fastSpatial}; } .base.-with-menu .wrapper { transition: padding ${DesignToken$1.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { 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; } :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); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the `M3eFabElement` for all size variants.
@@ -11731,51 +11821,51 @@ const FabStyle = css`:host { display: inline-block; outline: none; user-select:
 const FabSizeToken = {
   /** Design tokens that control the `small` `size` variant. */
   small: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-fab-small-container-height, 3.5rem) + ${DesignToken$1.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(`var(--m3e-fab-small-label-text-font-size, ${DesignToken$1.typescale.standard.title.medium.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, ${DesignToken$1.typescale.standard.title.medium.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, ${DesignToken$1.typescale.standard.title.medium.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, ${DesignToken$1.typescale.standard.title.medium.tracking})`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, 1.5rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-small-shape, ${DesignToken$1.shape.corner.large})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)})`),
-    iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, 0.5rem)"),
-    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, 1rem)"),
-    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, 1rem)")
+    containerHeight: unsafeCSS(`calc(var(--m3e-fab-small-container-height, var(--m3e-fab-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-3)})`),
+    labelTextFontSize: unsafeCSS(`var(--m3e-fab-small-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken$1.typescale.standard.title.medium.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.title.medium.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.title.medium.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.title.medium.tracking}))`),
+    iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-3)})`),
+    extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),
+    shape: unsafeCSS(`var(--m3e-fab-small-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.large}))`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
+    iconLabelSpace: unsafeCSS("var(--m3e-fab-small-icon-label-space, var(--m3e-fab-icon-label-space, 0.5rem))"),
+    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem))"),
+    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem))")
   },
   /** Design tokens that control the `medium` `size` variant. */
   medium: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-fab-medium-container-height, 5rem) + ${DesignToken$1.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(`var(--m3e-fab-medium-label-text-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, ${DesignToken$1.typescale.standard.title.large.tracking})`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, 1.75rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-medium-shape, ${DesignToken$1.shape.corner.largeIncreased})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, 1.625rem) + ${DesignToken$1.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, 1.625rem) + ${DesignToken$1.density.calc(-3)})`),
-    iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, 0.75rem)"),
-    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, 1.625rem)"),
-    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, 1.625rem)")
+    containerHeight: unsafeCSS(`calc(var(--m3e-fab-medium-container-height, var(--m3e-fab-container-height, 5rem)) + ${DesignToken$1.density.calc(-3)})`),
+    labelTextFontSize: unsafeCSS(`var(--m3e-fab-medium-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken$1.typescale.standard.title.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}))`),
+    iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
+    extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),
+    shape: unsafeCSS(`var(--m3e-fab-medium-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.largeIncreased}))`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + ${DesignToken$1.density.calc(-3)})`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + ${DesignToken$1.density.calc(-3)})`),
+    iconLabelSpace: unsafeCSS("var(--m3e-fab-medium-icon-label-space, var(--m3e-fab-icon-label-space, 0.75rem))"),
+    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem))"),
+    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem))")
   },
   /** Design tokens that control the `large` `size` variant. */
   large: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-fab-large-container-height, 6rem) + ${DesignToken$1.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(`var(--m3e-fab-large-label-text-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking})`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, 2.25rem) + ${DesignToken$1.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, 2.25rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-large-shape, ${DesignToken$1.shape.corner.extraLarge})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, 1.75rem) + ${DesignToken$1.density.calc(-3)})`),
-    iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, 1rem)"),
-    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, 1.75rem)"),
-    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, 1.75rem)")
+    containerHeight: unsafeCSS(`calc(var(--m3e-fab-large-container-height, var(--m3e-fab-container-height, 6rem)) + ${DesignToken$1.density.calc(-3)})`),
+    labelTextFontSize: unsafeCSS(`var(--m3e-fab-large-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken$1.typescale.standard.headline.small.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken$1.typescale.standard.headline.small.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken$1.typescale.standard.headline.small.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken$1.typescale.standard.headline.small.tracking}))`),
+    iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem)) + ${DesignToken$1.density.calc(-3)})`),
+    extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),
+    shape: unsafeCSS(`var(--m3e-fab-large-shape, var(--m3e-fab-shape, ${DesignToken$1.shape.corner.extraLarge}))`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + ${DesignToken$1.density.calc(-3)})`),
+    iconLabelSpace: unsafeCSS("var(--m3e-fab-large-icon-label-space, var(--m3e-fab-icon-label-space, 1rem))"),
+    extendedLeadingSpace: unsafeCSS("var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem))"),
+    extendedTrailingSpace: unsafeCSS("var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem))")
   }
 };
 
@@ -11797,542 +11887,542 @@ const FabVariantToken = {
   /** Design tokens that control the `primary` variant. */
   primary: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-primary-fab-label-text-color, ${DesignToken$1.color.onPrimary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-primary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onPrimary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-primary-fab-icon-color, ${DesignToken$1.color.onPrimary})`),
+    iconColor: unsafeCSS(`var(--m3e-primary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onPrimary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-primary-fab-container-color, ${DesignToken$1.color.primary})`),
+    containerColor: unsafeCSS(`var(--m3e-primary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.primary}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-primary-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-primary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-primary-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-primary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-primary-fab-hover-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-hover-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-primary-fab-focus-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-focus-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-primary-fab-pressed-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-pressed-label-text-color, ${DesignToken$1.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `secondary` variant. */
   secondary: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-label-text-color, ${DesignToken$1.color.onSecondary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onSecondary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-secondary-fab-icon-color, ${DesignToken$1.color.onSecondary})`),
+    iconColor: unsafeCSS(`var(--m3e-secondary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onSecondary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-secondary-fab-container-color, ${DesignToken$1.color.secondary})`),
+    containerColor: unsafeCSS(`var(--m3e-secondary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.secondary}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-secondary-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-secondary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-fab-hover-icon-color, ${DesignToken$1.color.onSecondary})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-hover-label-text-color, ${DesignToken$1.color.onSecondary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onSecondary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-color, ${DesignToken$1.color.onSecondary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onSecondary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-fab-focus-icon-color, ${DesignToken$1.color.onSecondary})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-focus-label-text-color, ${DesignToken$1.color.onSecondary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onSecondary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-color, ${DesignToken$1.color.onSecondary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onSecondary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-icon-color, ${DesignToken$1.color.onSecondary})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-label-text-color, ${DesignToken$1.color.onSecondary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onSecondary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-color, ${DesignToken$1.color.onSecondary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onSecondary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `tertiary` variant. */
   tertiary: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-label-text-color, ${DesignToken$1.color.onTertiary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onTertiary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-tertiary-fab-icon-color, ${DesignToken$1.color.onTertiary})`),
+    iconColor: unsafeCSS(`var(--m3e-tertiary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onTertiary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-tertiary-fab-container-color, ${DesignToken$1.color.tertiary})`),
+    containerColor: unsafeCSS(`var(--m3e-tertiary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.tertiary}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-icon-color, ${DesignToken$1.color.onTertiary})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onTertiary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-label-text-color, ${DesignToken$1.color.onTertiary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onTertiary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-color, ${DesignToken$1.color.onTertiary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onTertiary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-icon-color, ${DesignToken$1.color.onTertiary})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onTertiary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-label-text-color, ${DesignToken$1.color.onTertiary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onTertiary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-color, ${DesignToken$1.color.onTertiary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onTertiary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-icon-color, ${DesignToken$1.color.onTertiary})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onTertiary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-label-text-color, ${DesignToken$1.color.onTertiary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onTertiary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-color, ${DesignToken$1.color.onTertiary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onTertiary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `primary-container` variant. */
   "primary-container": {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-label-text-color, ${DesignToken$1.color.onPrimaryContainer})`),
+    labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-label-text-color, var(--m3e-primary-container-fab-label-text-color, ${DesignToken$1.color.onPrimaryContainer}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-primary-container-fab-icon-color, ${DesignToken$1.color.onPrimaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-primary-container-fab-icon-color, var(--m3e-primary-container-fab-icon-color, ${DesignToken$1.color.onPrimaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-primary-container-fab-container-color, ${DesignToken$1.color.primaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-primary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.primaryContainer}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-icon-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-label-text-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-icon-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-label-text-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-icon-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-label-text-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-color, ${DesignToken$1.color.onPrimaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onPrimaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `secondary-container` variant. */
   "secondary-container": {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+    labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-container-color, ${DesignToken$1.color.secondaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.secondaryContainer}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-label-text-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `tertiary-container` variant. */
   "tertiary-container": {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-label-text-color, ${DesignToken$1.color.onTertiaryContainer})`),
+    labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.onTertiaryContainer}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-icon-color, ${DesignToken$1.color.onTertiaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.onTertiaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-container-color, ${DesignToken$1.color.tertiaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.tertiaryContainer}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-icon-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-label-text-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-icon-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-label-text-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-icon-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-label-text-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, ${DesignToken$1.color.onTertiaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.onTertiaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `surface` variant. */
   surface: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-surface-fab-label-text-color, ${DesignToken$1.color.primary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-surface-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken$1.color.primary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-surface-fab-icon-color, ${DesignToken$1.color.primary})`),
+    iconColor: unsafeCSS(`var(--m3e-surface-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken$1.color.primary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-surface-fab-container-color, ${DesignToken$1.color.surfaceContainerHigh})`),
+    containerColor: unsafeCSS(`var(--m3e-surface-fab-container-color, var(--m3e-fab-container-color, ${DesignToken$1.color.surfaceContainerHigh}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-surface-fab-container-elevation, ${DesignToken$1.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-surface-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken$1.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken$1.elevation.level2}))`),
     /** Lowered container background color. */
-    loweredContainerColor: unsafeCSS(`var(--m3e-surface-fab-lowered-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
+    loweredContainerColor: unsafeCSS(`var(--m3e-surface-fab-lowered-container-color, var(--m3e-fab-lowered-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-surface-fab-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-surface-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))`),
       /** Label color when disabled. */
-      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken$1.color.onSurface}))`),
       /** Label opacity when disabled. */
-      labelTextOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-opacity, 38%)`),
+      labelTextOpacity: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-surface-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-surface-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-surface-fab-hover-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-surface-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-hover-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-surface-fab-hover-container-elevation, ${DesignToken$1.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-surface-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken$1.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken$1.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-surface-fab-focus-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-surface-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-focus-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken$1.color.primary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-surface-fab-focus-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-surface-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken$1.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-surface-fab-pressed-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-surface-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken$1.color.primary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-pressed-label-text-color, ${DesignToken$1.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-surface-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-surface-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken$1.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken$1.elevation.level2}))`)
     }
   }
 };
@@ -12405,6 +12495,16 @@ var _M3eFabElement_instances, _M3eFabElement_handleSlotChange;
  *
  * @fires click - Emitted when the element is clicked.
  *
+ * @cssprop --m3e-fab-container-height - Height of the FAB container for all size variants.
+ * @cssprop --m3e-fab-label-text-font-size - Font size for the FAB label text for all size variants.
+ * @cssprop --m3e-fab-label-text-font-weight - Font weight for the FAB label text for all size variants.
+ * @cssprop --m3e-fab-label-text-line-height - Line height for the FAB label text for all size variants.
+ * @cssprop --m3e-fab-label-text-tracking - Letter spacing (tracking) for the FAB label text for all size variants.
+ * @cssprop --m3e-fab-icon-size - Icon size for the FAB for all size variants.
+ * @cssprop --m3e-fab-shape - Border radius for the FAB for all size variants.
+ * @cssprop --m3e-fab-leading-space - Leading space for the FAB for all size variants.
+ * @cssprop --m3e-fab-trailing-space - Trailing space for the FAB for all size variants.
+ * @cssprop --m3e-fab-icon-label-space - Space between icon and label for the FAB for all size variants.
  * @cssprop --m3e-fab-small-container-height - Height of the small FAB container.
  * @cssprop --m3e-fab-small-label-text-font-size - Font size for the small FAB label text.
  * @cssprop --m3e-fab-small-label-text-font-weight - Font weight for the small FAB label text.
@@ -12435,6 +12535,37 @@ var _M3eFabElement_instances, _M3eFabElement_handleSlotChange;
  * @cssprop --m3e-fab-large-leading-space - Leading space for the large FAB.
  * @cssprop --m3e-fab-large-trailing-space - Trailing space for the large FAB.
  * @cssprop --m3e-fab-large-icon-label-space - Space between icon and label for the large FAB.
+ * @cssprop --m3e-fab-label-text-color - Default label text color for FAB (all variants).
+ * @cssprop --m3e-fab-icon-color - Default icon color for FAB (all variants).
+ * @cssprop --m3e-fab-container-color - Default container background color for FAB (all variants).
+ * @cssprop --m3e-fab-container-elevation - Resting elevation for FAB (all variants).
+ * @cssprop --m3e-fab-lowered-container-elevation - Lowered resting elevation for FAB (all variants).
+ * @cssprop --m3e-fab-disabled-container-color - Container background color when disabled (all variants).
+ * @cssprop --m3e-fab-disabled-container-opacity - Opacity of container when disabled (all variants).
+ * @cssprop --m3e-fab-disabled-icon-color - Icon color when disabled (all variants).
+ * @cssprop --m3e-fab-disabled-icon-opacity - Icon opacity when disabled (all variants).
+ * @cssprop --m3e-fab-disabled-label-text-color - Label text color when disabled (all variants).
+ * @cssprop --m3e-fab-disabled-label-text-opacity - Label text opacity when disabled (all variants).
+ * @cssprop --m3e-fab-disabled-container-elevation - Elevation when disabled (all variants).
+ * @cssprop --m3e-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (all variants).
+ * @cssprop --m3e-fab-hover-icon-color - Icon color on hover (all variants).
+ * @cssprop --m3e-fab-hover-label-text-color - Label text color on hover (all variants).
+ * @cssprop --m3e-fab-hover-state-layer-color - State layer color on hover (all variants).
+ * @cssprop --m3e-fab-hover-state-layer-opacity - State layer opacity on hover (all variants).
+ * @cssprop --m3e-fab-hover-container-elevation - Elevation on hover (all variants).
+ * @cssprop --m3e-fab-lowered-hover-container-elevation - Lowered elevation on hover (all variants).
+ * @cssprop --m3e-fab-focus-icon-color - Icon color on focus (all variants).
+ * @cssprop --m3e-fab-focus-label-text-color - Label text color on focus (all variants).
+ * @cssprop --m3e-fab-focus-state-layer-color - State layer color on focus (all variants).
+ * @cssprop --m3e-fab-focus-state-layer-opacity - State layer opacity on focus (all variants).
+ * @cssprop --m3e-fab-focus-container-elevation - Elevation on focus (all variants).
+ * @cssprop --m3e-fab-lowered-focus-container-elevation - Lowered elevation on focus (all variants).
+ * @cssprop --m3e-fab-pressed-icon-color - Icon color on pressed (all variants).
+ * @cssprop --m3e-fab-pressed-label-text-color - Label text color on pressed (all variants).
+ * @cssprop --m3e-fab-pressed-state-layer-color - State layer color on pressed (all variants).
+ * @cssprop --m3e-fab-pressed-state-layer-opacity - State layer opacity on pressed (all variants).
+ * @cssprop --m3e-fab-pressed-container-elevation - Elevation on pressed (all variants).
+ * @cssprop --m3e-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (all variants).
  * @cssprop --m3e-primary-fab-label-text-color - Default label text color for primary FAB.
  * @cssprop --m3e-primary-fab-icon-color - Default icon color for primary FAB.
  * @cssprop --m3e-primary-fab-container-color - Default container background color for primary FAB.
@@ -13189,7 +13320,7 @@ function findFormFieldControl(slot) {
  * Copyright (c) 2025 Google LLC
  * See LICENSE file in the project root for full license text.
  */
-var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_bindValueInterceptor, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
+var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_pressedController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_bindValueInterceptor, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
 /**
  * A container for form controls that applies Material Design styling and behavior.
  *
@@ -13320,6 +13451,11 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
       callback: () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this)
     }));
     /** @private */
+    _M3eFormFieldElement_pressedController.set(this, new PressedController$1(this, {
+      target: null,
+      callback: pressed => this.classList.toggle("-pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true))
+    }));
+    /** @private */
     _M3eFormFieldElement_focused.set(this, false);
     /** @private */
     this._pseudoLabel = "";
@@ -13356,9 +13492,6 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
     new HoverController$1(this, {
       callback: () => this.classList.toggle("-no-animate", false)
     });
-    new PressedController$1(this, {
-      callback: pressed => this.classList.toggle("-pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true))
-    });
   }
   /** A reference to the element used to anchor dropdown menus. */
   get menuAnchor() {
@@ -13404,6 +13537,7 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals$1(Li
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
     __classPrivateFieldGet(this, _M3eFormFieldElement_focusController, "f").observe(this._base);
+    __classPrivateFieldGet(this, _M3eFormFieldElement_pressedController, "f").observe(this._base);
     __classPrivateFieldGet(this, _M3eFormFieldElement_hintMutationController, "f").observe(this._hint);
     __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleHintChange).call(this);
     __classPrivateFieldGet(this, _M3eFormFieldElement_errorMutationController, "f").observe(this._error);
@@ -13437,6 +13571,7 @@ _M3eFormFieldElement_resizeController = new WeakMap();
 _M3eFormFieldElement_focusController = new WeakMap();
 _M3eFormFieldElement_hintMutationController = new WeakMap();
 _M3eFormFieldElement_errorMutationController = new WeakMap();
+_M3eFormFieldElement_pressedController = new WeakMap();
 _M3eFormFieldElement_focused = new WeakMap();
 _M3eFormFieldElement_hintText = new WeakMap();
 _M3eFormFieldElement_errorText = new WeakMap();
@@ -13576,7 +13711,7 @@ M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: c
         font-size ${DesignToken$1.motion.duration.short4}, 
         line-height ${DesignToken$1.motion.duration.short4}`)}; } :host(.-with-select) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken$1.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken$1.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken$1.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken$1.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(.-invalid)) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short4}, 
         margin-top ${DesignToken$1.motion.duration.short4}, 
-        margin-bottom ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-with-select) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.25rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken$1.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 0.0625rem); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken$1.motion.duration.short4}; } :host([variant="outlined"]:not(.-with-label)) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-pressed) .outline { --_form-field-outline-size: 0.125rem; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 0.0625rem; border-radius: var(--m3e-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-pressed) .base::before { border-width: 0.1875rem; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken$1.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken$1.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken$1.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken$1.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken$1.color.primary}); } :host(:not(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-invalid) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:not(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(.-disabled) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(.-disabled) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-disabled) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
+        margin-bottom ${DesignToken$1.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-with-select) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.5rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"].-required:not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken$1.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken$1.motion.duration.short4}; } :host([variant="outlined"]:not(.-with-label)) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([variant="outlined"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-pressed) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 1px; border-radius: var(--m3e-form-field-container-shape, ${DesignToken$1.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-pressed) .base::before { border-width: 3px; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken$1.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken$1.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken$1.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken$1.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken$1.typescale.standard.body.small.fontSize} ); } :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken$1.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken$1.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken$1.color.primary}); } :host(:not(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken$1.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-invalid) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(:not(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken$1.color.error}); } :host(.-disabled) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(.-disabled) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken$1.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-disabled) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
 __decorate([e$4(".base")], M3eFormFieldElement.prototype, "_base", void 0);
 __decorate([e$4(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
 __decorate([e$4(".error")], M3eFormFieldElement.prototype, "_error", void 0);
@@ -13911,88 +14046,88 @@ M3eIconElement = __decorate([t$3("m3e-icon")], M3eIconElement);
 const IconButtonSizeToken = {
   /** Design tokens that control the `extra-small` `size` variant. */
   "extra-small": {
-    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, 2rem) + ${DesignToken$1.density.calc(0)})`),
-    outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${DesignToken$1.density.calc(0)})`),
-    shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, ${DesignToken$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, ${DesignToken$1.shape.corner.medium})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, ${DesignToken$1.shape.corner.medium})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${DesignToken$1.shape.corner.small})`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${DesignToken$1.density.calc(0)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${DesignToken$1.density.calc(0)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${DesignToken$1.density.calc(0)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${DesignToken$1.density.calc(0)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${DesignToken$1.density.calc(0)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${DesignToken$1.density.calc(0)})`)
+    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${DesignToken$1.density.calc(0)})`),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem)) + ${DesignToken$1.density.calc(0)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken$1.density.calc(0)})`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken$1.density.calc(0)})`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + ${DesignToken$1.density.calc(0)})`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + ${DesignToken$1.density.calc(0)})`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + ${DesignToken$1.density.calc(0)})`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + ${DesignToken$1.density.calc(0)})`)
   },
   /** Design tokens that control the `small` `size` variant. */
   small: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${DesignToken$1.density.calc(-1)})`),
-    outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, 1px)"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-1)})`),
-    shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, ${DesignToken$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, ${DesignToken$1.shape.corner.medium})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, ${DesignToken$1.shape.corner.medium})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, ${DesignToken$1.shape.corner.small})`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${DesignToken$1.density.calc(-1)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${DesignToken$1.density.calc(-1)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${DesignToken$1.density.calc(-1)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${DesignToken$1.density.calc(-1)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${DesignToken$1.density.calc(-1)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${DesignToken$1.density.calc(-1)})`)
+    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${DesignToken$1.density.calc(-1)})`),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-1)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.medium}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.medium}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.small}))`),
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${DesignToken$1.density.calc(-1)})`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${DesignToken$1.density.calc(-1)})`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${DesignToken$1.density.calc(-1)})`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${DesignToken$1.density.calc(-1)})`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${DesignToken$1.density.calc(-1)})`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${DesignToken$1.density.calc(-1)})`)
   },
   /** Design tokens that control the `medium` `size` variant. */
   medium: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${DesignToken$1.density.calc(-2)})`),
-    outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, 1px)"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${DesignToken$1.density.calc(-2)})`),
-    shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, ${DesignToken$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, ${DesignToken$1.shape.corner.large})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, ${DesignToken$1.shape.corner.large})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, ${DesignToken$1.shape.corner.medium})`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${DesignToken$1.density.calc(-2)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${DesignToken$1.density.calc(-2)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${DesignToken$1.density.calc(-2)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${DesignToken$1.density.calc(-2)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${DesignToken$1.density.calc(-2)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${DesignToken$1.density.calc(-2)})`)
+    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${DesignToken$1.density.calc(-2)})`),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.large}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.large}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.medium}))`),
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${DesignToken$1.density.calc(-2)})`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${DesignToken$1.density.calc(-2)})`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${DesignToken$1.density.calc(-2)})`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-2)})`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${DesignToken$1.density.calc(-2)})`)
   },
   /** Design tokens that control the `large` `size` variant. */
   large: {
-    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${DesignToken$1.density.calc(-3)})`),
-    outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${DesignToken$1.density.calc(-3)})`),
-    shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, ${DesignToken$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, ${DesignToken$1.shape.corner.extraLarge})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, ${DesignToken$1.shape.corner.large})`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${DesignToken$1.density.calc(-3)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${DesignToken$1.density.calc(-3)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${DesignToken$1.density.calc(-3)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${DesignToken$1.density.calc(-3)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${DesignToken$1.density.calc(-3)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${DesignToken$1.density.calc(-3)})`)
+    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${DesignToken$1.density.calc(-3)})`),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${DesignToken$1.density.calc(-3)})`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`)
   },
   /** Design tokens that control the `extra-large` `size` variant. */
   "extra-large": {
-    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${DesignToken$1.density.calc(-3)})`),
-    outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),
-    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${DesignToken$1.density.calc(-3)})`),
-    shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, ${DesignToken$1.shape.corner.full})`),
-    shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, ${DesignToken$1.shape.corner.extraLarge})`),
-    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge})`),
-    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, ${DesignToken$1.shape.corner.full})`),
-    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${DesignToken$1.shape.corner.large})`),
-    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${DesignToken$1.density.calc(-3)})`),
-    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${DesignToken$1.density.calc(-3)})`),
-    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${DesignToken$1.density.calc(-3)})`),
-    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${DesignToken$1.density.calc(-3)})`),
-    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${DesignToken$1.density.calc(-3)})`),
-    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${DesignToken$1.density.calc(-3)})`)
+    containerHeight: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${DesignToken$1.density.calc(-3)})`),
+    outlineThickness: unsafeCSS("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),
+    iconSize: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem)) + ${DesignToken$1.density.calc(-3)})`),
+    shapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${DesignToken$1.shape.corner.full}))`),
+    shapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${DesignToken$1.shape.corner.extraLarge}))`),
+    selectedShapeRound: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${DesignToken$1.shape.corner.extraLarge}))`),
+    selectedShapeSquare: unsafeCSS(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${DesignToken$1.shape.corner.full}))`),
+    shapePressedMorph: unsafeCSS(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${DesignToken$1.shape.corner.large}))`),
+    narrowLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
+    narrowTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${DesignToken$1.density.calc(-3)})`),
+    defaultLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
+    defaultTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${DesignToken$1.density.calc(-3)})`),
+    wideLeadingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + ${DesignToken$1.density.calc(-3)})`),
+    wideTrailingSpace: unsafeCSS(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + ${DesignToken$1.density.calc(-3)})`)
   }
 };
 
@@ -14011,7 +14146,7 @@ const IconButtonSizeStyle = [iconButtonStyle("extra-small"), iconButtonStyle("sm
  * @internal
  */
 const IconButtonStyle = 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$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
-          border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${unsafeCSS(`transform var(--_icon-button-icon-transform-transition, ${DesignToken$1.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${DesignToken$1.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`;
+          border-radius ${DesignToken$1.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`padding-inline ${DesignToken$1.motion.spring.fastEffects}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${unsafeCSS(`transform var(--_icon-button-icon-transform-transition, ${DesignToken$1.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${DesignToken$1.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`;
 
 /**
  * Component design tokens that control the appearance variants of `M3eIconButtonElement`.
@@ -14021,396 +14156,396 @@ const IconButtonVariantToken = {
   /** Design tokens that control the `elevated` variant. */
   elevated: {
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-icon-color, ${DesignToken$1.color.primary})`),
+    iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.primary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
+    containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-container-elevation, ${DesignToken$1.elevation.level1})`),
+    containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-container-elevation, var(--m3e-icon-button-container-elevation, ${DesignToken$1.elevation.level1}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-icon-color, ${DesignToken$1.color.primary})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.primary}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-container-color, ${DesignToken$1.color.surfaceContainerLow})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken$1.color.surfaceContainerLow}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-container-color, ${DesignToken$1.color.primary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-elevated-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken$1.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`),
       /** Elevation when disabled. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${DesignToken$1.elevation.level0})`)
+      containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-disabled-container-elevation, var(--m3e-icon-button-disabled-container-elevation, ${DesignToken$1.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-hover-container-elevation, ${DesignToken$1.elevation.level2})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-hover-container-elevation, var(--m3e-icon-button-hover-container-elevation, ${DesignToken$1.elevation.level2}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected ripple color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.primary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-focus-container-elevation, ${DesignToken$1.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-focus-container-elevation, var(--m3e-icon-button-focus-container-elevation, ${DesignToken$1.elevation.level1}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected ripple color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected ripple color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-icon-color, ${DesignToken$1.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.primary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${DesignToken$1.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${DesignToken$1.elevation.level1})`),
+      containerElevation: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-container-elevation, var(--m3e-icon-button-pressed-container-elevation, ${DesignToken$1.elevation.level1}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Unselected ripple color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.primary}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected ripple color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     }
   },
   /** Design tokens that control the `outlined` variant. */
   outlined: {
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Default outline color. */
-    outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-outline-color, ${DesignToken$1.color.outlineVariant})`),
+    outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-outline-color, var(--m3e-icon-button-outline-color, ${DesignToken$1.color.outlineVariant}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-container-color, ${DesignToken$1.color.inverseSurface})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-outlined-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken$1.color.inverseSurface}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)`),
+      iconOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`),
       /** Outline color when disabled. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-outline-color, ${DesignToken$1.color.outlineVariant})`)
+      outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-disabled-outline-color, var(--m3e-icon-button-disabled-outline-color, ${DesignToken$1.color.outlineVariant}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Outline color on hover. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-outline-color, ${DesignToken$1.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-outline-color, var(--m3e-icon-button-hover-outline-color, ${DesignToken$1.color.outlineVariant}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Outline color on focus. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-outline-color, ${DesignToken$1.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-outline-color, var(--m3e-icon-button-focus-outline-color, ${DesignToken$1.color.outlineVariant}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Outline color on pressed. */
-      outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-outline-color, ${DesignToken$1.color.outlineVariant})`),
+      outlineColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-outline-color, var(--m3e-icon-button-pressed-outline-color, ${DesignToken$1.color.outlineVariant}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.inverseOnSurface})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.inverseOnSurface}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.inverseOnSurface}))`)
     }
   },
   /** Design tokens that control the `filled` variant. */
   filled: {
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-filled-icon-button-icon-color, ${DesignToken$1.color.onPrimary})`),
+    iconColor: unsafeCSS(`var(--m3e-filled-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.onPrimary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-filled-icon-button-container-color, ${DesignToken$1.color.primary})`),
+    containerColor: unsafeCSS(`var(--m3e-filled-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken$1.color.primary}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-container-color, ${DesignToken$1.color.surfaceContainer})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken$1.color.surfaceContainer}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-container-color, ${DesignToken$1.color.primary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-filled-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken$1.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)`)
+      iconOpacity: unsafeCSS(`var(--m3e-filled-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-icon-color, ${DesignToken$1.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onPrimary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onPrimary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onPrimary}))`)
     }
   },
   /** Design tokens that control the `tonal` variant. */
   tonal: {
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-container-color, ${DesignToken$1.color.secondaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-container-color, var(--m3e-icon-button-container-color, ${DesignToken$1.color.secondaryContainer}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
     /** Unselected container background color. */
-    unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-container-color, ${DesignToken$1.color.secondaryContainer})`),
+    unselectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${DesignToken$1.color.secondaryContainer}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
     /** Selected container background color. */
-    selectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-container-color, ${DesignToken$1.color.secondary})`),
+    selectedContainerColor: unsafeCSS(`var(--m3e-tonal-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${DesignToken$1.color.secondary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${DesignToken$1.color.onSurface}))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)`)
+      iconOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSecondaryContainer}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onSecondary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.onSecondary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onSecondary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.onSecondary}))`)
     }
   },
   /** Design tokens that control the `standard` variant. */
   standard: {
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-standard-icon-button-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    iconColor: unsafeCSS(`var(--m3e-standard-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Unselected icon color. */
-    unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+    unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
     /** Selected icon color. */
-    selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-selected-icon-color, ${DesignToken$1.color.primary})`),
+    selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${DesignToken$1.color.primary}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-color, transparent)`),
+      containerColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, transparent))`),
       /** Opacity of container when disabled. */
-      containerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-opacity, 10%)`),
+      containerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))`),
       /** Icon color when disabled. */
-      iconColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${DesignToken$1.color.onSurface}))`),
       /** Icon opacity when disabled. */
-      iconOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)`)
+      iconOpacity: unsafeCSS(`var(--m3e-standard-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity}))`),
       /** Unselected icon color on hover. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on hover. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on hover. */
-      selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${DesignToken$1.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Selected state layer color on hover. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity}))`),
       /** Unselected icon color on focus. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on focus. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on focus. */
-      selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${DesignToken$1.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Selected state layer color on focus. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      iconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity}))`),
       /** Unselected icon color on pressed. */
-      unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Unselected state layer color on pressed. */
-      unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant})`),
+      unselectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${DesignToken$1.color.onSurfaceVariant}))`),
       /** Selected icon color on pressed. */
-      selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.primary})`),
+      selectedIconColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${DesignToken$1.color.primary}))`),
       /** Selected state layer color on pressed. */
-      selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.primary})`)
+      selectedStateLayerColor: unsafeCSS(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${DesignToken$1.color.primary}))`)
     }
   }
 };
@@ -14423,7 +14558,7 @@ function iconButtonVariantStyle(variant) {
  * Appearance variant styles for `M3eIconButtonElement`.
  * @internal
  */
-const IconButtonVariantStyle = [iconButtonVariantStyle("standard"), iconButtonVariantStyle("outlined"), iconButtonVariantStyle("filled"), iconButtonVariantStyle("tonal"), iconButtonVariantStyle("elevated"), css`:host([variant="outlined"]) .base { outline-style: solid; }`];
+const IconButtonVariantStyle = [iconButtonVariantStyle("standard"), iconButtonVariantStyle("outlined"), iconButtonVariantStyle("filled"), iconButtonVariantStyle("tonal"), iconButtonVariantStyle("elevated"), css`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];
 
 var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIconButtonElement_updateButtonShape, _M3eIconButtonElement_handlePressedChange, _M3eIconButtonElement_handleClick, _M3eIconButtonElement_handleSelectedIconSlotChange;
 /**
@@ -14479,6 +14614,20 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
  * @fires change - Dispatched when a toggle button's selected state changes.
  * @fires click - Emitted when the element is clicked.
  *
+ * @cssprop --m3e-icon-button-container-height - Height of the container for all size variants.
+ * @cssprop --m3e-icon-button-outline-thickness - Outline thickness for all size variants.
+ * @cssprop --m3e-icon-button-icon-size - Icon size for all size variants.
+ * @cssprop --m3e-icon-button-shape-round - Corner radius for all round size variants.
+ * @cssprop --m3e-icon-button-shape-square - Corner radius for all square size variants.
+ * @cssprop --m3e-icon-button-selected-shape-round - Corner radius for all selected round size variants.
+ * @cssprop --m3e-icon-button-selected-shape-square - Corner radius for all selected square size variants.
+ * @cssprop --m3e-icon-button-shape-pressed-morph - Corner radius for all pressed size variants.
+ * @cssprop --m3e-icon-button-narrow-leading-space - Leading space for all size variants (narrow).
+ * @cssprop --m3e-icon-button-narrow-trailing-space - Trailing space for all size variants (narrow).
+ * @cssprop --m3e-icon-button-default-leading-space - Leading space for all size variants (default).
+ * @cssprop --m3e-icon-button-default-trailing-space - Trailing space for all size variants (default).
+ * @cssprop --m3e-icon-button-wide-leading-space - Leading space for all size variants (wide).
+ * @cssprop --m3e-icon-button-wide-trailing-space - Trailing space for all size variants (wide).
  * @cssprop --m3e-icon-button-extra-small-container-height - Height of the extra-small container.
  * @cssprop --m3e-icon-button-extra-small-outline-thickness - Outline thickness for extra-small.
  * @cssprop --m3e-icon-button-extra-small-icon-size - Icon size for extra-small.
@@ -14549,6 +14698,48 @@ var _M3eIconButtonElement_instances, _M3eIconButtonElement_clickHandler, _M3eIco
  * @cssprop --m3e-icon-button-extra-large-default-trailing-space - Trailing space for extra-large (default).
  * @cssprop --m3e-icon-button-extra-large-wide-leading-space - Leading space for extra-large (wide).
  * @cssprop --m3e-icon-button-extra-large-wide-trailing-space - Trailing space for extra-large (wide).
+ * @cssprop --m3e-icon-button-outline-color - Default outline color for all variants.
+ * @cssprop --m3e-icon-button-disabled-outline-color - Outline color when disabled (all variants).
+ * @cssprop --m3e-icon-button-hover-outline-color - Outline color on hover (all variants).
+ * @cssprop --m3e-icon-button-focus-outline-color - Outline color on focus (all variants).
+ * @cssprop --m3e-icon-button-pressed-outline-color - Outline color on pressed (all variants).
+ * @cssprop --m3e-icon-button-container-color - Default container background color for all variants.
+ * @cssprop --m3e-icon-button-unselected-container-color - Unselected container background color for all variants.
+ * @cssprop --m3e-icon-button-selected-container-color - Selected container background color for all variants.
+ * @cssprop --m3e-icon-button-icon-color - Default icon color for tonal variant.
+ * @cssprop --m3e-icon-button-container-color - Default container background color for tonal variant.
+ * @cssprop --m3e-icon-button-unselected-icon-color - Unselected icon color for tonal variant.
+ * @cssprop --m3e-icon-button-unselected-container-color - Unselected container background color for tonal variant.
+ * @cssprop --m3e-icon-button-selected-icon-color - Selected icon color for tonal variant.
+ * @cssprop --m3e-icon-button-selected-container-color - Selected container background color for tonal variant.
+ * @cssprop --m3e-icon-button-icon-color - Default icon color for all variants.
+ * @cssprop --m3e-icon-button-unselected-icon-color - Unselected icon color for all variants.
+ * @cssprop --m3e-icon-button-selected-icon-color - Selected icon color for all variants.
+ * @cssprop --m3e-icon-button-disabled-container-color - Container background color when disabled (all variants).
+ * @cssprop --m3e-icon-button-disabled-container-opacity - Opacity of container when disabled (all variants).
+ * @cssprop --m3e-icon-button-disabled-icon-color - Icon color when disabled (all variants).
+ * @cssprop --m3e-icon-button-disabled-icon-opacity - Icon opacity when disabled (all variants).
+ * @cssprop --m3e-icon-button-hover-icon-color - Icon color on hover (all variants).
+ * @cssprop --m3e-icon-button-hover-state-layer-color - State layer color on hover (all variants).
+ * @cssprop --m3e-icon-button-hover-state-layer-opacity - State layer opacity on hover (all variants).
+ * @cssprop --m3e-icon-button-hover-unselected-icon-color - Unselected icon color on hover (all variants).
+ * @cssprop --m3e-icon-button-hover-unselected-state-layer-color - Unselected state layer color on hover (all variants).
+ * @cssprop --m3e-icon-button-hover-selected-icon-color - Selected icon color on hover (all variants).
+ * @cssprop --m3e-icon-button-hover-selected-state-layer-color - Selected state layer color on hover (all variants).
+ * @cssprop --m3e-icon-button-focus-icon-color - Icon color on focus (all variants).
+ * @cssprop --m3e-icon-button-focus-state-layer-color - State layer color on focus (all variants).
+ * @cssprop --m3e-icon-button-focus-state-layer-opacity - State layer opacity on focus (all variants).
+ * @cssprop --m3e-icon-button-focus-unselected-icon-color - Unselected icon color on focus (all variants).
+ * @cssprop --m3e-icon-button-focus-unselected-state-layer-color - Unselected state layer color on focus (all variants).
+ * @cssprop --m3e-icon-button-focus-selected-icon-color - Selected icon color on focus (all variants).
+ * @cssprop --m3e-icon-button-focus-selected-state-layer-color - Selected state layer color on focus (all variants).
+ * @cssprop --m3e-icon-button-pressed-icon-color - Icon color on pressed (all variants).
+ * @cssprop --m3e-icon-button-pressed-state-layer-color - State layer color on pressed (all variants).
+ * @cssprop --m3e-icon-button-pressed-state-layer-opacity - State layer opacity on pressed (all variants).
+ * @cssprop --m3e-icon-button-pressed-unselected-icon-color - Unselected icon color on pressed (all variants).
+ * @cssprop --m3e-icon-button-pressed-unselected-state-layer-color - Unselected state layer color on pressed (all variants).
+ * @cssprop --m3e-icon-button-pressed-selected-icon-color - Selected icon color on pressed (all variants).
+ * @cssprop --m3e-icon-button-pressed-selected-state-layer-color - Selected state layer color on pressed (all variants).
  * @cssprop --m3e-outlined-icon-button-icon-color - Default icon color for outlined variant.
  * @cssprop --m3e-outlined-icon-button-outline-color - Default outline color for outlined variant.
  * @cssprop --m3e-outlined-icon-button-unselected-icon-color - Unselected icon color for outlined variant.
@@ -15048,7 +15239,7 @@ _M3eListItemElement_getSlotContentType = function _M3eListItemElement_getSlotCon
   return elements.length > 0 ? "text" : undefined;
 };
 /** The styles of the element. */
-M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}, background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(.-one-line) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-one-line) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(.-two-line) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-two-line) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(.-three-line) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-three-line) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(.-three-line)) .base { align-items: center; } :host(.-three-line) .base { align-items: flex-start; } :host(:not(:disabled):not([selected]:not(:hover)):focus-visible) .base { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); } :host(:not(:disabled):not([selected]):hover) .base { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); } :host(.-has-leading) slot[name="leading"], :host(.-has-trailing) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(.-has-leading)) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(.-has-trailing)) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken$1.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
+M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}, background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(.-one-line) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-one-line) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(.-two-line) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-two-line) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(.-three-line) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(.-three-line) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(.-three-line)) .base { align-items: center; } :host(.-three-line) .base { align-items: flex-start; } :host(:not(:disabled):not([selected]:not(:hover))) .base.focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); } :host(:not(:disabled):not([selected]):hover) .base, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); } :host(.-has-leading) slot[name="leading"], :host(.-has-trailing) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(.-has-leading)) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(.-has-trailing)) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken$1.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
 M3eListItemElement = __decorate([t$3("m3e-list-item")], M3eListItemElement);
 
 var _M3eListElement_instances, _M3eListElement_items, _M3eListElement_leadingContentTypes, _M3eListElement_trailingContentTypes, _M3eListElement_handleSlotChange;
@@ -15637,6 +15828,15 @@ M3eListActionElement = __decorate([t$3("m3e-list-action")], M3eListActionElement
  * An internal interactive element used to present the content of a list item.
  */
 let M3eListItemButtonElement = class M3eListItemButtonElement extends KeyboardClick$1(LinkButton$1(Focusable$1(Disabled$1(AttachInternals$1(Role$1(M3eListItemElement, "button"), true))))) {
+  constructor() {
+    super();
+    new FocusController$1(this, {
+      callback: (_, focusVisible) => this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible", focusVisible)
+    });
+    new PressedController$1(this, {
+      callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
+    });
+  }
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
@@ -15753,7 +15953,7 @@ var _M3eListOptionElement_instances, _M3eListOptionElement_value, _M3eListOption
  */
 let M3eListOptionElement = class M3eListOptionElement extends KeyboardClick$1(Focusable$1(Selected$1(Disabled$1(AttachInternals$1(Role$1(M3eListItemElement, "option"), true))))) {
   constructor() {
-    super(...arguments);
+    super();
     _M3eListOptionElement_instances.add(this);
     /** @private */
     _M3eListOptionElement_value.set(this, void 0);
@@ -15761,6 +15961,12 @@ let M3eListOptionElement = class M3eListOptionElement extends KeyboardClick$1(Fo
     _M3eListOptionElement_textContent.set(this, "");
     /** @private */
     _M3eListOptionElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eListOptionElement_instances, "m", _M3eListOptionElement_handleClick).call(this, e));
+    new FocusController$1(this, {
+      callback: (_, focusVisible) => this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible", focusVisible)
+    });
+    new PressedController$1(this, {
+      callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
+    });
   }
   /** A string representing the value of the option. */
   get value() {
@@ -16083,6 +16289,16 @@ M3eLoadingIndicatorElement = __decorate([t$3("m3e-loading-indicator")], M3eLoadi
 
 /** A base implementation for an item of a menu. This class must be inherited. */
 class MenuItemElementBase extends KeyboardClick$1(Focusable$1(AttachInternals$1(Disabled$1(LitElement), true))) {
+  constructor() {
+    super();
+    new FocusController$1(this, {
+      callback: focused => {
+        if (focused) {
+          this.menu?._activate();
+        }
+      }
+    });
+  }
   /** The menu to which this item belongs. */
   get menu() {
     return this.closest("m3e-menu");
@@ -16415,7 +16631,7 @@ _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseE
 __decorate([r$1()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
 M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([t$3("m3e-menu-item")], M3eMenuItemElement);
 
-var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_activate, _M3eMenuElement_deactivate;
+var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
 var M3eMenuElement_1;
 /**
  * Presents a list of choices on a temporary surface.
@@ -16612,7 +16828,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role$1(LitE
     if (parent) {
       this.variant = parent.variant;
     } else {
-      __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_activate).call(this);
+      this._activate();
     }
     this.showPopover();
     __classPrivateFieldSet(this, _M3eMenuElement_trigger, trigger, "f");
@@ -16678,6 +16894,14 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role$1(LitE
     super.firstUpdated(_changedProperties);
     requestAnimationFrame(() => this.classList.remove("-no-animate"));
   }
+  /** @internal */
+  _activate() {
+    if (this !== M3eMenuElement_1.__activeMenu) {
+      M3eMenuElement_1.__activeMenu?.classList.remove("-active");
+      M3eMenuElement_1.__activeMenu = this;
+      M3eMenuElement_1.__activeMenu?.classList.add("-active");
+    }
+  }
 };
 _M3eMenuElement_trigger = new WeakMap();
 _M3eMenuElement_anchorCleanup = new WeakMap();
@@ -16734,7 +16958,7 @@ _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
   }
 };
 _M3eMenuElement_handleMouseEnter = function _M3eMenuElement_handleMouseEnter() {
-  __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_activate).call(this);
+  this._activate();
 };
 _M3eMenuElement_handleDocumentClick = function _M3eMenuElement_handleDocumentClick(e) {
   if (!this.submenu && !e.composedPath().some(x => x instanceof M3eMenuElement_1 || x === __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"))) {
@@ -16753,13 +16977,6 @@ _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePositi
     y
   };
 };
-_M3eMenuElement_activate = function _M3eMenuElement_activate() {
-  if (this !== M3eMenuElement_1.__activeMenu) {
-    M3eMenuElement_1.__activeMenu?.classList.remove("-active");
-    M3eMenuElement_1.__activeMenu = this;
-    M3eMenuElement_1.__activeMenu?.classList.add("-active");
-  }
-};
 _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   if (this === M3eMenuElement_1.__activeMenu) {
     M3eMenuElement_1.__activeMenu.classList.remove("-active");
@@ -16774,7 +16991,7 @@ _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   }
 })();
 /** The styles of the element. */
-M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 0.1875rem) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); } :host(:not(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken$1.shape.corner.small}); } :host(.-active) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
+M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken$1.shape.corner.small}); } :host(:not(.-active)) .base { --m3e-menu-item-first-child-shape: ${DesignToken$1.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken$1.shape.corner.extraSmall}; } :host(.-active) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken$1.shape.corner.large}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
         transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
         overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
         display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
@@ -17400,7 +17617,7 @@ _M3eNavItemElement_handleClick = function _M3eNavItemElement_handleClick(e) {
   }
 };
 /** The styles of the element. */
-M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.extraSmall}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
+M3eNavItemElement.styles = css`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${DesignToken$1.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${DesignToken$1.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${DesignToken$1.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken$1.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${DesignToken$1.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`;
 __decorate([e$4(".focus-ring")], M3eNavItemElement.prototype, "_focusRing", void 0);
 __decorate([e$4(".state-layer")], M3eNavItemElement.prototype, "_stateLayer", void 0);
 __decorate([e$4(".ripple")], M3eNavItemElement.prototype, "_ripple", void 0);
@@ -18253,7 +18470,7 @@ _M3eNavRailElement_handleKeyDown = function _M3eNavRailElement_handleKeyDown(e)
   }
 })();
 /** The styles of the element. */
-M3eNavRailElement.styles = css`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { display: flex; width: 100%; min-width: inherit; max-width: inherit; flex-direction: column; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); } :host(.-compact) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(.-compact) ::slotted(m3e-fab) { align-self: center; } :host(:not(.-compact)) { min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem); max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem); } :host(:not(.-compact)) .base { padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem); align-items: flex-start; --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } :host(.-compact) ::slotted(m3e-icon-button) { align-self: center; }`;
+M3eNavRailElement.styles = css`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { display: flex; width: 100%; min-width: inherit; max-width: inherit; flex-direction: column; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); } :host(.-compact) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(.-compact) ::slotted(m3e-fab) { align-self: center; } :host(:not(.-compact)) { min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem); max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem); } :host(:not(.-compact)) .base { padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem); align-items: flex-start; --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } :host(.-compact) ::slotted(m3e-icon-button) { align-self: center; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-hover-container-elevation: ${DesignToken$1.elevation.level1}; --m3e-fab-lowered-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${DesignToken$1.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${DesignToken$1.elevation.level1}; }`;
 M3eNavRailElement = __decorate([t$3("m3e-nav-rail")], M3eNavRailElement);
 
 var _M3eNavRailToggleElement_instances, _M3eNavRailToggleElement_mutationController, _M3eNavRailToggleElement_updateToggle;
@@ -18696,7 +18913,7 @@ _M3eOptionPanelElement_handleDocumentClick = function _M3eOptionPanelElement_han
   }
 })();
 /** The styles of the element. */
-M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 0.1875rem) + var(--m3e-option-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large}); min-width: var(--m3e-option-panel-container-min-width, 7rem); max-width: var(--m3e-option-panel-container-max-width, 17.5rem); max-height: var(--m3e-option-panel-container-max-height, 17.5rem); background-color: var(--m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-option-panel-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
+M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-option-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-option-panel-container-shape, ${DesignToken$1.shape.corner.large}); min-width: var(--m3e-option-panel-container-min-width, 7rem); max-width: var(--m3e-option-panel-container-max-width, 17.5rem); max-height: var(--m3e-option-panel-container-max-height, 17.5rem); background-color: var(--m3e-option-panel-container-color, ${DesignToken$1.color.surfaceContainer}); box-shadow: var(--m3e-option-panel-container-elevation, ${DesignToken$1.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-option-panel-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken$1.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken$1.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}, 
         transform ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard},
         overlay ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete,
         display ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: block; opacity: 1; } :host::backdrop { background-color: transparent; } :host(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(.-no-animate)) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
@@ -19793,6 +20010,10 @@ _M3eRadioElement_handleClick = function _M3eRadioElement_handleClick(e) {
   } else {
     this.checked = false;
   }
+  // Prevent default avoids double-click in FireFox.
+  if (this.closest("label")) {
+    e.preventDefault();
+  }
 };
 _M3eRadioElement_notifySelectionChange = function _M3eRadioElement_notifySelectionChange() {
   const group = this.closest("m3e-radio-group");
@@ -21190,9 +21411,9 @@ _M3eSliderThumbElement_labelText_get = function _M3eSliderThumbElement_labelText
   return this.closest("m3e-slider")?.displayWith?.(this.value) ?? this.value?.toString() ?? "";
 };
 /** The styles of the element. */
-M3eSliderThumbElement.styles = css`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${DesignToken$1.shape.corner.full}); 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%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { --m3e-focus-ring-growth-factor: 1.5; top: calc(0px - var(--m3e-focus-ring-thickness, 0.1875rem)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 0.1875rem)); left: var(--m3e-focus-ring-thickness, 0.1875rem); right: var(--m3e-focus-ring-thickness, 0.1875rem); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
+M3eSliderThumbElement.styles = css`:host { display: block; box-sizing: border-box; position: absolute; outline: none; top: 0; bottom: 0; border-radius: var(--m3e-slider-thumb-shape, ${DesignToken$1.shape.corner.full}); 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%; height: 100%; border-radius: inherit; } .touch { position: absolute; height: 3rem; left: 0; right: 0; touch-action: none; } .wrapper { display: inline-flex; justify-content: center; height: 100%; border-radius: inherit; width: calc(var(--m3e-slider-thumb-width, 0.25rem) + calc(var(--m3e-slider-thumb-padding, 0.375em) * 2)); } .focus-ring { top: calc(0px - var(--m3e-focus-ring-thickness, 3px)); bottom: calc(0px - var(--m3e-focus-ring-thickness, 3px)); left: var(--m3e-focus-ring-thickness, 3px); right: var(--m3e-focus-ring-thickness, 3px); } .label { user-select: none; position: absolute; display: flex; align-items: center; justify-content: center; visibility: var(--_slider-label-visibility, hidden); opacity: var(--_slider-label-opacity, 0); transform: var(--_slider-label-transform, scale(0)); transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}, 
           transform ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
-          visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; width: var(--m3e-slider-label-width, 3rem); height: var(--_m3e-slider-label-height, 2.75rem); top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem)); inset-inline-start: calc(0px - 100%); border-radius: var(--m3e-slider-label-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-slider-label-container-color, ${DesignToken$1.color.inverseSurface}); color: var(--m3e-slider-label-color, ${DesignToken$1.color.inverseOnSurface}); font-size: var(--m3e-slider-label-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var(--m3e-slider-label-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight}); line-height: var(--m3e-slider-label-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight}); letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); } @starting-style { .label { opacity: 0; transform: scale(0); } } .handle { height: 100%; width: var(--m3e-slider-thumb-width, 0.25rem); border-radius: inherit; transition: ${unsafeCSS(`width ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:active:not([aria-disabled="true"])) .handle { width: var(--m3e-slider-thumb-pressed-width, 0.125rem); } :host(:not([aria-disabled="true"])) .handle { background-color: var(--m3e-slider-thumb-color, ${DesignToken$1.color.primary}); } :host([aria-disabled="true"]) .handle { opacity: var(--m3e-slider-thumb-disabled-opacity, 38%); background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken$1.color.onSurface}); } @media (prefers-reduced-motion) { .label { transition: none; } } @media (forced-colors: active) { .label { forced-color-adjust: none; background-color: CanvasText; color: Canvas; } :host(:not([aria-disabled="true"])) .handle { background-color: CanvasText; } :host([aria-disabled="true"]) .handle { opacity: unset; background-color: GrayText; } }`;
+          visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; width: var(--m3e-slider-label-width, 3rem); height: var(--_m3e-slider-label-height, 2.75rem); top: calc(0px - var(--_m3e-slider-label-height, 2.75rem) - var(--_m3e-slider-label-margin, 0.25rem)); inset-inline-start: calc(0px - 100%); border-radius: var(--m3e-slider-label-shape, ${DesignToken$1.shape.corner.full}); background-color: var(--m3e-slider-label-container-color, ${DesignToken$1.color.inverseSurface}); color: var(--m3e-slider-label-color, ${DesignToken$1.color.inverseOnSurface}); font-size: var(--m3e-slider-label-font-size, ${DesignToken$1.typescale.standard.label.medium.fontSize}); font-weight: var(--m3e-slider-label-font-weight, ${DesignToken$1.typescale.standard.label.medium.fontWeight}); line-height: var(--m3e-slider-label-line-height, ${DesignToken$1.typescale.standard.label.medium.lineHeight}); letter-spacing: var(--m3e-slider-label-tracking, ${DesignToken$1.typescale.standard.label.medium.tracking}); } @starting-style { .label { opacity: 0; transform: scale(0); } } .handle { height: 100%; width: var(--m3e-slider-thumb-width, 0.25rem); border-radius: inherit; transition: ${unsafeCSS(`width ${DesignToken$1.motion.duration.short2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:active:not([aria-disabled="true"])) .handle { width: var(--m3e-slider-thumb-pressed-width, 2px); } :host(:not([aria-disabled="true"])) .handle { background-color: var(--m3e-slider-thumb-color, ${DesignToken$1.color.primary}); } :host([aria-disabled="true"]) .handle { opacity: var(--m3e-slider-thumb-disabled-opacity, 38%); background-color: var(--m3e-slider-thumb-disabled-color, ${DesignToken$1.color.onSurface}); } @media (prefers-reduced-motion) { .label { transition: none; } } @media (forced-colors: active) { .label { forced-color-adjust: none; background-color: CanvasText; color: Canvas; } :host(:not([aria-disabled="true"])) .handle { background-color: CanvasText; } :host([aria-disabled="true"]) .handle { opacity: unset; background-color: GrayText; } }`;
 __decorate([e$4(".focus-ring")], M3eSliderThumbElement.prototype, "_focusRing", void 0);
 __decorate([n$1({
   type: Number,
@@ -21980,6 +22201,7 @@ let M3eSplitButtonElement = class M3eSplitButtonElement extends Role$1(LitElemen
     _M3eSplitButtonElement_pressedController.set(this, new PressedController$1(this, {
       target: null,
       capture: true,
+      minPressedDuration: 150,
       isPressedKey: key => key === " ",
       callback: (pressed, _, target) => {
         switch (target) {
@@ -22857,7 +23079,7 @@ const SwitchToken = {
   trackHeight: unsafeCSS("var(--m3e-switch-track-height, 2rem)"),
   trackWidth: unsafeCSS("var(--m3e-switch-track-width, 3.25rem)"),
   trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken$1.color.outline})`),
-  trackOutlineWidth: unsafeCSS("var(--m3e-switch-track-outline-width, 0.125rem)"),
+  trackOutlineWidth: unsafeCSS("var(--m3e-switch-track-outline-width, 2px)"),
   trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken$1.shape.corner.full})`),
   selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken$1.color.primary})`),
   unselectedTrackColor: unsafeCSS(`var(--m3e-switch-unselected-track-color, ${DesignToken$1.color.surfaceContainerHighest})`),
@@ -23153,6 +23375,10 @@ _M3eSwitchElement_handleClick = function _M3eSwitchElement_handleClick(e) {
   } else {
     this.checked = !this.checked;
   }
+  // Prevent default avoids double-click in FireFox.
+  if (this.closest("label")) {
+    e.preventDefault();
+  }
 };
 /** The styles of the element. */
 M3eSwitchElement.styles = [SwitchStyle, SwitchStateLayerStyle, SwitchTrackStyle, SwitchHandleStyle, SwitchIconStyle];
@@ -23293,7 +23519,7 @@ _M3eTabElement_handleClick = function _M3eTabElement_handleClick(e) {
   }
 };
 /** The styles of the element. */
-M3eTabElement.styles = css`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken$1.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, ${DesignToken$1.color.primary}); --m3e-state-layer-hover-color: var(--m3e-tab-selected-container-hover-color, ${DesignToken$1.color.primary}); --m3e-state-layer-focus-color: var(--m3e-tab-selected-container-focus-color, ${DesignToken$1.color.primary}); --m3e-ripple-color: var(--m3e-tab-selected-ripple-color, ${DesignToken$1.color.primary}); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
+M3eTabElement.styles = css`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${DesignToken$1.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${DesignToken$1.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${DesignToken$1.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${DesignToken$1.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${DesignToken$1.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken$1.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken$1.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${DesignToken$1.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${DesignToken$1.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${DesignToken$1.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`;
 /** @private */
 M3eTabElement.__nextId = 0;
 __decorate([e$4(".focus-ring")], M3eTabElement.prototype, "_focusRing", void 0);
@@ -23554,7 +23780,7 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
 };
 /** The styles of the element. */
 M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken$1.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard},
-        width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 0.1875rem); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 0.125rem); --_tab-height: 3rem; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(.-no-animate) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
+        width var(--m3e-slide-animation-duration, ${DesignToken$1.motion.duration.long2}) ${DesignToken$1.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken$1.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken$1.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken$1.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken$1.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken$1.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(.-no-animate) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
 __decorate([e$4(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([r$1()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([n$1({
@@ -27739,7 +27965,7 @@ class TooltipElementBase extends HtmlFor$1(LitElement) {
   detach() {
     if (this.control) {
       __classPrivateFieldGet(this, _TooltipElementBase_hoverController, "f").unobserve(this.control);
-      __classPrivateFieldGet(this, _TooltipElementBase_longPressController, "f").observe(this.control);
+      __classPrivateFieldGet(this, _TooltipElementBase_longPressController, "f").unobserve(this.control);
       this.control.removeEventListener("click", __classPrivateFieldGet(this, _TooltipElementBase_controlClickHandler, "f"));
       this.hide();
     }