@m3e/web 2.0.0 → 2.0.1

package/dist/fab.js

@@ -438,7 +438,7 @@ function e(e, r) {
  * 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.motion.duration.short4} ${DesignToken.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.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .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.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken.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.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken.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.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)}); } .base.-with-menu { transition: height ${DesignToken.motion.spring.fastSpatial}; } .base.-with-menu .wrapper { transition: padding ${DesignToken.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.motion.duration.short4} ${DesignToken.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.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .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.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${DesignToken.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.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${DesignToken.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.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)}); } .base.-with-menu { transition: height ${DesignToken.motion.spring.fastSpatial}; } .base.-with-menu .wrapper { transition: padding ${DesignToken.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.
@@ -447,51 +447,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.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(`var(--m3e-fab-small-label-text-font-size, ${DesignToken.typescale.standard.title.medium.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, ${DesignToken.typescale.standard.title.medium.tracking})`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, 1.5rem) + ${DesignToken.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-small-icon-size, 1.5rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-small-shape, ${DesignToken.shape.corner.large})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, 1rem) + ${DesignToken.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, 1rem) + ${DesignToken.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.density.calc(-3)})`),
+    labelTextFontSize: unsafeCSS(`var(--m3e-fab-small-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken.typescale.standard.title.medium.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-small-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-small-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-fab-small-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken.typescale.standard.title.medium.tracking}))`),
+    iconSize: unsafeCSS(`calc(var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem)) + ${DesignToken.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.shape.corner.large}))`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + ${DesignToken.density.calc(-3)})`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + ${DesignToken.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.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(`var(--m3e-fab-medium-label-text-font-size, ${DesignToken.typescale.standard.title.large.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, ${DesignToken.typescale.standard.title.large.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, ${DesignToken.typescale.standard.title.large.tracking})`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, 1.75rem) + ${DesignToken.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-medium-icon-size, 1.75rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-medium-shape, ${DesignToken.shape.corner.largeIncreased})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, 1.625rem) + ${DesignToken.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, 1.625rem) + ${DesignToken.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.density.calc(-3)})`),
+    labelTextFontSize: unsafeCSS(`var(--m3e-fab-medium-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken.typescale.standard.title.large.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-medium-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-medium-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken.typescale.standard.title.large.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-fab-medium-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken.typescale.standard.title.large.tracking}))`),
+    iconSize: unsafeCSS(`calc(var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem)) + ${DesignToken.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.shape.corner.largeIncreased}))`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + ${DesignToken.density.calc(-3)})`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + ${DesignToken.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.density.calc(-3)})`),
-    labelTextFontSize: unsafeCSS(`var(--m3e-fab-large-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize})`),
-    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight})`),
-    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight})`),
-    labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking})`),
-    iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, 2.25rem) + ${DesignToken.density.calc(-3)})`),
-    extendedIconSize: unsafeCSS("var(--m3e-fab-large-icon-size, 2.25rem)"),
-    shape: unsafeCSS(`var(--m3e-fab-large-shape, ${DesignToken.shape.corner.extraLarge})`),
-    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, 1.75rem) + ${DesignToken.density.calc(-3)})`),
-    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, 1.75rem) + ${DesignToken.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.density.calc(-3)})`),
+    labelTextFontSize: unsafeCSS(`var(--m3e-fab-large-label-text-font-size, var(--m3e-fab-label-text-font-size, ${DesignToken.typescale.standard.headline.small.fontSize}))`),
+    labelTextFontWeight: unsafeCSS(`var(--m3e-fab-large-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight}))`),
+    labelTextLineHeight: unsafeCSS(`var(--m3e-fab-large-label-text-line-height, var(--m3e-fab-label-text-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight}))`),
+    labelTextTracking: unsafeCSS(`var(--m3e-fab-large-label-text-tracking, var(--m3e-fab-label-text-tracking, ${DesignToken.typescale.standard.headline.small.tracking}))`),
+    iconSize: unsafeCSS(`calc(var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem)) + ${DesignToken.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.shape.corner.extraLarge}))`),
+    leadingSpace: unsafeCSS(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + ${DesignToken.density.calc(-3)})`),
+    trailingSpace: unsafeCSS(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + ${DesignToken.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))")
   }
 };
 
@@ -513,542 +513,542 @@ const FabVariantToken = {
   /** Design tokens that control the `primary` variant. */
   primary: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-primary-fab-label-text-color, ${DesignToken.color.onPrimary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-primary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken.color.onPrimary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-primary-fab-icon-color, ${DesignToken.color.onPrimary})`),
+    iconColor: unsafeCSS(`var(--m3e-primary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken.color.onPrimary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-primary-fab-container-color, ${DesignToken.color.primary})`),
+    containerColor: unsafeCSS(`var(--m3e-primary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken.color.primary}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-primary-fab-container-elevation, ${DesignToken.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-primary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-primary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-primary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken.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.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken.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.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken.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.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-primary-fab-hover-icon-color, ${DesignToken.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-hover-label-text-color, ${DesignToken.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-color, ${DesignToken.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken.color.onPrimary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-primary-fab-focus-icon-color, ${DesignToken.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-focus-label-text-color, ${DesignToken.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-color, ${DesignToken.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken.color.onPrimary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-primary-fab-pressed-icon-color, ${DesignToken.color.onPrimary})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken.color.onPrimary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-pressed-label-text-color, ${DesignToken.color.onPrimary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken.color.onPrimary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-color, ${DesignToken.color.onPrimary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken.color.onPrimary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `secondary` variant. */
   secondary: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-label-text-color, ${DesignToken.color.onSecondary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken.color.onSecondary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-secondary-fab-icon-color, ${DesignToken.color.onSecondary})`),
+    iconColor: unsafeCSS(`var(--m3e-secondary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken.color.onSecondary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-secondary-fab-container-color, ${DesignToken.color.secondary})`),
+    containerColor: unsafeCSS(`var(--m3e-secondary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken.color.secondary}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-secondary-fab-container-elevation, ${DesignToken.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-secondary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken.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.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken.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.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken.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.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-fab-hover-icon-color, ${DesignToken.color.onSecondary})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken.color.onSecondary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-hover-label-text-color, ${DesignToken.color.onSecondary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken.color.onSecondary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-color, ${DesignToken.color.onSecondary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken.color.onSecondary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-fab-focus-icon-color, ${DesignToken.color.onSecondary})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken.color.onSecondary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-focus-label-text-color, ${DesignToken.color.onSecondary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken.color.onSecondary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-color, ${DesignToken.color.onSecondary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken.color.onSecondary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-icon-color, ${DesignToken.color.onSecondary})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken.color.onSecondary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-label-text-color, ${DesignToken.color.onSecondary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken.color.onSecondary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-color, ${DesignToken.color.onSecondary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken.color.onSecondary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `tertiary` variant. */
   tertiary: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-label-text-color, ${DesignToken.color.onTertiary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken.color.onTertiary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-tertiary-fab-icon-color, ${DesignToken.color.onTertiary})`),
+    iconColor: unsafeCSS(`var(--m3e-tertiary-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken.color.onTertiary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-tertiary-fab-container-color, ${DesignToken.color.tertiary})`),
+    containerColor: unsafeCSS(`var(--m3e-tertiary-fab-container-color, var(--m3e-fab-container-color, ${DesignToken.color.tertiary}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-container-elevation, ${DesignToken.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken.elevation.level2}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken.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.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken.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.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken.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.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-icon-color, ${DesignToken.color.onTertiary})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken.color.onTertiary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-label-text-color, ${DesignToken.color.onTertiary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken.color.onTertiary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-color, ${DesignToken.color.onTertiary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken.color.onTertiary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-icon-color, ${DesignToken.color.onTertiary})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken.color.onTertiary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-label-text-color, ${DesignToken.color.onTertiary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken.color.onTertiary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-color, ${DesignToken.color.onTertiary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken.color.onTertiary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-icon-color, ${DesignToken.color.onTertiary})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken.color.onTertiary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-label-text-color, ${DesignToken.color.onTertiary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken.color.onTertiary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-color, ${DesignToken.color.onTertiary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken.color.onTertiary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken.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.color.onPrimaryContainer})`),
+    labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-label-text-color, var(--m3e-primary-container-fab-label-text-color, ${DesignToken.color.onPrimaryContainer}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-primary-container-fab-icon-color, ${DesignToken.color.onPrimaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-primary-container-fab-icon-color, var(--m3e-primary-container-fab-icon-color, ${DesignToken.color.onPrimaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-primary-container-fab-container-color, ${DesignToken.color.primaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-primary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken.color.primaryContainer}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken.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.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken.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.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken.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.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken.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.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken.color.onPrimaryContainer}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken.color.onPrimaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken.color.onPrimaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken.color.onPrimaryContainer}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken.color.onPrimaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken.color.onPrimaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken.color.onPrimaryContainer}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-label-text-color, ${DesignToken.color.onPrimaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken.color.onPrimaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-color, ${DesignToken.color.onPrimaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken.color.onPrimaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-primary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken.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.color.onSecondaryContainer})`),
+    labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-container-color, ${DesignToken.color.secondaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken.color.secondaryContainer}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken.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.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken.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.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken.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.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken.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.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-icon-color, ${DesignToken.color.onSecondaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-label-text-color, ${DesignToken.color.onSecondaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken.color.onSecondaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken.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.color.onTertiaryContainer})`),
+    labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken.color.onTertiaryContainer}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-icon-color, ${DesignToken.color.onTertiaryContainer})`),
+    iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken.color.onTertiaryContainer}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-container-color, ${DesignToken.color.tertiaryContainer})`),
+    containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-container-color, var(--m3e-fab-container-color, ${DesignToken.color.tertiaryContainer}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-container-elevation, ${DesignToken.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken.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.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken.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.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken.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.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken.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.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-icon-color, ${DesignToken.color.onTertiaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken.color.onTertiaryContainer}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken.color.onTertiaryContainer}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken.color.onTertiaryContainer}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-icon-color, ${DesignToken.color.onTertiaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken.color.onTertiaryContainer}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken.color.onTertiaryContainer}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken.color.onTertiaryContainer}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-icon-color, ${DesignToken.color.onTertiaryContainer})`),
+      iconColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken.color.onTertiaryContainer}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-label-text-color, ${DesignToken.color.onTertiaryContainer})`),
+      labelTextColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken.color.onTertiaryContainer}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, ${DesignToken.color.onTertiaryContainer})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken.color.onTertiaryContainer}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2}))`)
     }
   },
   /** Design tokens that control the `surface` variant. */
   surface: {
     /** Default label color. */
-    labelTextColor: unsafeCSS(`var(--m3e-surface-fab-label-text-color, ${DesignToken.color.primary})`),
+    labelTextColor: unsafeCSS(`var(--m3e-surface-fab-label-text-color, var(--m3e-fab-label-text-color, ${DesignToken.color.primary}))`),
     /** Default icon color. */
-    iconColor: unsafeCSS(`var(--m3e-surface-fab-icon-color, ${DesignToken.color.primary})`),
+    iconColor: unsafeCSS(`var(--m3e-surface-fab-icon-color, var(--m3e-fab-icon-color, ${DesignToken.color.primary}))`),
     /** Default container background color. */
-    containerColor: unsafeCSS(`var(--m3e-surface-fab-container-color, ${DesignToken.color.surfaceContainerHigh})`),
+    containerColor: unsafeCSS(`var(--m3e-surface-fab-container-color, var(--m3e-fab-container-color, ${DesignToken.color.surfaceContainerHigh}))`),
     /** Resting elevation. */
-    containerElevation: unsafeCSS(`var(--m3e-surface-fab-container-elevation, ${DesignToken.elevation.level3})`),
+    containerElevation: unsafeCSS(`var(--m3e-surface-fab-container-elevation, var(--m3e-fab-container-elevation, ${DesignToken.elevation.level3}))`),
     /** Lowered resting elevation. */
-    loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-container-elevation, ${DesignToken.elevation.level2})`),
+    loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${DesignToken.elevation.level2}))`),
     /** Lowered container background color. */
-    loweredContainerColor: unsafeCSS(`var(--m3e-surface-fab-lowered-container-color, ${DesignToken.color.surfaceContainerLow})`),
+    loweredContainerColor: unsafeCSS(`var(--m3e-surface-fab-lowered-container-color, var(--m3e-fab-lowered-container-color, ${DesignToken.color.surfaceContainerLow}))`),
     /** Design tokens that control disabled state. */
     disabled: {
       /** Container background color when disabled. */
-      containerColor: unsafeCSS(`var(--m3e-surface-fab-disabled-container-color, ${DesignToken.color.onSurface})`),
+      containerColor: unsafeCSS(`var(--m3e-surface-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${DesignToken.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.color.onSurface})`),
+      iconColor: unsafeCSS(`var(--m3e-surface-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${DesignToken.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.color.onSurface})`),
+      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${DesignToken.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.elevation.level0})`),
+      containerElevation: unsafeCSS(`var(--m3e-surface-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
       /** Lowered elevation when disabled. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${DesignToken.elevation.level0}))`)
     },
     /** Design tokens that control hover state. */
     hover: {
       /** Icon color on hover. */
-      iconColor: unsafeCSS(`var(--m3e-surface-fab-hover-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-surface-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on hover. */
-      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-hover-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on hover. */
-      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${DesignToken.color.primary}))`),
       /** State layer opacity on hover. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
       /** Elevation on hover. */
-      containerElevation: unsafeCSS(`var(--m3e-surface-fab-hover-container-elevation, ${DesignToken.elevation.level4})`),
+      containerElevation: unsafeCSS(`var(--m3e-surface-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${DesignToken.elevation.level4}))`),
       /** Lowered elevation on hover. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${DesignToken.elevation.level3}))`)
     },
     /** Design tokens that control focus state. */
     focus: {
       /** Icon color on focus. */
-      iconColor: unsafeCSS(`var(--m3e-surface-fab-focus-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-surface-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on focus. */
-      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-focus-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on focus. */
-      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${DesignToken.color.primary}))`),
       /**State layer opacity on focus. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
       /** Elevation on focus. */
-      containerElevation: unsafeCSS(`var(--m3e-surface-fab-focus-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-surface-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on focus. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${DesignToken.elevation.level2}))`)
     },
     /** Design tokens that control pressed state. */
     pressed: {
       /** Icon color on pressed. */
-      iconColor: unsafeCSS(`var(--m3e-surface-fab-pressed-icon-color, ${DesignToken.color.primary})`),
+      iconColor: unsafeCSS(`var(--m3e-surface-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${DesignToken.color.primary}))`),
       /** Label color on pressed. */
-      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-pressed-label-text-color, ${DesignToken.color.primary})`),
+      labelTextColor: unsafeCSS(`var(--m3e-surface-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${DesignToken.color.primary}))`),
       /** State layer color on pressed. */
-      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-color, ${DesignToken.color.primary})`),
+      stateLayerColor: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${DesignToken.color.primary}))`),
       /** State layer opacity on pressed. */
-      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
+      stateLayerOpacity: unsafeCSS(`var(--m3e-surface-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
       /** Elevation on pressed. */
-      containerElevation: unsafeCSS(`var(--m3e-surface-fab-pressed-container-elevation, ${DesignToken.elevation.level3})`),
+      containerElevation: unsafeCSS(`var(--m3e-surface-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${DesignToken.elevation.level3}))`),
       /** Lowered elevation on pressed. */
-      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2})`)
+      loweredContainerElevation: unsafeCSS(`var(--m3e-surface-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${DesignToken.elevation.level2}))`)
     }
   }
 };
@@ -1121,6 +1121,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.
@@ -1151,6 +1161,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.