@m3e/web 2.5.10 → 2.5.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.js +371 -125
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +56 -56
- package/dist/all.min.js.map +1 -1
- package/dist/autocomplete.js +23 -5
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.min.js +1 -1
- package/dist/autocomplete.min.js.map +1 -1
- package/dist/breadcrumb.js +1 -1
- package/dist/breadcrumb.js.map +1 -1
- package/dist/breadcrumb.min.js +1 -1
- package/dist/breadcrumb.min.js.map +1 -1
- package/dist/button.js +13 -7
- package/dist/button.js.map +1 -1
- package/dist/button.min.js +1 -1
- package/dist/button.min.js.map +1 -1
- package/dist/checkbox.js +5 -0
- package/dist/checkbox.js.map +1 -1
- package/dist/checkbox.min.js +1 -1
- package/dist/checkbox.min.js.map +1 -1
- package/dist/chips.js +2 -2
- package/dist/chips.js.map +1 -1
- package/dist/chips.min.js +1 -1
- package/dist/chips.min.js.map +1 -1
- package/dist/core.js +27 -23
- package/dist/core.js.map +1 -1
- package/dist/core.min.js +1 -1
- package/dist/core.min.js.map +1 -1
- package/dist/css-custom-data.json +5263 -5233
- package/dist/custom-elements.json +51230 -50306
- package/dist/fab.js +9 -9
- package/dist/fab.js.map +1 -1
- package/dist/fab.min.js +1 -1
- package/dist/fab.min.js.map +1 -1
- package/dist/form-field.js +4 -5
- package/dist/form-field.js.map +1 -1
- package/dist/form-field.min.js +2 -2
- package/dist/form-field.min.js.map +1 -1
- package/dist/html-custom-data.json +1693 -1666
- package/dist/icon-button.js +48 -42
- package/dist/icon-button.js.map +1 -1
- package/dist/icon-button.min.js +1 -1
- package/dist/icon-button.min.js.map +1 -1
- package/dist/menu.js +2 -2
- package/dist/menu.js.map +1 -1
- package/dist/menu.min.js +1 -1
- package/dist/menu.min.js.map +1 -1
- package/dist/option.js +13 -3
- package/dist/option.js.map +1 -1
- package/dist/option.min.js +1 -1
- package/dist/option.min.js.map +1 -1
- package/dist/paginator.js +1 -1
- package/dist/paginator.js.map +1 -1
- package/dist/paginator.min.js +2 -2
- package/dist/paginator.min.js.map +1 -1
- package/dist/radio-group.js +6 -1
- package/dist/radio-group.js.map +1 -1
- package/dist/radio-group.min.js +1 -1
- package/dist/radio-group.min.js.map +1 -1
- package/dist/select.js +18 -2
- package/dist/select.js.map +1 -1
- package/dist/select.min.js +1 -1
- package/dist/select.min.js.map +1 -1
- package/dist/split-button.js +1 -1
- package/dist/split-button.js.map +1 -1
- package/dist/split-button.min.js +1 -1
- package/dist/split-button.min.js.map +1 -1
- package/dist/src/autocomplete/AutocompleteElement.d.ts.map +1 -1
- package/dist/src/button/ButtonElement.d.ts +1 -0
- package/dist/src/button/ButtonElement.d.ts.map +1 -1
- package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
- package/dist/src/core/shared/mixins/LinkButton.d.ts.map +1 -1
- package/dist/src/core/shared/tokens/DesignToken.d.ts +3 -0
- package/dist/src/core/shared/tokens/DesignToken.d.ts.map +1 -1
- package/dist/src/core/shared/tokens/MeasurementToken.d.ts +13 -7
- package/dist/src/core/shared/tokens/MeasurementToken.d.ts.map +1 -1
- package/dist/src/fab/styles/FabSizeToken.d.ts.map +1 -1
- package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
- package/dist/src/icon-button/IconButtonElement.d.ts +1 -0
- package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
- package/dist/src/icon-button/styles/IconButtonSizeToken.d.ts.map +1 -1
- package/dist/src/menu/MenuElement.d.ts.map +1 -1
- package/dist/src/menu/MenuItemElementBase.d.ts.map +1 -1
- package/dist/src/option/OptionElement.d.ts.map +1 -1
- package/dist/src/option/OptionPanelElement.d.ts.map +1 -1
- package/dist/src/paginator/PaginatorElement.d.ts.map +1 -1
- package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
- package/dist/src/select/SelectElement.d.ts.map +1 -1
- package/dist/src/split-button/SplitButtonElement.d.ts.map +1 -1
- package/dist/src/switch/SwitchElement.d.ts.map +1 -1
- package/dist/src/switch/styles/SwitchToken.d.ts.map +1 -1
- package/dist/src/theme/ThemeElement.d.ts +6 -0
- package/dist/src/theme/ThemeElement.d.ts.map +1 -1
- package/dist/src/theme/ThemeIconElement.d.ts +60 -0
- package/dist/src/theme/ThemeIconElement.d.ts.map +1 -0
- package/dist/src/theme/ThemeVariant.d.ts +3 -0
- package/dist/src/theme/ThemeVariant.d.ts.map +1 -0
- package/dist/src/theme/index.d.ts +2 -0
- package/dist/src/theme/index.d.ts.map +1 -1
- package/dist/switch.js +16 -11
- package/dist/switch.js.map +1 -1
- package/dist/switch.min.js +1 -1
- package/dist/switch.min.js.map +1 -1
- package/dist/theme.js +184 -11
- package/dist/theme.js.map +1 -1
- package/dist/theme.min.js +31 -31
- package/dist/theme.min.js.map +1 -1
- package/package.json +1 -1
package/dist/fab.min.js
CHANGED
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
* Copyright (c) 2025–2026 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{__classPrivateFieldGet as e,__decorate as a}from"tslib";import{unsafeCSS as o,css as r,LitElement as t,html as l}from"lit";import{query as i,property as n}from"lit/decorators.js";import{DesignToken as c,KeyboardClick as s,LinkButton as v,FormSubmitter as b,Focusable as d,DisabledInteractive as m,Disabled as f,AttachInternals as y,Role as p,PressedController as h,renderPseudoLink as $,customElement as u}from"@m3e/web/core";const x=r`: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: ${o(`background-color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { white-space: nowrap; transition: ${o(`color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } .icon { transition: ${o(`color ${c.motion.duration.short4} ${c.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; } .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, ${c.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${c.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${c.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${c.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${c.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${c.density.calc(-3)}); } .base.with-menu { transition: height ${c.motion.spring.fastSpatial}; } .base.with-menu .wrapper { transition: padding ${c.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; } }`,C={small:{containerHeight:o(`calc(var(--m3e-fab-small-container-height, var(--m3e-fab-container-height, 3.5rem)) + ${c.density.calc(-3)})`),labelTextFontSize:o(`var(--m3e-fab-small-label-text-font-size, var(--m3e-fab-label-text-font-size, ${c.typescale.standard.title.medium.fontSize}))`),labelTextFontWeight:o(`var(--m3e-fab-small-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${c.typescale.standard.title.medium.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-fab-small-label-text-line-height, var(--m3e-fab-label-text-line-height, ${c.typescale.standard.title.medium.lineHeight}))`),labelTextTracking:o(`var(--m3e-fab-small-label-text-tracking, var(--m3e-fab-label-text-tracking, ${c.typescale.standard.title.medium.tracking}))`),iconSize:o(`calc(var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem)) + ${c.density.calc(-3)})`),extendedIconSize:o("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),shape:o(`var(--m3e-fab-small-shape, var(--m3e-fab-shape, ${c.shape.corner.large}))`),leadingSpace:o(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + ${c.density.calc(-3)})`),trailingSpace:o(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + ${c.density.calc(-3)})`),iconLabelSpace:o("var(--m3e-fab-small-icon-label-space, var(--m3e-fab-icon-label-space, 0.5rem))"),extendedLeadingSpace:o("var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem))"),extendedTrailingSpace:o("var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem))")},medium:{containerHeight:o(`calc(var(--m3e-fab-medium-container-height, var(--m3e-fab-container-height, 5rem)) + ${c.density.calc(-3)})`),labelTextFontSize:o(`var(--m3e-fab-medium-label-text-font-size, var(--m3e-fab-label-text-font-size, ${c.typescale.standard.title.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-fab-medium-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${c.typescale.standard.title.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-fab-medium-label-text-line-height, var(--m3e-fab-label-text-line-height, ${c.typescale.standard.title.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-fab-medium-label-text-tracking, var(--m3e-fab-label-text-tracking, ${c.typescale.standard.title.large.tracking}))`),iconSize:o(`calc(var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem)) + ${c.density.calc(-3)})`),extendedIconSize:o("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),shape:o(`var(--m3e-fab-medium-shape, var(--m3e-fab-shape, ${c.shape.corner.largeIncreased}))`),leadingSpace:o(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + ${c.density.calc(-3)})`),trailingSpace:o(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + ${c.density.calc(-3)})`),iconLabelSpace:o("var(--m3e-fab-medium-icon-label-space, var(--m3e-fab-icon-label-space, 0.75rem))"),extendedLeadingSpace:o("var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem))"),extendedTrailingSpace:o("var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem))")},large:{containerHeight:o(`calc(var(--m3e-fab-large-container-height, var(--m3e-fab-container-height, 6rem)) + ${c.density.calc(-3)})`),labelTextFontSize:o(`var(--m3e-fab-large-label-text-font-size, var(--m3e-fab-label-text-font-size, ${c.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:o(`var(--m3e-fab-large-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${c.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-fab-large-label-text-line-height, var(--m3e-fab-label-text-line-height, ${c.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:o(`var(--m3e-fab-large-label-text-tracking, var(--m3e-fab-label-text-tracking, ${c.typescale.standard.headline.small.tracking}))`),iconSize:o(`calc(var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem)) + ${c.density.calc(-3)})`),extendedIconSize:o("var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),shape:o(`var(--m3e-fab-large-shape, var(--m3e-fab-shape, ${c.shape.corner.extraLarge}))`),leadingSpace:o(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + ${c.density.calc(-3)})`),trailingSpace:o(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + ${c.density.calc(-3)})`),iconLabelSpace:o("var(--m3e-fab-large-icon-label-space, var(--m3e-fab-icon-label-space, 1rem))"),extendedLeadingSpace:o("var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem))"),extendedTrailingSpace:o("var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem))")}};function g(e){return r`:host([size="${o(e)}"]) .base { height: ${C[e].containerHeight}; } :host([size="${o(e)}"]) .base { border-radius: ${C[e].shape}; } :host([size="${o(e)}"]) .label { font-size: ${C[e].labelTextFontSize}; font-weight: ${C[e].labelTextFontWeight}; line-height: ${C[e].labelTextLineHeight}; letter-spacing: ${C[e].labelTextTracking}; } :host([size="${o(e)}"]:not([extended])) .wrapper { padding-inline-start: ${C[e].leadingSpace}; padding-inline-end: ${C[e].trailingSpace}; } :host([size="${o(e)}"]:not([extended])) .icon { font-size: ${C[e].iconSize}; --m3e-icon-size: ${C[e].iconSize}; } :host([size="${o(e)}"][extended]) .wrapper { padding-inline-start: ${C[e].extendedLeadingSpace}; padding-inline-end: ${C[e].extendedTrailingSpace}; column-gap: ${C[e].iconLabelSpace}; } :host([size="${o(e)}"][extended]) .icon { font-size: ${C[e].extendedIconSize}; --m3e-icon-size: ${C[e].extendedIconSize}; }`}const w=[g("small"),g("medium"),g("large")],S={primary:{labelTextColor:o(`var(--m3e-primary-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onPrimary}))`),iconColor:o(`var(--m3e-primary-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onPrimary}))`),containerColor:o(`var(--m3e-primary-fab-container-color, var(--m3e-fab-container-color, ${c.color.primary}))`),containerElevation:o(`var(--m3e-primary-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-primary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-primary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-primary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-primary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-primary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-primary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-primary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-primary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onPrimary}))`),labelTextColor:o(`var(--m3e-primary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-primary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-primary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-primary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onPrimary}))`),labelTextColor:o(`var(--m3e-primary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-primary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-primary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-primary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onPrimary}))`),labelTextColor:o(`var(--m3e-primary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-primary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-primary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},secondary:{labelTextColor:o(`var(--m3e-secondary-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onSecondary}))`),iconColor:o(`var(--m3e-secondary-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onSecondary}))`),containerColor:o(`var(--m3e-secondary-fab-container-color, var(--m3e-fab-container-color, ${c.color.secondary}))`),containerElevation:o(`var(--m3e-secondary-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-secondary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-secondary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-secondary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-secondary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-secondary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-secondary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-secondary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-secondary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onSecondary}))`),labelTextColor:o(`var(--m3e-secondary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onSecondary}))`),stateLayerColor:o(`var(--m3e-secondary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onSecondary}))`),stateLayerOpacity:o(`var(--m3e-secondary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-secondary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onSecondary}))`),labelTextColor:o(`var(--m3e-secondary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onSecondary}))`),stateLayerColor:o(`var(--m3e-secondary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onSecondary}))`),stateLayerOpacity:o(`var(--m3e-secondary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-secondary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onSecondary}))`),labelTextColor:o(`var(--m3e-secondary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onSecondary}))`),stateLayerColor:o(`var(--m3e-secondary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onSecondary}))`),stateLayerOpacity:o(`var(--m3e-secondary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},tertiary:{labelTextColor:o(`var(--m3e-tertiary-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onTertiary}))`),iconColor:o(`var(--m3e-tertiary-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onTertiary}))`),containerColor:o(`var(--m3e-tertiary-fab-container-color, var(--m3e-fab-container-color, ${c.color.tertiary}))`),containerElevation:o(`var(--m3e-tertiary-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-tertiary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-tertiary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-tertiary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-tertiary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-tertiary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-tertiary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-tertiary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-tertiary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onTertiary}))`),labelTextColor:o(`var(--m3e-tertiary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onTertiary}))`),stateLayerColor:o(`var(--m3e-tertiary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onTertiary}))`),stateLayerOpacity:o(`var(--m3e-tertiary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-tertiary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onTertiary}))`),labelTextColor:o(`var(--m3e-tertiary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onTertiary}))`),stateLayerColor:o(`var(--m3e-tertiary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onTertiary}))`),stateLayerOpacity:o(`var(--m3e-tertiary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-tertiary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onTertiary}))`),labelTextColor:o(`var(--m3e-tertiary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onTertiary}))`),stateLayerColor:o(`var(--m3e-tertiary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onTertiary}))`),stateLayerOpacity:o(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},"primary-container":{labelTextColor:o(`var(--m3e-primary-container-fab-label-text-color, var(--m3e-primary-container-fab-label-text-color, ${c.color.onPrimaryContainer}))`),iconColor:o(`var(--m3e-primary-container-fab-icon-color, var(--m3e-primary-container-fab-icon-color, ${c.color.onPrimaryContainer}))`),containerColor:o(`var(--m3e-primary-container-fab-container-color, var(--m3e-fab-container-color, ${c.color.primaryContainer}))`),containerElevation:o(`var(--m3e-primary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-primary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-primary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-primary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-primary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-primary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-primary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-primary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-primary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onPrimaryContainer}))`),labelTextColor:o(`var(--m3e-primary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onPrimaryContainer}))`),stateLayerColor:o(`var(--m3e-primary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onPrimaryContainer}))`),stateLayerOpacity:o(`var(--m3e-primary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-primary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onPrimaryContainer}))`),labelTextColor:o(`var(--m3e-primary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onPrimaryContainer}))`),stateLayerColor:o(`var(--m3e-primary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onPrimaryContainer}))`),stateLayerOpacity:o(`var(--m3e-primary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-primary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onPrimaryContainer}))`),labelTextColor:o(`var(--m3e-primary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onPrimaryContainer}))`),stateLayerColor:o(`var(--m3e-primary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onPrimaryContainer}))`),stateLayerOpacity:o(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},"secondary-container":{labelTextColor:o(`var(--m3e-secondary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onSecondaryContainer}))`),iconColor:o(`var(--m3e-secondary-container-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onSecondaryContainer}))`),containerColor:o(`var(--m3e-secondary-container-fab-container-color, var(--m3e-fab-container-color, ${c.color.secondaryContainer}))`),containerElevation:o(`var(--m3e-secondary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-secondary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-secondary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-secondary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-secondary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-secondary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-secondary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-secondary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-secondary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-secondary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-secondary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-secondary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-secondary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-secondary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-secondary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-secondary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-secondary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},"tertiary-container":{labelTextColor:o(`var(--m3e-tertiary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onTertiaryContainer}))`),iconColor:o(`var(--m3e-tertiary-container-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onTertiaryContainer}))`),containerColor:o(`var(--m3e-tertiary-container-fab-container-color, var(--m3e-fab-container-color, ${c.color.tertiaryContainer}))`),containerElevation:o(`var(--m3e-tertiary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-tertiary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-tertiary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-tertiary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-tertiary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-tertiary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-tertiary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-tertiary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-tertiary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onTertiaryContainer}))`),labelTextColor:o(`var(--m3e-tertiary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onTertiaryContainer}))`),stateLayerColor:o(`var(--m3e-tertiary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onTertiaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-tertiary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onTertiaryContainer}))`),labelTextColor:o(`var(--m3e-tertiary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onTertiaryContainer}))`),stateLayerColor:o(`var(--m3e-tertiary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onTertiaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-tertiary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onTertiaryContainer}))`),labelTextColor:o(`var(--m3e-tertiary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onTertiaryContainer}))`),stateLayerColor:o(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onTertiaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},surface:{labelTextColor:o(`var(--m3e-surface-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.primary}))`),iconColor:o(`var(--m3e-surface-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.primary}))`),containerColor:o(`var(--m3e-surface-fab-container-color, var(--m3e-fab-container-color, ${c.color.surfaceContainerHigh}))`),containerElevation:o(`var(--m3e-surface-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),loweredContainerColor:o(`var(--m3e-surface-fab-lowered-container-color, var(--m3e-fab-lowered-container-color, ${c.color.surfaceContainerLow}))`),disabled:{containerColor:o(`var(--m3e-surface-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-surface-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-surface-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-surface-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-surface-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-surface-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-surface-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-surface-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.primary}))`),labelTextColor:o(`var(--m3e-surface-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.primary}))`),stateLayerColor:o(`var(--m3e-surface-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:o(`var(--m3e-surface-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-surface-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-surface-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.primary}))`),labelTextColor:o(`var(--m3e-surface-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.primary}))`),stateLayerColor:o(`var(--m3e-surface-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:o(`var(--m3e-surface-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-surface-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-surface-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.primary}))`),labelTextColor:o(`var(--m3e-surface-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.primary}))`),stateLayerColor:o(`var(--m3e-surface-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:o(`var(--m3e-surface-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-surface-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}}};function T(e){return r`:host([variant="${o(e)}"]:not([lowered])) .base { background-color: ${S[e].containerColor}; --m3e-elevation-level: ${S[e].containerElevation}; --m3e-elevation-hover-level: ${S[e].hover.containerElevation}; --m3e-elevation-focus-level: ${S[e].focus.containerElevation}; --m3e-elevation-pressed-level: ${S[e].pressed.containerElevation}; } :host([variant="${o(e)}"][lowered]) .base { background-color: ${S[e].loweredContainerColor??S[e].containerColor}; --m3e-elevation-level: ${S[e].loweredContainerElevation}; --m3e-elevation-hover-level: ${S[e].hover.loweredContainerElevation}; --m3e-elevation-focus-level: ${S[e].focus.loweredContainerElevation}; --m3e-elevation-pressed-level: ${S[e].pressed.loweredContainerElevation}; } :host([variant="${o(e)}"]) .base { --m3e-state-layer-hover-color: ${S[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${S[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${S[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${S[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${S[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${S[e].pressed.stateLayerOpacity}; } :host([variant="${o(e)}"]) .label { color: ${S[e].labelTextColor}; } :host([variant="${o(e)}"]:focus) .label { color: ${S[e].focus.labelTextColor}; } :host([variant="${o(e)}"]:hover) .label { color: ${S[e].hover.labelTextColor}; } :host([variant="${o(e)}"]) .base.pressed .label { color: ${S[e].pressed.labelTextColor}; } :host([variant="${o(e)}"]) .icon { color: ${S[e].iconColor}; } :host([variant="${o(e)}"]:focus) .icon { color: ${S[e].focus.iconColor}; } :host([variant="${o(e)}"]:hover) .icon { color: ${S[e].hover.iconColor}; } :host([variant="${o(e)}"]) .base.pressed .icon { color: ${S[e].pressed.iconColor}; } :host([variant="${o(e)}"]:disabled) .base, :host([variant="${o(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${S[e].disabled.containerElevation}; background-color: color-mix( in srgb, ${S[e].disabled.containerColor} ${S[e].disabled.containerOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .label, :host([variant="${o(e)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${S[e].disabled.labelTextColor} ${S[e].disabled.labelTextOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .icon, :host([variant="${o(e)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${S[e].disabled.iconColor} ${S[e].disabled.iconOpacity}, transparent ); }`}const L=[T("primary"),T("secondary"),T("tertiary"),T("primary-container"),T("secondary-container"),T("tertiary-container"),T("surface")];var E,O;let z=class extends(s(v(b(d(m(f(y(p(t,"button"),!0)))))))){constructor(){super(),E.add(this),this.variant="primary-container",this.lowered=!1,this.size="medium",this.extended=!1,new h(this,{isPressedKey:e=>" "===e,callback:e=>{this.disabled||this.disabledInteractive||(this._base?.classList.toggle("pressed",e),this._base?.classList.toggle("resting",!e))}})}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this._base?.classList.toggle("resting",!1)}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(this._base?.classList.toggle("pressed",!1),this._base?.classList.toggle("resting",!1))}render(){return l`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?centered="${!this.extended}" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[$]()}<div class="wrapper"><slot class="icon" aria-hidden="true" @slotchange="${e(this,E,"m",O)}"></slot><slot class="icon" aria-hidden="true" name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot><m3e-collapsible class="label-wrapper" orientation="horizontal" ?open="${this.extended}"><div class="label"><slot name="label" @slotchange="${e(this,E,"m",O)}"></slot></div></m3e-collapsible></div></div>`}};E=new WeakSet,O=function(){this._base?.classList.toggle("with-menu",null!==this.querySelector("m3e-fab-menu-trigger"))},z.styles=[w,L,x],a([i(".base")],z.prototype,"_base",void 0),a([i(".elevation")],z.prototype,"_elevation",void 0),a([i(".focus-ring")],z.prototype,"_focusRing",void 0),a([i(".state-layer")],z.prototype,"_stateLayer",void 0),a([i(".ripple")],z.prototype,"_ripple",void 0),a([n({reflect:!0})],z.prototype,"variant",void 0),a([n({type:Boolean,reflect:!0})],z.prototype,"lowered",void 0),a([n({reflect:!0})],z.prototype,"size",void 0),a([n({type:Boolean,reflect:!0})],z.prototype,"extended",void 0),z=a([u("m3e-fab")],z);export{z as M3eFabElement};
|
|
6
|
+
import{__classPrivateFieldGet as e,__decorate as a}from"tslib";import{unsafeCSS as o,css as r,LitElement as t,html as l}from"lit";import{query as i,property as n}from"lit/decorators.js";import{DesignToken as c,KeyboardClick as s,LinkButton as v,FormSubmitter as b,Focusable as d,DisabledInteractive as m,Disabled as f,AttachInternals as y,Role as p,PressedController as h,renderPseudoLink as $,customElement as u}from"@m3e/web/core";const x=r`: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: ${o(`background-color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { white-space: nowrap; transition: ${o(`color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } .icon { transition: ${o(`color ${c.motion.duration.short4} ${c.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; } .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, ${c.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${c.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${c.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${c.density.calc(-3)}); } :host([aria-expanded="true"]) .base.with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${c.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${c.density.calc(-3)}); } .base.with-menu { transition: height ${c.motion.spring.fastSpatial}; } .base.with-menu .wrapper { transition: padding ${c.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; } }`,C={small:{containerHeight:o(`calc(var(--m3e-fab-small-container-height, var(--m3e-fab-container-height, 3.5rem)) + ${c.density.calc(-3)})`),labelTextFontSize:o(`var(--m3e-fab-small-label-text-font-size, var(--m3e-fab-label-text-font-size, ${c.typescale.standard.title.medium.fontSize}))`),labelTextFontWeight:o(`var(--m3e-fab-small-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${c.typescale.standard.title.medium.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-fab-small-label-text-line-height, var(--m3e-fab-label-text-line-height, ${c.typescale.standard.title.medium.lineHeight}))`),labelTextTracking:o(`var(--m3e-fab-small-label-text-tracking, var(--m3e-fab-label-text-tracking, ${c.typescale.standard.title.medium.tracking}))`),iconSize:o("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),extendedIconSize:o("var(--m3e-fab-small-icon-size, var(--m3e-fab-icon-size, 1.5rem))"),shape:o(`var(--m3e-fab-small-shape, var(--m3e-fab-shape, ${c.shape.corner.large}))`),leadingSpace:o(`calc(var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem)) + calc(${c.density.calc(-3)} / 2))`),trailingSpace:o(`calc(var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem)) + calc(${c.density.calc(-3)} / 2))`),iconLabelSpace:o("var(--m3e-fab-small-icon-label-space, var(--m3e-fab-icon-label-space, 0.5rem))"),extendedLeadingSpace:o("var(--m3e-fab-small-leading-space, var(--m3e-fab-leading-space, 1rem))"),extendedTrailingSpace:o("var(--m3e-fab-small-trailing-space, var(--m3e-fab-trailing-space, 1rem))")},medium:{containerHeight:o(`calc(var(--m3e-fab-medium-container-height, var(--m3e-fab-container-height, 5rem)) + ${c.density.calc(-3)})`),labelTextFontSize:o(`var(--m3e-fab-medium-label-text-font-size, var(--m3e-fab-label-text-font-size, ${c.typescale.standard.title.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-fab-medium-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${c.typescale.standard.title.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-fab-medium-label-text-line-height, var(--m3e-fab-label-text-line-height, ${c.typescale.standard.title.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-fab-medium-label-text-tracking, var(--m3e-fab-label-text-tracking, ${c.typescale.standard.title.large.tracking}))`),iconSize:o("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),extendedIconSize:o("var(--m3e-fab-medium-icon-size, var(--m3e-fab-icon-size, 1.75rem))"),shape:o(`var(--m3e-fab-medium-shape, var(--m3e-fab-shape, ${c.shape.corner.largeIncreased}))`),leadingSpace:o(`calc(var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem)) + calc(${c.density.calc(-3)} / 2))`),trailingSpace:o(`calc(var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem)) + calc(${c.density.calc(-3)} / 2))`),iconLabelSpace:o("var(--m3e-fab-medium-icon-label-space, var(--m3e-fab-icon-label-space, 0.75rem))"),extendedLeadingSpace:o("var(--m3e-fab-medium-leading-space, var(--m3e-fab-leading-space, 1.625rem))"),extendedTrailingSpace:o("var(--m3e-fab-medium-trailing-space, var(--m3e-fab-trailing-space, 1.625rem))")},large:{containerHeight:o(`calc(var(--m3e-fab-large-container-height, var(--m3e-fab-container-height, 6rem)) + ${c.density.calc(-3)})`),labelTextFontSize:o(`var(--m3e-fab-large-label-text-font-size, var(--m3e-fab-label-text-font-size, ${c.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:o(`var(--m3e-fab-large-label-text-font-weight, var(--m3e-fab-label-text-font-weight, ${c.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-fab-large-label-text-line-height, var(--m3e-fab-label-text-line-height, ${c.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:o(`var(--m3e-fab-large-label-text-tracking, var(--m3e-fab-label-text-tracking, ${c.typescale.standard.headline.small.tracking}))`),iconSize:o("var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),extendedIconSize:o("var(--m3e-fab-large-icon-size, var(--m3e-fab-icon-size, 2.25rem))"),shape:o(`var(--m3e-fab-large-shape, var(--m3e-fab-shape, ${c.shape.corner.extraLarge}))`),leadingSpace:o(`calc(var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem)) + calc(${c.density.calc(-3)} / 2))`),trailingSpace:o(`calc(var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem)) + calc(${c.density.calc(-3)} / 2))`),iconLabelSpace:o("var(--m3e-fab-large-icon-label-space, var(--m3e-fab-icon-label-space, 1rem))"),extendedLeadingSpace:o("var(--m3e-fab-large-leading-space, var(--m3e-fab-leading-space, 1.75rem))"),extendedTrailingSpace:o("var(--m3e-fab-large-trailing-space, var(--m3e-fab-trailing-space, 1.75rem))")}};function g(e){return r`:host([size="${o(e)}"]) .base { height: ${C[e].containerHeight}; } :host([size="${o(e)}"]) .base { border-radius: ${C[e].shape}; } :host([size="${o(e)}"]) .label { font-size: ${C[e].labelTextFontSize}; font-weight: ${C[e].labelTextFontWeight}; line-height: ${C[e].labelTextLineHeight}; letter-spacing: ${C[e].labelTextTracking}; } :host([size="${o(e)}"]:not([extended])) .wrapper { padding-inline-start: ${C[e].leadingSpace}; padding-inline-end: ${C[e].trailingSpace}; } :host([size="${o(e)}"]:not([extended])) .icon { font-size: ${C[e].iconSize}; --m3e-icon-size: ${C[e].iconSize}; } :host([size="${o(e)}"][extended]) .wrapper { padding-inline-start: ${C[e].extendedLeadingSpace}; padding-inline-end: ${C[e].extendedTrailingSpace}; column-gap: ${C[e].iconLabelSpace}; } :host([size="${o(e)}"][extended]) .icon { font-size: ${C[e].extendedIconSize}; --m3e-icon-size: ${C[e].extendedIconSize}; }`}const w=[g("small"),g("medium"),g("large")],S={primary:{labelTextColor:o(`var(--m3e-primary-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onPrimary}))`),iconColor:o(`var(--m3e-primary-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onPrimary}))`),containerColor:o(`var(--m3e-primary-fab-container-color, var(--m3e-fab-container-color, ${c.color.primary}))`),containerElevation:o(`var(--m3e-primary-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-primary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-primary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-primary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-primary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-primary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-primary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-primary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-primary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onPrimary}))`),labelTextColor:o(`var(--m3e-primary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-primary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-primary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-primary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onPrimary}))`),labelTextColor:o(`var(--m3e-primary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-primary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-primary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-primary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onPrimary}))`),labelTextColor:o(`var(--m3e-primary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-primary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-primary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},secondary:{labelTextColor:o(`var(--m3e-secondary-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onSecondary}))`),iconColor:o(`var(--m3e-secondary-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onSecondary}))`),containerColor:o(`var(--m3e-secondary-fab-container-color, var(--m3e-fab-container-color, ${c.color.secondary}))`),containerElevation:o(`var(--m3e-secondary-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-secondary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-secondary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-secondary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-secondary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-secondary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-secondary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-secondary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-secondary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onSecondary}))`),labelTextColor:o(`var(--m3e-secondary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onSecondary}))`),stateLayerColor:o(`var(--m3e-secondary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onSecondary}))`),stateLayerOpacity:o(`var(--m3e-secondary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-secondary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onSecondary}))`),labelTextColor:o(`var(--m3e-secondary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onSecondary}))`),stateLayerColor:o(`var(--m3e-secondary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onSecondary}))`),stateLayerOpacity:o(`var(--m3e-secondary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-secondary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onSecondary}))`),labelTextColor:o(`var(--m3e-secondary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onSecondary}))`),stateLayerColor:o(`var(--m3e-secondary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onSecondary}))`),stateLayerOpacity:o(`var(--m3e-secondary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},tertiary:{labelTextColor:o(`var(--m3e-tertiary-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onTertiary}))`),iconColor:o(`var(--m3e-tertiary-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onTertiary}))`),containerColor:o(`var(--m3e-tertiary-fab-container-color, var(--m3e-fab-container-color, ${c.color.tertiary}))`),containerElevation:o(`var(--m3e-tertiary-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-tertiary-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-tertiary-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-tertiary-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-tertiary-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-tertiary-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-tertiary-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-tertiary-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-tertiary-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onTertiary}))`),labelTextColor:o(`var(--m3e-tertiary-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onTertiary}))`),stateLayerColor:o(`var(--m3e-tertiary-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onTertiary}))`),stateLayerOpacity:o(`var(--m3e-tertiary-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-tertiary-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onTertiary}))`),labelTextColor:o(`var(--m3e-tertiary-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onTertiary}))`),stateLayerColor:o(`var(--m3e-tertiary-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onTertiary}))`),stateLayerOpacity:o(`var(--m3e-tertiary-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-tertiary-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onTertiary}))`),labelTextColor:o(`var(--m3e-tertiary-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onTertiary}))`),stateLayerColor:o(`var(--m3e-tertiary-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onTertiary}))`),stateLayerOpacity:o(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},"primary-container":{labelTextColor:o(`var(--m3e-primary-container-fab-label-text-color, var(--m3e-primary-container-fab-label-text-color, ${c.color.onPrimaryContainer}))`),iconColor:o(`var(--m3e-primary-container-fab-icon-color, var(--m3e-primary-container-fab-icon-color, ${c.color.onPrimaryContainer}))`),containerColor:o(`var(--m3e-primary-container-fab-container-color, var(--m3e-fab-container-color, ${c.color.primaryContainer}))`),containerElevation:o(`var(--m3e-primary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-primary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-primary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-primary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-primary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-primary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-primary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-primary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-primary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onPrimaryContainer}))`),labelTextColor:o(`var(--m3e-primary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onPrimaryContainer}))`),stateLayerColor:o(`var(--m3e-primary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onPrimaryContainer}))`),stateLayerOpacity:o(`var(--m3e-primary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-primary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onPrimaryContainer}))`),labelTextColor:o(`var(--m3e-primary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onPrimaryContainer}))`),stateLayerColor:o(`var(--m3e-primary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onPrimaryContainer}))`),stateLayerOpacity:o(`var(--m3e-primary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-primary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onPrimaryContainer}))`),labelTextColor:o(`var(--m3e-primary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onPrimaryContainer}))`),stateLayerColor:o(`var(--m3e-primary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onPrimaryContainer}))`),stateLayerOpacity:o(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-primary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},"secondary-container":{labelTextColor:o(`var(--m3e-secondary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onSecondaryContainer}))`),iconColor:o(`var(--m3e-secondary-container-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onSecondaryContainer}))`),containerColor:o(`var(--m3e-secondary-container-fab-container-color, var(--m3e-fab-container-color, ${c.color.secondaryContainer}))`),containerElevation:o(`var(--m3e-secondary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-secondary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-secondary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-secondary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-secondary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-secondary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-secondary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-secondary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-secondary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-secondary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-secondary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-secondary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-secondary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-secondary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-secondary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-secondary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-secondary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-secondary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},"tertiary-container":{labelTextColor:o(`var(--m3e-tertiary-container-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.onTertiaryContainer}))`),iconColor:o(`var(--m3e-tertiary-container-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.onTertiaryContainer}))`),containerColor:o(`var(--m3e-tertiary-container-fab-container-color, var(--m3e-fab-container-color, ${c.color.tertiaryContainer}))`),containerElevation:o(`var(--m3e-tertiary-container-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),disabled:{containerColor:o(`var(--m3e-tertiary-container-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-tertiary-container-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-tertiary-container-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-tertiary-container-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-tertiary-container-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-tertiary-container-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-tertiary-container-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-tertiary-container-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.onTertiaryContainer}))`),labelTextColor:o(`var(--m3e-tertiary-container-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.onTertiaryContainer}))`),stateLayerColor:o(`var(--m3e-tertiary-container-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.onTertiaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-container-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-tertiary-container-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.onTertiaryContainer}))`),labelTextColor:o(`var(--m3e-tertiary-container-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.onTertiaryContainer}))`),stateLayerColor:o(`var(--m3e-tertiary-container-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.onTertiaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-container-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-tertiary-container-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.onTertiaryContainer}))`),labelTextColor:o(`var(--m3e-tertiary-container-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.onTertiaryContainer}))`),stateLayerColor:o(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.onTertiaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tertiary-container-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}},surface:{labelTextColor:o(`var(--m3e-surface-fab-label-text-color, var(--m3e-fab-label-text-color, ${c.color.primary}))`),iconColor:o(`var(--m3e-surface-fab-icon-color, var(--m3e-fab-icon-color, ${c.color.primary}))`),containerColor:o(`var(--m3e-surface-fab-container-color, var(--m3e-fab-container-color, ${c.color.surfaceContainerHigh}))`),containerElevation:o(`var(--m3e-surface-fab-container-elevation, var(--m3e-fab-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-container-elevation, var(--m3e-fab-lowered-container-elevation, ${c.elevation.level2}))`),loweredContainerColor:o(`var(--m3e-surface-fab-lowered-container-color, var(--m3e-fab-lowered-container-color, ${c.color.surfaceContainerLow}))`),disabled:{containerColor:o(`var(--m3e-surface-fab-disabled-container-color, var(--m3e-fab-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:o("var(--m3e-surface-fab-disabled-container-opacity, var(--m3e-fab-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-surface-fab-disabled-icon-color, var(--m3e-fab-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:o("var(--m3e-surface-fab-disabled-icon-opacity, var(--m3e-fab-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-surface-fab-disabled-label-text-color, var(--m3e-fab-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:o("var(--m3e-surface-fab-disabled-label-text-opacity, var(--m3e-fab-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-surface-fab-disabled-container-elevation, var(--m3e-fab-disabled-container-elevation, ${c.elevation.level0}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-disabled-container-elevation, var(--m3e-fab-lowered-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-surface-fab-hover-icon-color, var(--m3e-fab-hover-icon-color, ${c.color.primary}))`),labelTextColor:o(`var(--m3e-surface-fab-hover-label-text-color, var(--m3e-fab-hover-label-text-color, ${c.color.primary}))`),stateLayerColor:o(`var(--m3e-surface-fab-hover-state-layer-color, var(--m3e-fab-hover-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:o(`var(--m3e-surface-fab-hover-state-layer-opacity, var(--m3e-fab-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-surface-fab-hover-container-elevation, var(--m3e-fab-hover-container-elevation, ${c.elevation.level4}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-hover-container-elevation, var(--m3e-fab-lowered-hover-container-elevation, ${c.elevation.level3}))`)},focus:{iconColor:o(`var(--m3e-surface-fab-focus-icon-color, var(--m3e-fab-focus-icon-color, ${c.color.primary}))`),labelTextColor:o(`var(--m3e-surface-fab-focus-label-text-color, var(--m3e-fab-focus-label-text-color, ${c.color.primary}))`),stateLayerColor:o(`var(--m3e-surface-fab-focus-state-layer-color, var(--m3e-fab-focus-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:o(`var(--m3e-surface-fab-focus-state-layer-opacity, var(--m3e-fab-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-surface-fab-focus-container-elevation, var(--m3e-fab-focus-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-focus-container-elevation, var(--m3e-fab-lowered-focus-container-elevation, ${c.elevation.level2}))`)},pressed:{iconColor:o(`var(--m3e-surface-fab-pressed-icon-color, var(--m3e-fab-pressed-icon-color, ${c.color.primary}))`),labelTextColor:o(`var(--m3e-surface-fab-pressed-label-text-color, var(--m3e-fab-pressed-label-text-color, ${c.color.primary}))`),stateLayerColor:o(`var(--m3e-surface-fab-pressed-state-layer-color, var(--m3e-fab-pressed-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:o(`var(--m3e-surface-fab-pressed-state-layer-opacity, var(--m3e-fab-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-surface-fab-pressed-container-elevation, var(--m3e-fab-pressed-container-elevation, ${c.elevation.level3}))`),loweredContainerElevation:o(`var(--m3e-surface-fab-lowered-pressed-container-elevation, var(--m3e-fab-lowered-pressed-container-elevation, ${c.elevation.level2}))`)}}};function T(e){return r`:host([variant="${o(e)}"]:not([lowered])) .base { background-color: ${S[e].containerColor}; --m3e-elevation-level: ${S[e].containerElevation}; --m3e-elevation-hover-level: ${S[e].hover.containerElevation}; --m3e-elevation-focus-level: ${S[e].focus.containerElevation}; --m3e-elevation-pressed-level: ${S[e].pressed.containerElevation}; } :host([variant="${o(e)}"][lowered]) .base { background-color: ${S[e].loweredContainerColor??S[e].containerColor}; --m3e-elevation-level: ${S[e].loweredContainerElevation}; --m3e-elevation-hover-level: ${S[e].hover.loweredContainerElevation}; --m3e-elevation-focus-level: ${S[e].focus.loweredContainerElevation}; --m3e-elevation-pressed-level: ${S[e].pressed.loweredContainerElevation}; } :host([variant="${o(e)}"]) .base { --m3e-state-layer-hover-color: ${S[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${S[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${S[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${S[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${S[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${S[e].pressed.stateLayerOpacity}; } :host([variant="${o(e)}"]) .label { color: ${S[e].labelTextColor}; } :host([variant="${o(e)}"]:focus) .label { color: ${S[e].focus.labelTextColor}; } :host([variant="${o(e)}"]:hover) .label { color: ${S[e].hover.labelTextColor}; } :host([variant="${o(e)}"]) .base.pressed .label { color: ${S[e].pressed.labelTextColor}; } :host([variant="${o(e)}"]) .icon { color: ${S[e].iconColor}; } :host([variant="${o(e)}"]:focus) .icon { color: ${S[e].focus.iconColor}; } :host([variant="${o(e)}"]:hover) .icon { color: ${S[e].hover.iconColor}; } :host([variant="${o(e)}"]) .base.pressed .icon { color: ${S[e].pressed.iconColor}; } :host([variant="${o(e)}"]:disabled) .base, :host([variant="${o(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${S[e].disabled.containerElevation}; background-color: color-mix( in srgb, ${S[e].disabled.containerColor} ${S[e].disabled.containerOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .label, :host([variant="${o(e)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${S[e].disabled.labelTextColor} ${S[e].disabled.labelTextOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .icon, :host([variant="${o(e)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${S[e].disabled.iconColor} ${S[e].disabled.iconOpacity}, transparent ); }`}const L=[T("primary"),T("secondary"),T("tertiary"),T("primary-container"),T("secondary-container"),T("tertiary-container"),T("surface")];var E,O;let z=class extends(s(v(b(d(m(f(y(p(t,"button"),!0)))))))){constructor(){super(),E.add(this),this.variant="primary-container",this.lowered=!1,this.size="medium",this.extended=!1,new h(this,{isPressedKey:e=>" "===e,callback:e=>{this.disabled||this.disabledInteractive||(this._base?.classList.toggle("pressed",e),this._base?.classList.toggle("resting",!e))}})}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this._base?.classList.toggle("resting",!1)}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(this._base?.classList.toggle("pressed",!1),this._base?.classList.toggle("resting",!1))}render(){return l`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?centered="${!this.extended}" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[$]()}<div class="wrapper"><slot class="icon" aria-hidden="true" @slotchange="${e(this,E,"m",O)}"></slot><slot class="icon" aria-hidden="true" name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot><m3e-collapsible class="label-wrapper" orientation="horizontal" ?open="${this.extended}"><div class="label"><slot name="label" @slotchange="${e(this,E,"m",O)}"></slot></div></m3e-collapsible></div></div>`}};E=new WeakSet,O=function(){this._base?.classList.toggle("with-menu",null!==this.querySelector("m3e-fab-menu-trigger"))},z.styles=[w,L,x],a([i(".base")],z.prototype,"_base",void 0),a([i(".elevation")],z.prototype,"_elevation",void 0),a([i(".focus-ring")],z.prototype,"_focusRing",void 0),a([i(".state-layer")],z.prototype,"_stateLayer",void 0),a([i(".ripple")],z.prototype,"_ripple",void 0),a([n({reflect:!0})],z.prototype,"variant",void 0),a([n({type:Boolean,reflect:!0})],z.prototype,"lowered",void 0),a([n({reflect:!0})],z.prototype,"size",void 0),a([n({type:Boolean,reflect:!0})],z.prototype,"extended",void 0),z=a([u("m3e-fab")],z);export{z as M3eFabElement};
|
|
7
7
|
//# sourceMappingURL=fab.min.js.map
|