@m3e/fab 1.0.6 → 1.1.0

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.
Files changed (5) hide show
  1. package/dist/index.js +1041 -977
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +1 -272
  4. package/dist/index.min.js.map +1 -1
  5. package/package.json +2 -16
package/dist/index.min.js CHANGED
@@ -36,276 +36,5 @@ const H={attribute:!0,type:String,converter:R,reflect:!1,hasChanged:j},q=(e=H,a,
36
36
  * Copyright 2017 Google LLC
37
37
  * SPDX-License-Identifier: BSD-3-Clause
38
38
  */
39
- function W(e,a){return(a,t,o)=>((e,a,t)=>(t.configurable=!0,t.enumerable=!0,Reflect.decorate&&"object"!=typeof a&&Object.defineProperty(e,a,t),t))(a,t,{get(){return(a=>a.renderRoot?.querySelector(e)??null)(this)}})}const F=a`
40
- :host {
41
- display: inline-block;
42
- outline: none;
43
- user-select: none;
44
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
45
- }
46
- .base {
47
- box-sizing: border-box;
48
- vertical-align: middle;
49
- display: inline-flex;
50
- align-items: center;
51
- justify-content: center;
52
- position: relative;
53
- width: 100%;
54
- transition: ${e(`background-color ${r.motion.duration.short4} ${r.motion.easing.standard}`)};
55
- }
56
- .touch {
57
- position: absolute;
58
- height: 3rem;
59
- left: 0;
60
- right: 0;
61
- }
62
- .wrapper {
63
- width: 100%;
64
- overflow: hidden;
65
- display: inline-flex;
66
- align-items: center;
67
- }
68
- .label {
69
- justify-self: center;
70
- flex: 1 1 auto;
71
- text-align: center;
72
- white-space: nowrap;
73
- overflow: hidden;
74
- text-overflow: ellipsis;
75
- transition: ${e(`color ${r.motion.duration.short4} ${r.motion.easing.standard}`)};
76
- }
77
- .icon {
78
- transition: ${e(`color ${r.motion.duration.short4} ${r.motion.easing.standard}`)};
79
- }
80
- :host(:not(:disabled):not([disabled-interactive])) {
81
- cursor: pointer;
82
- }
83
- :host([disabled-interactive]) {
84
- cursor: not-allowed;
85
- }
86
- .close-icon,
87
- ::slotted(:not([slot])),
88
- ::slotted([slot="close-icon"]) {
89
- font-size: inherit !important;
90
- flex: none;
91
- }
92
- .close-icon,
93
- ::slotted(svg:not([slot])),
94
- ::slotted(svg[slot="close-icon"]) {
95
- width: 1em;
96
- height: 1em;
97
- }
98
- :host(:not([extended])) ::slotted([slot="label"]),
99
- .base.-with-menu ::slotted([slot="label"]),
100
- .base:not(.-with-menu) ::slotted([slot="close-icon"]),
101
- .base:not(.-with-menu) .close-icon,
102
- :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])),
103
- :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]),
104
- :host([aria-expanded="false"]) .base.-with-menu .close-icon {
105
- display: none;
106
- }
107
- :host([aria-expanded="true"]) .base.-with-menu {
108
- border-radius: var(--m3e-fab-menu-close-button-container-shape, ${r.shape.corner.full});
109
- height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${r.density.calc(-3)});
110
- }
111
- :host([aria-expanded="true"]) .base.-with-menu .wrapper {
112
- padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${r.density.calc(-3)});
113
- padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${r.density.calc(-3)});
114
- }
115
- :host([aria-expanded="true"]) .base.-with-menu .icon {
116
- font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${r.density.calc(-3)});
117
- --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${r.density.calc(-3)});
118
- }
119
- .base.-with-menu {
120
- transition: height ${r.motion.spring.fastSpatial};
121
- }
122
- .base.-with-menu .wrapper {
123
- transition: padding ${r.motion.spring.fastSpatial};
124
- }
125
- a {
126
- all: unset;
127
- display: block;
128
- position: absolute;
129
- top: 0px;
130
- left: 0px;
131
- right: 0px;
132
- bottom: 0px;
133
- z-index: 1;
134
- }
135
- @media (forced-colors: active) {
136
- .base,
137
- .icon {
138
- transition: none;
139
- }
140
- .base {
141
- outline-style: solid;
142
- }
143
- :host([variant]:not(:disabled):not([disabled-interactive])) .base {
144
- background-color: ButtonFace;
145
- outline-color: ButtonText;
146
- }
147
- :host([variant]:not(:disabled):not([disabled-interactive])) .label,
148
- :host([variant]:not(:disabled):not([disabled-interactive])) .icon {
149
- color: ButtonText;
150
- }
151
- :host([variant]:disabled) .base,
152
- :host([variant][disabled-interactive]) .base {
153
- outline-color: GrayText;
154
- background-color: unset;
155
- }
156
- :host([variant]:disabled) .label,
157
- :host([variant][disabled-interactive]) .label,
158
- :host([variant]:disabled) .icon,
159
- :host([variant][disabled-interactive]) .icon {
160
- color: GrayText;
161
- }
162
- :host([size="small"]) .base {
163
- outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px));
164
- outline-width: var(--m3e-button-small-outline-thickness, 1px);
165
- }
166
- :host([size="medium"]) .base {
167
- outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px));
168
- outline-width: var(--m3e-button-medium-outline-thickness, 1px);
169
- }
170
- :host([size="large"]) .base {
171
- outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem));
172
- outline-width: var(--m3e-button-large-outline-thickness, 0.125rem);
173
- }
174
- }
175
- @media (prefers-reduced-motion) {
176
- .base,
177
- .base.resting,
178
- .base.pressed,
179
- .label,
180
- .icon {
181
- transition: none;
182
- }
183
- }
184
- `,B={small:{containerHeight:e(`calc(var(--m3e-fab-small-container-height, 3.5rem) + ${r.density.calc(-3)})`),labelTextFontSize:e(`var(--m3e-fab-small-label-text-font-size, ${r.typescale.standard.title.medium.fontSize})`),labelTextFontWeight:e(`var(--m3e-fab-small-label-text-font-weight, ${r.typescale.standard.title.medium.fontWeight})`),labelTextLineHeight:e(`var(--m3e-fab-small-label-text-line-height, ${r.typescale.standard.title.medium.lineHeight})`),labelTextTracking:e(`var(--m3e-fab-small-label-text-tracking, ${r.typescale.standard.title.medium.tracking})`),iconSize:e(`calc(var(--m3e-fab-small-icon-size, 1.5rem) + ${r.density.calc(-3)})`),extendedIconSize:e("var(--m3e-fab-small-icon-size, 1.5rem)"),shape:e(`var(--m3e-fab-small-shape, ${r.shape.corner.large})`),leadingSpace:e(`calc(var(--m3e-fab-small-leading-space, 1rem) + ${r.density.calc(-3)})`),trailingSpace:e(`calc(var(--m3e-fab-small-trailing-space, 1rem) + ${r.density.calc(-3)})`),iconLabelSpace:e("var(--m3e-fab-small-icon-label-space, 0.5rem)"),extendedLeadingSpace:e("var(--m3e-fab-small-leading-space, 1rem)"),extendedTrailingSpace:e("var(--m3e-fab-small-trailing-space, 1rem)")},medium:{containerHeight:e(`calc(var(--m3e-fab-medium-container-height, 5rem) + ${r.density.calc(-3)})`),labelTextFontSize:e(`var(--m3e-fab-medium-label-text-font-size, ${r.typescale.standard.title.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-fab-medium-label-text-font-weight, ${r.typescale.standard.title.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-fab-medium-label-text-line-height, ${r.typescale.standard.title.large.lineHeight})`),labelTextTracking:e(`var(--m3e-fab-medium-label-text-tracking, ${r.typescale.standard.title.large.tracking})`),iconSize:e(`calc(var(--m3e-fab-medium-icon-size, 1.75rem) + ${r.density.calc(-3)})`),extendedIconSize:e("var(--m3e-fab-medium-icon-size, 1.75rem)"),shape:e(`var(--m3e-fab-medium-shape, ${r.shape.corner.largeIncreased})`),leadingSpace:e(`calc(var(--m3e-fab-medium-leading-space, 1.625rem) + ${r.density.calc(-3)})`),trailingSpace:e(`calc(var(--m3e-fab-medium-trailing-space, 1.625rem) + ${r.density.calc(-3)})`),iconLabelSpace:e("var(--m3e-fab-medium-icon-label-space, 0.75rem)"),extendedLeadingSpace:e("var(--m3e-fab-medium-leading-space, 1.625rem)"),extendedTrailingSpace:e("var(--m3e-fab-medium-trailing-space, 1.625rem)")},large:{containerHeight:e(`calc(var(--m3e-fab-large-container-height, 6rem) + ${r.density.calc(-3)})`),labelTextFontSize:e(`var(--m3e-fab-large-label-text-font-size, ${r.typescale.standard.headline.small.fontSize})`),labelTextFontWeight:e(`var(--m3e-fab-large-label-text-font-weight, ${r.typescale.standard.headline.small.fontWeight})`),labelTextLineHeight:e(`var(--m3e-fab-large-label-text-line-height, ${r.typescale.standard.headline.small.lineHeight})`),labelTextTracking:e(`var(--m3e-fab-large-label-text-tracking, ${r.typescale.standard.headline.small.tracking})`),iconSize:e(`calc(var(--m3e-fab-large-icon-size, 2.25rem) + ${r.density.calc(-3)})`),extendedIconSize:e("var(--m3e-fab-large-icon-size, 2.25rem)"),shape:e(`var(--m3e-fab-large-shape, ${r.shape.corner.extraLarge})`),leadingSpace:e(`calc(var(--m3e-fab-large-leading-space, 1.75rem) + ${r.density.calc(-3)})`),trailingSpace:e(`calc(var(--m3e-fab-large-trailing-space, 1.75rem) + ${r.density.calc(-3)})`),iconLabelSpace:e("var(--m3e-fab-large-icon-label-space, 1rem)"),extendedLeadingSpace:e("var(--m3e-fab-large-leading-space, 1.75rem)"),extendedTrailingSpace:e("var(--m3e-fab-large-trailing-space, 1.75rem)")}};function N(t){return a`
185
- :host([size="${e(t)}"]) .base {
186
- height: ${B[t].containerHeight};
187
- }
188
- :host([size="${e(t)}"]) .base {
189
- border-radius: ${B[t].shape};
190
- }
191
- :host([size="${e(t)}"]) .label {
192
- font-size: ${B[t].labelTextFontSize};
193
- font-weight: ${B[t].labelTextFontWeight};
194
- line-height: ${B[t].labelTextLineHeight};
195
- letter-spacing: ${B[t].labelTextTracking};
196
- }
197
- :host([size="${e(t)}"]:not([extended])) .wrapper {
198
- padding-inline-start: ${B[t].leadingSpace};
199
- padding-inline-end: ${B[t].trailingSpace};
200
- }
201
- :host([size="${e(t)}"]:not([extended])) .icon {
202
- font-size: ${B[t].iconSize};
203
- --m3e-icon-size: ${B[t].iconSize};
204
- }
205
- :host([size="${e(t)}"][extended]) .wrapper {
206
- padding-inline-start: ${B[t].extendedLeadingSpace};
207
- padding-inline-end: ${B[t].extendedTrailingSpace};
208
- column-gap: ${B[t].iconLabelSpace};
209
- }
210
- :host([size="${e(t)}"][extended]) .icon {
211
- font-size: ${B[t].extendedIconSize};
212
- --m3e-icon-size: ${B[t].extendedIconSize};
213
- }
214
- `}const K=[N("small"),N("medium"),N("large")],G={primary:{labelTextColor:e(`var(--m3e-primary-fab-label-text-color, ${r.color.onPrimary})`),iconColor:e(`var(--m3e-primary-fab-icon-color, ${r.color.onPrimary})`),containerColor:e(`var(--m3e-primary-fab-container-color, ${r.color.primary})`),containerElevation:e(`var(--m3e-primary-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-primary-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-primary-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-primary-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-primary-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-primary-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-primary-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-primary-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-primary-fab-hover-icon-color, ${r.color.onPrimary})`),labelTextColor:e(`var(--m3e-primary-fab-hover-label-text-color, ${r.color.onPrimary})`),stateLayerColor:e(`var(--m3e-primary-fab-hover-state-layer-color, ${r.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-primary-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-primary-fab-focus-icon-color, ${r.color.onPrimary})`),labelTextColor:e(`var(--m3e-primary-fab-focus-label-text-color, ${r.color.onPrimary})`),stateLayerColor:e(`var(--m3e-primary-fab-focus-state-layer-color, ${r.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-primary-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-primary-fab-pressed-icon-color, ${r.color.onPrimary})`),labelTextColor:e(`var(--m3e-primary-fab-pressed-label-text-color, ${r.color.onPrimary})`),stateLayerColor:e(`var(--m3e-primary-fab-pressed-state-layer-color, ${r.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-primary-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},secondary:{labelTextColor:e(`var(--m3e-secondary-fab-label-text-color, ${r.color.onSecondary})`),iconColor:e(`var(--m3e-secondary-fab-icon-color, ${r.color.onSecondary})`),containerColor:e(`var(--m3e-secondary-fab-container-color, ${r.color.secondary})`),containerElevation:e(`var(--m3e-secondary-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-secondary-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-secondary-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-secondary-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-secondary-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-secondary-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-secondary-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-secondary-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-secondary-fab-hover-icon-color, ${r.color.onSecondary})`),labelTextColor:e(`var(--m3e-secondary-fab-hover-label-text-color, ${r.color.onSecondary})`),stateLayerColor:e(`var(--m3e-secondary-fab-hover-state-layer-color, ${r.color.onSecondary})`),stateLayerOpacity:e(`var(--m3e-secondary-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-secondary-fab-focus-icon-color, ${r.color.onSecondary})`),labelTextColor:e(`var(--m3e-secondary-fab-focus-label-text-color, ${r.color.onSecondary})`),stateLayerColor:e(`var(--m3e-secondary-fab-focus-state-layer-color, ${r.color.onSecondary})`),stateLayerOpacity:e(`var(--m3e-secondary-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-secondary-fab-pressed-icon-color, ${r.color.onSecondary})`),labelTextColor:e(`var(--m3e-secondary-fab-pressed-label-text-color, ${r.color.onSecondary})`),stateLayerColor:e(`var(--m3e-secondary-fab-pressed-state-layer-color, ${r.color.onSecondary})`),stateLayerOpacity:e(`var(--m3e-secondary-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},tertiary:{labelTextColor:e(`var(--m3e-tertiary-fab-label-text-color, ${r.color.onTertiary})`),iconColor:e(`var(--m3e-tertiary-fab-icon-color, ${r.color.onTertiary})`),containerColor:e(`var(--m3e-tertiary-fab-container-color, ${r.color.tertiary})`),containerElevation:e(`var(--m3e-tertiary-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-tertiary-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-tertiary-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tertiary-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-tertiary-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-tertiary-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-tertiary-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-tertiary-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-tertiary-fab-hover-icon-color, ${r.color.onTertiary})`),labelTextColor:e(`var(--m3e-tertiary-fab-hover-label-text-color, ${r.color.onTertiary})`),stateLayerColor:e(`var(--m3e-tertiary-fab-hover-state-layer-color, ${r.color.onTertiary})`),stateLayerOpacity:e(`var(--m3e-tertiary-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-tertiary-fab-focus-icon-color, ${r.color.onTertiary})`),labelTextColor:e(`var(--m3e-tertiary-fab-focus-label-text-color, ${r.color.onTertiary})`),stateLayerColor:e(`var(--m3e-tertiary-fab-focus-state-layer-color, ${r.color.onTertiary})`),stateLayerOpacity:e(`var(--m3e-tertiary-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-tertiary-fab-pressed-icon-color, ${r.color.onTertiary})`),labelTextColor:e(`var(--m3e-tertiary-fab-pressed-label-text-color, ${r.color.onTertiary})`),stateLayerColor:e(`var(--m3e-tertiary-fab-pressed-state-layer-color, ${r.color.onTertiary})`),stateLayerOpacity:e(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},"primary-container":{labelTextColor:e(`var(--m3e-primary-container-fab-label-text-color, ${r.color.onPrimaryContainer})`),iconColor:e(`var(--m3e-primary-container-fab-icon-color, ${r.color.onPrimaryContainer})`),containerColor:e(`var(--m3e-primary-container-fab-container-color, ${r.color.primaryContainer})`),containerElevation:e(`var(--m3e-primary-container-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-primary-container-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-primary-container-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-primary-container-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-primary-container-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-primary-container-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-primary-container-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-primary-container-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-primary-container-fab-hover-icon-color, ${r.color.onPrimaryContainer})`),labelTextColor:e(`var(--m3e-primary-container-fab-hover-label-text-color, ${r.color.onPrimaryContainer})`),stateLayerColor:e(`var(--m3e-primary-container-fab-hover-state-layer-color, ${r.color.onPrimaryContainer})`),stateLayerOpacity:e(`var(--m3e-primary-container-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-container-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-primary-container-fab-focus-icon-color, ${r.color.onPrimaryContainer})`),labelTextColor:e(`var(--m3e-primary-container-fab-focus-label-text-color, ${r.color.onPrimaryContainer})`),stateLayerColor:e(`var(--m3e-primary-container-fab-focus-state-layer-color, ${r.color.onPrimaryContainer})`),stateLayerOpacity:e(`var(--m3e-primary-container-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-container-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-primary-container-fab-pressed-icon-color, ${r.color.onPrimaryContainer})`),labelTextColor:e(`var(--m3e-primary-container-fab-pressed-label-text-color, ${r.color.onPrimaryContainer})`),stateLayerColor:e(`var(--m3e-primary-container-fab-pressed-state-layer-color, ${r.color.onPrimaryContainer})`),stateLayerOpacity:e(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-container-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},"secondary-container":{labelTextColor:e(`var(--m3e-secondary-container-fab-label-text-color, ${r.color.onSecondaryContainer})`),iconColor:e(`var(--m3e-secondary-container-fab-icon-color, ${r.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-secondary-container-fab-container-color, ${r.color.secondaryContainer})`),containerElevation:e(`var(--m3e-secondary-container-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-secondary-container-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-secondary-container-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-secondary-container-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-secondary-container-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-secondary-container-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-secondary-container-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-secondary-container-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-secondary-container-fab-hover-icon-color, ${r.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-secondary-container-fab-hover-label-text-color, ${r.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-secondary-container-fab-hover-state-layer-color, ${r.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-container-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-secondary-container-fab-focus-icon-color, ${r.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-secondary-container-fab-focus-label-text-color, ${r.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-secondary-container-fab-focus-state-layer-color, ${r.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-container-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-secondary-container-fab-pressed-icon-color, ${r.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-secondary-container-fab-pressed-label-text-color, ${r.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-secondary-container-fab-pressed-state-layer-color, ${r.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-container-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},"tertiary-container":{labelTextColor:e(`var(--m3e-tertiary-container-fab-label-text-color, ${r.color.onTertiaryContainer})`),iconColor:e(`var(--m3e-tertiary-container-fab-icon-color, ${r.color.onTertiaryContainer})`),containerColor:e(`var(--m3e-tertiary-container-fab-container-color, ${r.color.tertiaryContainer})`),containerElevation:e(`var(--m3e-tertiary-container-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-tertiary-container-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-tertiary-container-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tertiary-container-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-tertiary-container-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-tertiary-container-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-tertiary-container-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-tertiary-container-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-tertiary-container-fab-hover-icon-color, ${r.color.onTertiaryContainer})`),labelTextColor:e(`var(--m3e-tertiary-container-fab-hover-label-text-color, ${r.color.onTertiaryContainer})`),stateLayerColor:e(`var(--m3e-tertiary-container-fab-hover-state-layer-color, ${r.color.onTertiaryContainer})`),stateLayerOpacity:e(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-container-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-tertiary-container-fab-focus-icon-color, ${r.color.onTertiaryContainer})`),labelTextColor:e(`var(--m3e-tertiary-container-fab-focus-label-text-color, ${r.color.onTertiaryContainer})`),stateLayerColor:e(`var(--m3e-tertiary-container-fab-focus-state-layer-color, ${r.color.onTertiaryContainer})`),stateLayerOpacity:e(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-container-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-tertiary-container-fab-pressed-icon-color, ${r.color.onTertiaryContainer})`),labelTextColor:e(`var(--m3e-tertiary-container-fab-pressed-label-text-color, ${r.color.onTertiaryContainer})`),stateLayerColor:e(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, ${r.color.onTertiaryContainer})`),stateLayerOpacity:e(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-container-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},surface:{labelTextColor:e(`var(--m3e-surface-fab-label-text-color, ${r.color.primary})`),iconColor:e(`var(--m3e-surface-fab-icon-color, ${r.color.primary})`),containerColor:e(`var(--m3e-surface-fab-container-color, ${r.color.surfaceContainerHigh})`),containerElevation:e(`var(--m3e-surface-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-container-elevation, ${r.elevation.level2})`),loweredContainerColor:e(`var(--m3e-surface-fab-lowered-container-color, ${r.color.surfaceContainerLow})`),disabled:{containerColor:e(`var(--m3e-surface-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-surface-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-surface-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-surface-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-surface-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-surface-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-surface-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-surface-fab-hover-icon-color, ${r.color.primary})`),labelTextColor:e(`var(--m3e-surface-fab-hover-label-text-color, ${r.color.primary})`),stateLayerColor:e(`var(--m3e-surface-fab-hover-state-layer-color, ${r.color.primary})`),stateLayerOpacity:e(`var(--m3e-surface-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-surface-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-surface-fab-focus-icon-color, ${r.color.primary})`),labelTextColor:e(`var(--m3e-surface-fab-focus-label-text-color, ${r.color.primary})`),stateLayerColor:e(`var(--m3e-surface-fab-focus-state-layer-color, ${r.color.primary})`),stateLayerOpacity:e(`var(--m3e-surface-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-surface-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-surface-fab-pressed-icon-color, ${r.color.primary})`),labelTextColor:e(`var(--m3e-surface-fab-pressed-label-text-color, ${r.color.primary})`),stateLayerColor:e(`var(--m3e-surface-fab-pressed-state-layer-color, ${r.color.primary})`),stateLayerOpacity:e(`var(--m3e-surface-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-surface-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}}};function J(t){return a`
215
- :host([variant="${e(t)}"]:not([lowered])) .base {
216
- background-color: ${G[t].containerColor};
217
- --m3e-elevation-level: ${G[t].containerElevation};
218
- --m3e-elevation-hover-level: ${G[t].hover.containerElevation};
219
- --m3e-elevation-focus-level: ${G[t].focus.containerElevation};
220
- --m3e-elevation-pressed-level: ${G[t].pressed.containerElevation};
221
- }
222
- :host([variant="${e(t)}"][lowered]) .base {
223
- background-color: ${G[t].loweredContainerColor??G[t].containerColor};
224
- --m3e-elevation-level: ${G[t].loweredContainerElevation};
225
- --m3e-elevation-hover-level: ${G[t].hover.loweredContainerElevation};
226
- --m3e-elevation-focus-level: ${G[t].focus.loweredContainerElevation};
227
- --m3e-elevation-pressed-level: ${G[t].pressed.loweredContainerElevation};
228
- }
229
- :host([variant="${e(t)}"]) .base {
230
- --m3e-state-layer-hover-color: ${G[t].hover.stateLayerColor};
231
- --m3e-state-layer-hover-opacity: ${G[t].hover.stateLayerOpacity};
232
- --m3e-state-layer-focus-color: ${G[t].focus.stateLayerColor};
233
- --m3e-state-layer-focus-opacity: ${G[t].focus.stateLayerOpacity};
234
- --m3e-ripple-color: ${G[t].pressed.stateLayerColor};
235
- --m3e-ripple-opacity: ${G[t].pressed.stateLayerOpacity};
236
- }
237
- :host([variant="${e(t)}"]) .label {
238
- color: ${G[t].labelTextColor};
239
- }
240
- :host([variant="${e(t)}"]:focus) .label {
241
- color: ${G[t].focus.labelTextColor};
242
- }
243
- :host([variant="${e(t)}"]:hover) .label {
244
- color: ${G[t].hover.labelTextColor};
245
- }
246
- :host([variant="${e(t)}"]) .base.pressed .label {
247
- color: ${G[t].pressed.labelTextColor};
248
- }
249
- :host([variant="${e(t)}"]) .icon {
250
- color: ${G[t].iconColor};
251
- }
252
- :host([variant="${e(t)}"]:focus) .icon {
253
- color: ${G[t].focus.iconColor};
254
- }
255
- :host([variant="${e(t)}"]:hover) .icon {
256
- color: ${G[t].hover.iconColor};
257
- }
258
- :host([variant="${e(t)}"]) .base.pressed .icon {
259
- color: ${G[t].pressed.iconColor};
260
- }
261
- :host([variant="${e(t)}"]:disabled) .base,
262
- :host([variant="${e(t)}"][disabled-interactive]) .base {
263
- --m3e-elevation-level: ${G[t].disabled.containerElevation};
264
- background-color: color-mix(
265
- in srgb,
266
- ${G[t].disabled.containerColor} ${G[t].disabled.containerOpacity},
267
- transparent
268
- );
269
- }
270
- :host([variant="${e(t)}"]:disabled) .label,
271
- :host([variant="${e(t)}"][disabled-interactive]) .label {
272
- color: color-mix(
273
- in srgb,
274
- ${G[t].disabled.labelTextColor} ${G[t].disabled.labelTextOpacity},
275
- transparent
276
- );
277
- }
278
- :host([variant="${e(t)}"]:disabled) .icon,
279
- :host([variant="${e(t)}"][disabled-interactive]) .icon {
280
- color: color-mix(
281
- in srgb,
282
- ${G[t].disabled.iconColor} ${G[t].disabled.iconOpacity},
283
- transparent
284
- );
285
- }
286
- `}const V=[J("primary"),J("secondary"),J("tertiary"),J("primary-container"),J("secondary-container"),J("tertiary-container"),J("surface")];var Z,Q;let X=class extends(i(n(l(c(s(d(v(y(t,"button"),!0)))))))){constructor(){super(),Z.add(this),this.variant="primary-container",this.lowered=!1,this.size="medium",this.extended=!1,new b(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 o`<div class="base">
287
- <m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation>
288
- <m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer>
289
- <m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
290
- <m3e-ripple
291
- class="ripple"
292
- ?centered="${!this.extended}"
293
- ?disabled="${this.disabled||this.disabledInteractive}"
294
- ></m3e-ripple>
295
- <div class="touch" aria-hidden="true"></div>
296
- ${this[m]()}
297
- <div class="wrapper">
298
- <slot class="icon" aria-hidden="true" @slotchange="${f(this,Z,"m",Q)}"></slot>
299
- <slot class="icon" aria-hidden="true" name="close-icon">
300
- <svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor">
301
- <path
302
- 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"
303
- />
304
- </svg>
305
- </slot>
306
- <div class="label">
307
- <slot name="label" @slotchange="${f(this,Z,"m",Q)}"></slot>
308
- </div>
309
- </div>
310
- </div>`}};Z=new WeakSet,Q=function(){this._base?.classList.toggle("-with-menu",null!==this.querySelector("m3e-fab-menu-trigger"))},X.styles=[K,V,F],p([W(".base")],X.prototype,"_base",void 0),p([W(".elevation")],X.prototype,"_elevation",void 0),p([W(".focus-ring")],X.prototype,"_focusRing",void 0),p([W(".state-layer")],X.prototype,"_stateLayer",void 0),p([W(".ripple")],X.prototype,"_ripple",void 0),p([D({reflect:!0})],X.prototype,"variant",void 0),p([D({type:Boolean,reflect:!0})],X.prototype,"lowered",void 0),p([D({reflect:!0})],X.prototype,"size",void 0),p([D({type:Boolean,reflect:!0})],X.prototype,"extended",void 0),X=p([(e=>(a,t)=>{void 0!==t?t.addInitializer(()=>{customElements.define(e,a)}):customElements.define(e,a)})("m3e-fab")],X);export{X as M3eFabElement};
39
+ function W(e,a){return(a,t,o)=>((e,a,t)=>(t.configurable=!0,t.enumerable=!0,Reflect.decorate&&"object"!=typeof a&&Object.defineProperty(e,a,t),t))(a,t,{get(){return(a=>a.renderRoot?.querySelector(e)??null)(this)}})}const F=a`: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: ${e(`background-color ${r.motion.duration.short4} ${r.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${e(`color ${r.motion.duration.short4} ${r.motion.easing.standard}`)}; } .icon { transition: ${e(`color ${r.motion.duration.short4} ${r.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .close-icon, ::slotted(:not([slot])), ::slotted([slot="close-icon"]) { font-size: inherit !important; flex: none; } .close-icon, ::slotted(svg:not([slot])), ::slotted(svg[slot="close-icon"]) { width: 1em; height: 1em; } :host(:not([extended])) ::slotted([slot="label"]), .base.-with-menu ::slotted([slot="label"]), .base:not(.-with-menu) ::slotted([slot="close-icon"]), .base:not(.-with-menu) .close-icon, :host([aria-expanded="true"]) .base.-with-menu ::slotted(:not([slot])), :host([aria-expanded="false"]) .base.-with-menu ::slotted([slot="close-icon"]), :host([aria-expanded="false"]) .base.-with-menu .close-icon { display: none; } :host([aria-expanded="true"]) .base.-with-menu { border-radius: var(--m3e-fab-menu-close-button-container-shape, ${r.shape.corner.full}); height: calc(var(--m3e-fab-menu-close-button-container-height, 3.5rem) + ${r.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .wrapper { padding-inline-start: calc(var(--m3e-fab-menu-close-button-leading-space, 1rem) + ${r.density.calc(-3)}); padding-inline-end: calc(var(--m3e-fab-menu-close-button-trailing-space, 1rem) + ${r.density.calc(-3)}); } :host([aria-expanded="true"]) .base.-with-menu .icon { font-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${r.density.calc(-3)}); --m3e-icon-size: calc(var(--m3e-fab-menu-close-button-icon-size, 1.5rem) + ${r.density.calc(-3)}); } .base.-with-menu { transition: height ${r.motion.spring.fastSpatial}; } .base.-with-menu .wrapper { transition: padding ${r.motion.spring.fastSpatial}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base, .icon { transition: none; } .base { outline-style: solid; } :host([variant]:not(:disabled):not([disabled-interactive])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])) .label, :host([variant]:not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-button-large-outline-thickness, 0.125rem); } } @media (prefers-reduced-motion) { .base, .base.resting, .base.pressed, .label, .icon { transition: none; } }`,B={small:{containerHeight:e(`calc(var(--m3e-fab-small-container-height, 3.5rem) + ${r.density.calc(-3)})`),labelTextFontSize:e(`var(--m3e-fab-small-label-text-font-size, ${r.typescale.standard.title.medium.fontSize})`),labelTextFontWeight:e(`var(--m3e-fab-small-label-text-font-weight, ${r.typescale.standard.title.medium.fontWeight})`),labelTextLineHeight:e(`var(--m3e-fab-small-label-text-line-height, ${r.typescale.standard.title.medium.lineHeight})`),labelTextTracking:e(`var(--m3e-fab-small-label-text-tracking, ${r.typescale.standard.title.medium.tracking})`),iconSize:e(`calc(var(--m3e-fab-small-icon-size, 1.5rem) + ${r.density.calc(-3)})`),extendedIconSize:e("var(--m3e-fab-small-icon-size, 1.5rem)"),shape:e(`var(--m3e-fab-small-shape, ${r.shape.corner.large})`),leadingSpace:e(`calc(var(--m3e-fab-small-leading-space, 1rem) + ${r.density.calc(-3)})`),trailingSpace:e(`calc(var(--m3e-fab-small-trailing-space, 1rem) + ${r.density.calc(-3)})`),iconLabelSpace:e("var(--m3e-fab-small-icon-label-space, 0.5rem)"),extendedLeadingSpace:e("var(--m3e-fab-small-leading-space, 1rem)"),extendedTrailingSpace:e("var(--m3e-fab-small-trailing-space, 1rem)")},medium:{containerHeight:e(`calc(var(--m3e-fab-medium-container-height, 5rem) + ${r.density.calc(-3)})`),labelTextFontSize:e(`var(--m3e-fab-medium-label-text-font-size, ${r.typescale.standard.title.large.fontSize})`),labelTextFontWeight:e(`var(--m3e-fab-medium-label-text-font-weight, ${r.typescale.standard.title.large.fontWeight})`),labelTextLineHeight:e(`var(--m3e-fab-medium-label-text-line-height, ${r.typescale.standard.title.large.lineHeight})`),labelTextTracking:e(`var(--m3e-fab-medium-label-text-tracking, ${r.typescale.standard.title.large.tracking})`),iconSize:e(`calc(var(--m3e-fab-medium-icon-size, 1.75rem) + ${r.density.calc(-3)})`),extendedIconSize:e("var(--m3e-fab-medium-icon-size, 1.75rem)"),shape:e(`var(--m3e-fab-medium-shape, ${r.shape.corner.largeIncreased})`),leadingSpace:e(`calc(var(--m3e-fab-medium-leading-space, 1.625rem) + ${r.density.calc(-3)})`),trailingSpace:e(`calc(var(--m3e-fab-medium-trailing-space, 1.625rem) + ${r.density.calc(-3)})`),iconLabelSpace:e("var(--m3e-fab-medium-icon-label-space, 0.75rem)"),extendedLeadingSpace:e("var(--m3e-fab-medium-leading-space, 1.625rem)"),extendedTrailingSpace:e("var(--m3e-fab-medium-trailing-space, 1.625rem)")},large:{containerHeight:e(`calc(var(--m3e-fab-large-container-height, 6rem) + ${r.density.calc(-3)})`),labelTextFontSize:e(`var(--m3e-fab-large-label-text-font-size, ${r.typescale.standard.headline.small.fontSize})`),labelTextFontWeight:e(`var(--m3e-fab-large-label-text-font-weight, ${r.typescale.standard.headline.small.fontWeight})`),labelTextLineHeight:e(`var(--m3e-fab-large-label-text-line-height, ${r.typescale.standard.headline.small.lineHeight})`),labelTextTracking:e(`var(--m3e-fab-large-label-text-tracking, ${r.typescale.standard.headline.small.tracking})`),iconSize:e(`calc(var(--m3e-fab-large-icon-size, 2.25rem) + ${r.density.calc(-3)})`),extendedIconSize:e("var(--m3e-fab-large-icon-size, 2.25rem)"),shape:e(`var(--m3e-fab-large-shape, ${r.shape.corner.extraLarge})`),leadingSpace:e(`calc(var(--m3e-fab-large-leading-space, 1.75rem) + ${r.density.calc(-3)})`),trailingSpace:e(`calc(var(--m3e-fab-large-trailing-space, 1.75rem) + ${r.density.calc(-3)})`),iconLabelSpace:e("var(--m3e-fab-large-icon-label-space, 1rem)"),extendedLeadingSpace:e("var(--m3e-fab-large-leading-space, 1.75rem)"),extendedTrailingSpace:e("var(--m3e-fab-large-trailing-space, 1.75rem)")}};function N(t){return a`:host([size="${e(t)}"]) .base { height: ${B[t].containerHeight}; } :host([size="${e(t)}"]) .base { border-radius: ${B[t].shape}; } :host([size="${e(t)}"]) .label { font-size: ${B[t].labelTextFontSize}; font-weight: ${B[t].labelTextFontWeight}; line-height: ${B[t].labelTextLineHeight}; letter-spacing: ${B[t].labelTextTracking}; } :host([size="${e(t)}"]:not([extended])) .wrapper { padding-inline-start: ${B[t].leadingSpace}; padding-inline-end: ${B[t].trailingSpace}; } :host([size="${e(t)}"]:not([extended])) .icon { font-size: ${B[t].iconSize}; --m3e-icon-size: ${B[t].iconSize}; } :host([size="${e(t)}"][extended]) .wrapper { padding-inline-start: ${B[t].extendedLeadingSpace}; padding-inline-end: ${B[t].extendedTrailingSpace}; column-gap: ${B[t].iconLabelSpace}; } :host([size="${e(t)}"][extended]) .icon { font-size: ${B[t].extendedIconSize}; --m3e-icon-size: ${B[t].extendedIconSize}; }`}const K=[N("small"),N("medium"),N("large")],G={primary:{labelTextColor:e(`var(--m3e-primary-fab-label-text-color, ${r.color.onPrimary})`),iconColor:e(`var(--m3e-primary-fab-icon-color, ${r.color.onPrimary})`),containerColor:e(`var(--m3e-primary-fab-container-color, ${r.color.primary})`),containerElevation:e(`var(--m3e-primary-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-primary-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-primary-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-primary-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-primary-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-primary-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-primary-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-primary-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-primary-fab-hover-icon-color, ${r.color.onPrimary})`),labelTextColor:e(`var(--m3e-primary-fab-hover-label-text-color, ${r.color.onPrimary})`),stateLayerColor:e(`var(--m3e-primary-fab-hover-state-layer-color, ${r.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-primary-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-primary-fab-focus-icon-color, ${r.color.onPrimary})`),labelTextColor:e(`var(--m3e-primary-fab-focus-label-text-color, ${r.color.onPrimary})`),stateLayerColor:e(`var(--m3e-primary-fab-focus-state-layer-color, ${r.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-primary-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-primary-fab-pressed-icon-color, ${r.color.onPrimary})`),labelTextColor:e(`var(--m3e-primary-fab-pressed-label-text-color, ${r.color.onPrimary})`),stateLayerColor:e(`var(--m3e-primary-fab-pressed-state-layer-color, ${r.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-primary-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},secondary:{labelTextColor:e(`var(--m3e-secondary-fab-label-text-color, ${r.color.onSecondary})`),iconColor:e(`var(--m3e-secondary-fab-icon-color, ${r.color.onSecondary})`),containerColor:e(`var(--m3e-secondary-fab-container-color, ${r.color.secondary})`),containerElevation:e(`var(--m3e-secondary-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-secondary-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-secondary-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-secondary-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-secondary-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-secondary-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-secondary-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-secondary-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-secondary-fab-hover-icon-color, ${r.color.onSecondary})`),labelTextColor:e(`var(--m3e-secondary-fab-hover-label-text-color, ${r.color.onSecondary})`),stateLayerColor:e(`var(--m3e-secondary-fab-hover-state-layer-color, ${r.color.onSecondary})`),stateLayerOpacity:e(`var(--m3e-secondary-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-secondary-fab-focus-icon-color, ${r.color.onSecondary})`),labelTextColor:e(`var(--m3e-secondary-fab-focus-label-text-color, ${r.color.onSecondary})`),stateLayerColor:e(`var(--m3e-secondary-fab-focus-state-layer-color, ${r.color.onSecondary})`),stateLayerOpacity:e(`var(--m3e-secondary-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-secondary-fab-pressed-icon-color, ${r.color.onSecondary})`),labelTextColor:e(`var(--m3e-secondary-fab-pressed-label-text-color, ${r.color.onSecondary})`),stateLayerColor:e(`var(--m3e-secondary-fab-pressed-state-layer-color, ${r.color.onSecondary})`),stateLayerOpacity:e(`var(--m3e-secondary-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},tertiary:{labelTextColor:e(`var(--m3e-tertiary-fab-label-text-color, ${r.color.onTertiary})`),iconColor:e(`var(--m3e-tertiary-fab-icon-color, ${r.color.onTertiary})`),containerColor:e(`var(--m3e-tertiary-fab-container-color, ${r.color.tertiary})`),containerElevation:e(`var(--m3e-tertiary-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-tertiary-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-tertiary-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tertiary-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-tertiary-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-tertiary-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-tertiary-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-tertiary-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-tertiary-fab-hover-icon-color, ${r.color.onTertiary})`),labelTextColor:e(`var(--m3e-tertiary-fab-hover-label-text-color, ${r.color.onTertiary})`),stateLayerColor:e(`var(--m3e-tertiary-fab-hover-state-layer-color, ${r.color.onTertiary})`),stateLayerOpacity:e(`var(--m3e-tertiary-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-tertiary-fab-focus-icon-color, ${r.color.onTertiary})`),labelTextColor:e(`var(--m3e-tertiary-fab-focus-label-text-color, ${r.color.onTertiary})`),stateLayerColor:e(`var(--m3e-tertiary-fab-focus-state-layer-color, ${r.color.onTertiary})`),stateLayerOpacity:e(`var(--m3e-tertiary-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-tertiary-fab-pressed-icon-color, ${r.color.onTertiary})`),labelTextColor:e(`var(--m3e-tertiary-fab-pressed-label-text-color, ${r.color.onTertiary})`),stateLayerColor:e(`var(--m3e-tertiary-fab-pressed-state-layer-color, ${r.color.onTertiary})`),stateLayerOpacity:e(`var(--m3e-tertiary-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},"primary-container":{labelTextColor:e(`var(--m3e-primary-container-fab-label-text-color, ${r.color.onPrimaryContainer})`),iconColor:e(`var(--m3e-primary-container-fab-icon-color, ${r.color.onPrimaryContainer})`),containerColor:e(`var(--m3e-primary-container-fab-container-color, ${r.color.primaryContainer})`),containerElevation:e(`var(--m3e-primary-container-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-primary-container-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-primary-container-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-primary-container-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-primary-container-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-primary-container-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-primary-container-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-primary-container-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-primary-container-fab-hover-icon-color, ${r.color.onPrimaryContainer})`),labelTextColor:e(`var(--m3e-primary-container-fab-hover-label-text-color, ${r.color.onPrimaryContainer})`),stateLayerColor:e(`var(--m3e-primary-container-fab-hover-state-layer-color, ${r.color.onPrimaryContainer})`),stateLayerOpacity:e(`var(--m3e-primary-container-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-container-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-primary-container-fab-focus-icon-color, ${r.color.onPrimaryContainer})`),labelTextColor:e(`var(--m3e-primary-container-fab-focus-label-text-color, ${r.color.onPrimaryContainer})`),stateLayerColor:e(`var(--m3e-primary-container-fab-focus-state-layer-color, ${r.color.onPrimaryContainer})`),stateLayerOpacity:e(`var(--m3e-primary-container-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-container-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-primary-container-fab-pressed-icon-color, ${r.color.onPrimaryContainer})`),labelTextColor:e(`var(--m3e-primary-container-fab-pressed-label-text-color, ${r.color.onPrimaryContainer})`),stateLayerColor:e(`var(--m3e-primary-container-fab-pressed-state-layer-color, ${r.color.onPrimaryContainer})`),stateLayerOpacity:e(`var(--m3e-primary-container-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-primary-container-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-primary-container-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},"secondary-container":{labelTextColor:e(`var(--m3e-secondary-container-fab-label-text-color, ${r.color.onSecondaryContainer})`),iconColor:e(`var(--m3e-secondary-container-fab-icon-color, ${r.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-secondary-container-fab-container-color, ${r.color.secondaryContainer})`),containerElevation:e(`var(--m3e-secondary-container-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-secondary-container-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-secondary-container-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-secondary-container-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-secondary-container-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-secondary-container-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-secondary-container-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-secondary-container-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-secondary-container-fab-hover-icon-color, ${r.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-secondary-container-fab-hover-label-text-color, ${r.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-secondary-container-fab-hover-state-layer-color, ${r.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-secondary-container-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-container-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-secondary-container-fab-focus-icon-color, ${r.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-secondary-container-fab-focus-label-text-color, ${r.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-secondary-container-fab-focus-state-layer-color, ${r.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-secondary-container-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-container-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-secondary-container-fab-pressed-icon-color, ${r.color.onSecondaryContainer})`),labelTextColor:e(`var(--m3e-secondary-container-fab-pressed-label-text-color, ${r.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-secondary-container-fab-pressed-state-layer-color, ${r.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-secondary-container-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-secondary-container-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-secondary-container-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},"tertiary-container":{labelTextColor:e(`var(--m3e-tertiary-container-fab-label-text-color, ${r.color.onTertiaryContainer})`),iconColor:e(`var(--m3e-tertiary-container-fab-icon-color, ${r.color.onTertiaryContainer})`),containerColor:e(`var(--m3e-tertiary-container-fab-container-color, ${r.color.tertiaryContainer})`),containerElevation:e(`var(--m3e-tertiary-container-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-container-elevation, ${r.elevation.level2})`),disabled:{containerColor:e(`var(--m3e-tertiary-container-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-tertiary-container-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tertiary-container-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-tertiary-container-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-tertiary-container-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-tertiary-container-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-tertiary-container-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-tertiary-container-fab-hover-icon-color, ${r.color.onTertiaryContainer})`),labelTextColor:e(`var(--m3e-tertiary-container-fab-hover-label-text-color, ${r.color.onTertiaryContainer})`),stateLayerColor:e(`var(--m3e-tertiary-container-fab-hover-state-layer-color, ${r.color.onTertiaryContainer})`),stateLayerOpacity:e(`var(--m3e-tertiary-container-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-container-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-tertiary-container-fab-focus-icon-color, ${r.color.onTertiaryContainer})`),labelTextColor:e(`var(--m3e-tertiary-container-fab-focus-label-text-color, ${r.color.onTertiaryContainer})`),stateLayerColor:e(`var(--m3e-tertiary-container-fab-focus-state-layer-color, ${r.color.onTertiaryContainer})`),stateLayerOpacity:e(`var(--m3e-tertiary-container-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-container-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-tertiary-container-fab-pressed-icon-color, ${r.color.onTertiaryContainer})`),labelTextColor:e(`var(--m3e-tertiary-container-fab-pressed-label-text-color, ${r.color.onTertiaryContainer})`),stateLayerColor:e(`var(--m3e-tertiary-container-fab-pressed-state-layer-color, ${r.color.onTertiaryContainer})`),stateLayerOpacity:e(`var(--m3e-tertiary-container-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-tertiary-container-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-tertiary-container-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}},surface:{labelTextColor:e(`var(--m3e-surface-fab-label-text-color, ${r.color.primary})`),iconColor:e(`var(--m3e-surface-fab-icon-color, ${r.color.primary})`),containerColor:e(`var(--m3e-surface-fab-container-color, ${r.color.surfaceContainerHigh})`),containerElevation:e(`var(--m3e-surface-fab-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-container-elevation, ${r.elevation.level2})`),loweredContainerColor:e(`var(--m3e-surface-fab-lowered-container-color, ${r.color.surfaceContainerLow})`),disabled:{containerColor:e(`var(--m3e-surface-fab-disabled-container-color, ${r.color.onSurface})`),containerOpacity:e("var(--m3e-surface-fab-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-surface-fab-disabled-icon-color, ${r.color.onSurface})`),iconOpacity:e("var(--m3e-surface-fab-disabled-icon-opacity, 38%)"),labelTextColor:e(`var(--m3e-surface-fab-disabled-label-text-color, ${r.color.onSurface})`),labelTextOpacity:e("var(--m3e-surface-fab-disabled-label-text-opacity, 38%)"),containerElevation:e(`var(--m3e-surface-fab-disabled-container-elevation, ${r.elevation.level0})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-disabled-container-elevation, ${r.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-surface-fab-hover-icon-color, ${r.color.primary})`),labelTextColor:e(`var(--m3e-surface-fab-hover-label-text-color, ${r.color.primary})`),stateLayerColor:e(`var(--m3e-surface-fab-hover-state-layer-color, ${r.color.primary})`),stateLayerOpacity:e(`var(--m3e-surface-fab-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-surface-fab-hover-container-elevation, ${r.elevation.level4})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-hover-container-elevation, ${r.elevation.level3})`)},focus:{iconColor:e(`var(--m3e-surface-fab-focus-icon-color, ${r.color.primary})`),labelTextColor:e(`var(--m3e-surface-fab-focus-label-text-color, ${r.color.primary})`),stateLayerColor:e(`var(--m3e-surface-fab-focus-state-layer-color, ${r.color.primary})`),stateLayerOpacity:e(`var(--m3e-surface-fab-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-surface-fab-focus-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-focus-container-elevation, ${r.elevation.level2})`)},pressed:{iconColor:e(`var(--m3e-surface-fab-pressed-icon-color, ${r.color.primary})`),labelTextColor:e(`var(--m3e-surface-fab-pressed-label-text-color, ${r.color.primary})`),stateLayerColor:e(`var(--m3e-surface-fab-pressed-state-layer-color, ${r.color.primary})`),stateLayerOpacity:e(`var(--m3e-surface-fab-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-surface-fab-pressed-container-elevation, ${r.elevation.level3})`),loweredContainerElevation:e(`var(--m3e-surface-fab-lowered-pressed-container-elevation, ${r.elevation.level2})`)}}};function J(t){return a`:host([variant="${e(t)}"]:not([lowered])) .base { background-color: ${G[t].containerColor}; --m3e-elevation-level: ${G[t].containerElevation}; --m3e-elevation-hover-level: ${G[t].hover.containerElevation}; --m3e-elevation-focus-level: ${G[t].focus.containerElevation}; --m3e-elevation-pressed-level: ${G[t].pressed.containerElevation}; } :host([variant="${e(t)}"][lowered]) .base { background-color: ${G[t].loweredContainerColor??G[t].containerColor}; --m3e-elevation-level: ${G[t].loweredContainerElevation}; --m3e-elevation-hover-level: ${G[t].hover.loweredContainerElevation}; --m3e-elevation-focus-level: ${G[t].focus.loweredContainerElevation}; --m3e-elevation-pressed-level: ${G[t].pressed.loweredContainerElevation}; } :host([variant="${e(t)}"]) .base { --m3e-state-layer-hover-color: ${G[t].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${G[t].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${G[t].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${G[t].focus.stateLayerOpacity}; --m3e-ripple-color: ${G[t].pressed.stateLayerColor}; --m3e-ripple-opacity: ${G[t].pressed.stateLayerOpacity}; } :host([variant="${e(t)}"]) .label { color: ${G[t].labelTextColor}; } :host([variant="${e(t)}"]:focus) .label { color: ${G[t].focus.labelTextColor}; } :host([variant="${e(t)}"]:hover) .label { color: ${G[t].hover.labelTextColor}; } :host([variant="${e(t)}"]) .base.pressed .label { color: ${G[t].pressed.labelTextColor}; } :host([variant="${e(t)}"]) .icon { color: ${G[t].iconColor}; } :host([variant="${e(t)}"]:focus) .icon { color: ${G[t].focus.iconColor}; } :host([variant="${e(t)}"]:hover) .icon { color: ${G[t].hover.iconColor}; } :host([variant="${e(t)}"]) .base.pressed .icon { color: ${G[t].pressed.iconColor}; } :host([variant="${e(t)}"]:disabled) .base, :host([variant="${e(t)}"][disabled-interactive]) .base { --m3e-elevation-level: ${G[t].disabled.containerElevation}; background-color: color-mix( in srgb, ${G[t].disabled.containerColor} ${G[t].disabled.containerOpacity}, transparent ); } :host([variant="${e(t)}"]:disabled) .label, :host([variant="${e(t)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${G[t].disabled.labelTextColor} ${G[t].disabled.labelTextOpacity}, transparent ); } :host([variant="${e(t)}"]:disabled) .icon, :host([variant="${e(t)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${G[t].disabled.iconColor} ${G[t].disabled.iconOpacity}, transparent ); }`}const V=[J("primary"),J("secondary"),J("tertiary"),J("primary-container"),J("secondary-container"),J("tertiary-container"),J("surface")];var Z,Q;let X=class extends(i(n(l(c(s(d(v(y(t,"button"),!0)))))))){constructor(){super(),Z.add(this),this.variant="primary-container",this.lowered=!1,this.size="medium",this.extended=!1,new b(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 o`<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[m]()}<div class="wrapper"><slot class="icon" aria-hidden="true" @slotchange="${f(this,Z,"m",Q)}"></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><div class="label"><slot name="label" @slotchange="${f(this,Z,"m",Q)}"></slot></div></div></div>`}};Z=new WeakSet,Q=function(){this._base?.classList.toggle("-with-menu",null!==this.querySelector("m3e-fab-menu-trigger"))},X.styles=[K,V,F],p([W(".base")],X.prototype,"_base",void 0),p([W(".elevation")],X.prototype,"_elevation",void 0),p([W(".focus-ring")],X.prototype,"_focusRing",void 0),p([W(".state-layer")],X.prototype,"_stateLayer",void 0),p([W(".ripple")],X.prototype,"_ripple",void 0),p([D({reflect:!0})],X.prototype,"variant",void 0),p([D({type:Boolean,reflect:!0})],X.prototype,"lowered",void 0),p([D({reflect:!0})],X.prototype,"size",void 0),p([D({type:Boolean,reflect:!0})],X.prototype,"extended",void 0),X=p([(e=>(a,t)=>{void 0!==t?t.addInitializer(()=>{customElements.define(e,a)}):customElements.define(e,a)})("m3e-fab")],X);export{X as M3eFabElement};
311
40
  //# sourceMappingURL=index.min.js.map