@m3e/split-button 1.0.5 → 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 +501 -401
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +1 -253
  4. package/dist/index.min.js.map +1 -1
  5. package/package.json +5 -19
package/dist/index.min.js CHANGED
@@ -30,259 +30,7 @@ const k={attribute:!0,type:String,converter:C,reflect:!1,hasChanged:A},j=(t=k,e,
30
30
  * @license
31
31
  * Copyright 2017 Google LLC
32
32
  * SPDX-License-Identifier: BSD-3-Clause
33
- */var D,q,L,W,I,N,K,B,H,J,V,F;let G=class extends(s(t,"group")){constructor(){super(...arguments),D.add(this),q.set(this,void 0),L.set(this,void 0),W.set(this,!1),I.set(this,new n(this,{target:null,capture:!0,isPressedKey:t=>" "===t,callback:(t,e,i)=>{switch(i){case u(this,q,"f"):u(this,D,"m",J).call(this,t);break;case u(this,L,"f"):u(this,D,"m",V).call(this,t||u(this,W,"f"))}}})),N.set(this,new r(this,{target:null,callback:(t,e)=>{if(e===u(this,L,"f"))u(this,L,"f")?.disabled||u(this,L,"f")?.disabledInteractive||(p(this,W,t,"f"),u(this,D,"m",V).call(this,t))}})),this.variant="filled",this.size="small"}update(t){super.update(t),t.has("variant")&&u(this,D,"m",H).call(this)}render(){return e`<m3e-button-group class="base" disable-role variant="connected" size="${this.size}">
34
- <slot name="leading-button" @slotchange="${u(this,D,"m",K)}"></slot>
35
- <slot name="trailing-button" @slotchange="${u(this,D,"m",B)}"></slot>
36
- </m3e-button-group>`}};q=new WeakMap,L=new WeakMap,W=new WeakMap,I=new WeakMap,N=new WeakMap,D=new WeakSet,K=function(t){u(this,q,"f")&&u(this,I,"f").unobserve(u(this,q,"f")),p(this,q,t.target.assignedElements({flatten:!0}).find(t=>t instanceof o),"f"),u(this,q,"f")&&u(this,I,"f").observe(u(this,q,"f")),u(this,D,"m",H).call(this)},B=function(t){u(this,L,"f")&&(u(this,I,"f").unobserve(u(this,L,"f")),u(this,N,"f").unobserve(u(this,L,"f"))),p(this,L,t.target.assignedElements({flatten:!0}).find(t=>t instanceof l),"f"),u(this,L,"f")&&(u(this,I,"f").observe(u(this,L,"f")),u(this,N,"f").observe(u(this,L,"f"))),u(this,D,"m",H).call(this)},H=function(){u(this,q,"f")&&(u(this,q,"f").variant=this.variant,u(this,q,"f").size=this.size,u(this,q,"f").shape="rounded"),u(this,L,"f")&&(u(this,L,"f").width="default",u(this,L,"f").shape="rounded",u(this,L,"f").setAttribute("variant",this.variant),u(this,L,"f").size=this.size)},J=function(t){t&&u(this,q,"f")?u(this,D,"m",F).call(this,u(this,q,"f"),"--_leading-button-shape"):this._base?.style.removeProperty("--_leading-button-shape")},V=function(t){t&&u(this,L,"f")?u(this,D,"m",F).call(this,u(this,L,"f"),"--_trailing-button-shape"):this._base?.style.removeProperty("--_trailing-button-shape")},F=function(t,e){const i=t.clientHeight/2;i&&this._base?.style.setProperty(e,`${i}px`)},G.styles=i`
37
- :host {
38
- display: inline-flex;
39
- vertical-align: middle;
40
- }
41
- ::slotted([slot="leading-button"]) {
42
- flex: 1 1 auto;
43
- min-width: 0;
44
- --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${a.shape.corner.full});
45
- }
46
-
47
- ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) {
48
- --m3e-icon-button-extra-small-default-leading-space: var(
49
- --m3e-split-button-extra-small-trailing-button-unselected-leading-space,
50
- 0.75rem
51
- );
52
- --m3e-icon-button-extra-small-default-trailing-space: var(
53
- --m3e-split-button-extra-small-trailing-button-unselected-trailing-space,
54
- 0.875rem
55
- );
56
- --m3e-icon-button-small-default-leading-space: var(
57
- --m3e-split-button-small-trailing-button-unselected-leading-space,
58
- 0.75rem
59
- );
60
- --m3e-icon-button-small-default-trailing-space: var(
61
- --m3e-split-button-small-trailing-button-unselected-trailing-space,
62
- 0.875rem
63
- );
64
- --m3e-icon-button-medium-default-leading-space: var(
65
- --m3e-split-button-medium-trailing-button-unselected-leading-space,
66
- 0.8125rem
67
- );
68
- --m3e-icon-button-medium-default-trailing-space: var(
69
- --m3e-split-button-medium-trailing-button-unselected-trailing-space,
70
- 1.0625rem
71
- );
72
- --m3e-icon-button-large-default-leading-space: var(
73
- --m3e-split-button-large-trailing-button-unselected-leading-space,
74
- 1.625rem
75
- );
76
- --m3e-icon-button-large-default-trailing-space: var(
77
- --m3e-split-button-large-trailing-button-unselected-trailing-space,
78
- 2rem
79
- );
80
- --m3e-icon-button-extra-large-default-leading-space: var(
81
- --m3e-split-button-extra-large-trailing-button-unselected-leading-space,
82
- 2.3125rem
83
- );
84
- --m3e-icon-button-extra-large-default-trailing-space: var(
85
- --m3e-split-button-extra-large-trailing-button-unselected-trailing-space,
86
- 3.0625rem
87
- );
88
- }
89
-
90
- ::slotted([slot="trailing-button"][aria-expanded="true"]) {
91
- --m3e-icon-button-extra-small-default-leading-space: var(
92
- --m3e-split-button-extra-small-trailing-button-selected-leading-space,
93
- 0.8125rem
94
- );
95
- --m3e-icon-button-extra-small-default-trailing-space: var(
96
- --m3e-split-button-extra-small-trailing-button-selected-trailing-space,
97
- 0.8125rem
98
- );
99
- --m3e-icon-button-small-default-leading-space: var(
100
- --m3e-split-button-small-trailing-button-selected-leading-space,
101
- 0.8125rem
102
- );
103
- --m3e-icon-button-small-default-trailing-space: var(
104
- --m3e-split-button-small-trailing-button-selected-trailing-space,
105
- 0.8125rem
106
- );
107
- --m3e-icon-button-medium-default-leading-space: var(
108
- --m3e-split-button-medium-trailing-button-selected-leading-space,
109
- 0.9375rem
110
- );
111
- --m3e-icon-button-medium-default-trailing-space: var(
112
- --m3e-split-button-medium-trailing-button-selected-trailing-space,
113
- 0.9375rem
114
- );
115
- --m3e-icon-button-large-default-leading-space: var(
116
- --m3e-split-button-large-trailing-button-selected-leading-space,
117
- 1.8125rem
118
- );
119
- --m3e-icon-button-large-default-trailing-space: var(
120
- --m3e-split-button-large-trailing-button-selected-trailing-space,
121
- 1.8125rem
122
- );
123
- --m3e-icon-button-extra-large-default-leading-space: var(
124
- --m3e-split-button-extra-large-trailing-button-selected-leading-space,
125
- 2.6875rem
126
- );
127
- --m3e-icon-button-extra-large-default-trailing-space: var(
128
- --m3e-split-button-extra-large-trailing-button-selected-trailing-space,
129
- 2.6875rem
130
- );
131
- }
132
-
133
- ::slotted([slot="leading-button"]:not(:hover)),
134
- ::slotted([slot="leading-button"]:disabled),
135
- ::slotted([slot="leading-button"][disabled-interactive]) {
136
- --m3e-connected-button-group-extra-small-inner-shape: var(
137
- --m3e-split-button-extra-small-inner-corner-size,
138
- ${a.shape.corner.extraSmall}
139
- );
140
- --m3e-connected-button-group-small-inner-shape: var(
141
- --m3e-split-button-small-inner-corner-size,
142
- ${a.shape.corner.extraSmall}
143
- );
144
- --m3e-connected-button-group-medium-inner-shape: var(
145
- --m3e-split-button-medium-inner-corner-size,
146
- ${a.shape.corner.extraSmall}
147
- );
148
- --m3e-connected-button-group-large-inner-shape: var(
149
- --m3e-split-button-large-inner-corner-size,
150
- ${a.shape.corner.small}
151
- );
152
- --m3e-connected-button-group-extra-large-inner-shape: var(
153
- --m3e-split-button-extra-large-inner-corner-size,
154
- ${a.shape.corner.medium}
155
- );
156
- }
157
- ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])),
158
- ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) {
159
- --m3e-connected-button-group-extra-small-inner-shape: var(
160
- --m3e-split-button-extra-small-inner-corner-hover-size,
161
- ${a.shape.corner.small}
162
- );
163
- --m3e-connected-button-group-small-inner-shape: var(
164
- --m3e-split-button-small-inner-corner-hover-size,
165
- ${a.shape.corner.medium}
166
- );
167
- --m3e-connected-button-group-medium-inner-shape: var(
168
- --m3e-split-button-medium-inner-corner-hover-size,
169
- ${a.shape.corner.medium}
170
- );
171
- --m3e-connected-button-group-large-inner-shape: var(
172
- --m3e-split-button-large-inner-corner-hover-size,
173
- ${a.shape.corner.largeIncreased}
174
- );
175
- --m3e-connected-button-group-extra-large-inner-shape: var(
176
- --m3e-split-button-extra-large-inner-corner-hover-size,
177
- ${a.shape.corner.largeIncreased}
178
- );
179
- }
180
-
181
- ::slotted([slot="leading-button"]),
182
- ::slotted([slot="trailing-button"]) {
183
- --m3e-connected-button-group-extra-small-inner-pressed-shape: var(
184
- --m3e-split-button-extra-small-inner-corner-pressed-size,
185
- ${a.shape.corner.small}
186
- );
187
- --m3e-connected-button-group-small-inner-pressed-shape: var(
188
- --m3e-split-button-small-inner-corner-pressed-size,
189
- ${a.shape.corner.medium}
190
- );
191
- --m3e-connected-button-group-medium-inner-pressed-shape: var(
192
- --m3e-split-button-medium-inner-corner-pressed-size,
193
- ${a.shape.corner.medium}
194
- );
195
- --m3e-connected-button-group-large-inner-pressed-shape: var(
196
- --m3e-split-button-large-inner-corner-pressed-size,
197
- ${a.shape.corner.largeIncreased}
198
- );
199
- --m3e-connected-button-group-extra-large-inner-pressed-shape: var(
200
- --m3e-split-button-extra-large-inner-corner-pressed-size,
201
- ${a.shape.corner.largeIncreased}
202
- );
203
- }
204
-
205
- ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)),
206
- ::slotted([slot="trailing-button"]:disabled),
207
- ::slotted([slot="trailing-button"][disabled-interactive]) {
208
- --m3e-connected-button-group-extra-small-inner-shape: var(
209
- --m3e-split-button-extra-small-inner-corner-size,
210
- ${a.shape.corner.extraSmall}
211
- );
212
- --m3e-connected-button-group-small-inner-shape: var(
213
- --m3e-split-button-small-inner-corner-size,
214
- ${a.shape.corner.extraSmall}
215
- );
216
- --m3e-connected-button-group-medium-inner-shape: var(
217
- --m3e-split-button-medium-inner-corner-size,
218
- ${a.shape.corner.extraSmall}
219
- );
220
- --m3e-connected-button-group-large-inner-shape: var(
221
- --m3e-split-button-large-inner-corner-size,
222
- ${a.shape.corner.small}
223
- );
224
- --m3e-connected-button-group-extra-large-inner-shape: var(
225
- --m3e-split-button-extra-large-inner-corner-size,
226
- ${a.shape.corner.medium}
227
- );
228
- }
229
-
230
- ::slotted([slot="trailing-button"][aria-expanded="true"]) {
231
- --_icon-button-icon-transform: rotate(180deg);
232
- --_button-rounded-start-shape: var(--_trailing-button-shape, ${a.shape.corner.full});
233
- --_button-rounded-end-shape: var(--_trailing-button-shape, ${a.shape.corner.full});
234
- }
235
- ::slotted([slot="trailing-button"]) {
236
- --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${a.shape.corner.full});
237
- }
238
- .base {
239
- --m3e-icon-button-extra-small-icon-size: calc(
240
- var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${a.density.calc(0)}
241
- );
242
- --m3e-button-extra-small-icon-size: calc(
243
- var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${a.density.calc(0)}
244
- );
245
- --m3e-icon-button-small-icon-size: calc(
246
- var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${a.density.calc(-1)}
247
- );
248
- --m3e-button-small-icon-size: calc(
249
- var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${a.density.calc(-1)}
250
- );
251
- --m3e-icon-button-medium-icon-size: calc(
252
- var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${a.density.calc(-2)}
253
- );
254
- --m3e-button-medium-icon-size: calc(
255
- var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${a.density.calc(-2)}
256
- );
257
- --m3e-icon-button-large-icon-size: calc(
258
- var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${a.density.calc(-3)}
259
- );
260
- --m3e-button-large-icon-size: calc(
261
- var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${a.density.calc(-3)}
262
- );
263
- --m3e-icon-button-extra-large-icon-size: calc(
264
- var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${a.density.calc(-3)}
265
- );
266
- --m3e-button-extra-large-icon-size: calc(
267
- var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${a.density.calc(-3)}
268
- );
269
- }
270
- :host([size="extra-small"]) .base {
271
- --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem);
272
- }
273
- :host([size="small"]) .base {
274
- --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem);
275
- }
276
- :host([size="medium"]).base {
277
- --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem);
278
- }
279
- :host([size="large"]) .base {
280
- --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem);
281
- }
282
- :host([size="extra-large"]) .base {
283
- --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem);
284
- }
285
- `,c([
33
+ */var D,q,L,W,I,N,K,B,H,J,V,F;let G=class extends(s(t,"group")){constructor(){super(...arguments),D.add(this),q.set(this,void 0),L.set(this,void 0),W.set(this,!1),I.set(this,new n(this,{target:null,capture:!0,isPressedKey:t=>" "===t,callback:(t,e,i)=>{switch(i){case u(this,q,"f"):u(this,D,"m",J).call(this,t);break;case u(this,L,"f"):u(this,D,"m",V).call(this,t||u(this,W,"f"))}}})),N.set(this,new r(this,{target:null,callback:(t,e)=>{if(e===u(this,L,"f"))u(this,L,"f")?.disabled||u(this,L,"f")?.disabledInteractive||(p(this,W,t,"f"),u(this,D,"m",V).call(this,t))}})),this.variant="filled",this.size="small"}update(t){super.update(t),t.has("variant")&&u(this,D,"m",H).call(this)}render(){return e`<m3e-button-group class="base" disable-role variant="connected" size="${this.size}"><slot name="leading-button" @slotchange="${u(this,D,"m",K)}"></slot><slot name="trailing-button" @slotchange="${u(this,D,"m",B)}"></slot></m3e-button-group>`}};q=new WeakMap,L=new WeakMap,W=new WeakMap,I=new WeakMap,N=new WeakMap,D=new WeakSet,K=function(t){u(this,q,"f")&&u(this,I,"f").unobserve(u(this,q,"f")),p(this,q,t.target.assignedElements({flatten:!0}).find(t=>t instanceof o),"f"),u(this,q,"f")&&u(this,I,"f").observe(u(this,q,"f")),u(this,D,"m",H).call(this)},B=function(t){u(this,L,"f")&&(u(this,I,"f").unobserve(u(this,L,"f")),u(this,N,"f").unobserve(u(this,L,"f"))),p(this,L,t.target.assignedElements({flatten:!0}).find(t=>t instanceof l),"f"),u(this,L,"f")&&(u(this,I,"f").observe(u(this,L,"f")),u(this,N,"f").observe(u(this,L,"f"))),u(this,D,"m",H).call(this)},H=function(){u(this,q,"f")&&(u(this,q,"f").variant=this.variant,u(this,q,"f").size=this.size,u(this,q,"f").shape="rounded"),u(this,L,"f")&&(u(this,L,"f").width="default",u(this,L,"f").shape="rounded",u(this,L,"f").setAttribute("variant",this.variant),u(this,L,"f").size=this.size)},J=function(t){t&&u(this,q,"f")?u(this,D,"m",F).call(this,u(this,q,"f"),"--_leading-button-shape"):this._base?.style.removeProperty("--_leading-button-shape")},V=function(t){t&&u(this,L,"f")?u(this,D,"m",F).call(this,u(this,L,"f"),"--_trailing-button-shape"):this._base?.style.removeProperty("--_trailing-button-shape")},F=function(t,e){const i=t.clientHeight/2;i&&this._base?.style.setProperty(e,`${i}px`)},G.styles=i`:host { display: inline-flex; vertical-align: middle; } ::slotted([slot="leading-button"]) { flex: 1 1 auto; min-width: 0; --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${a.shape.corner.full}); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"])) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-unselected-leading-space, 0.75rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-unselected-trailing-space, 0.875rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-unselected-leading-space, 0.8125rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-unselected-trailing-space, 1.0625rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-unselected-leading-space, 1.625rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-unselected-trailing-space, 2rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-unselected-leading-space, 2.3125rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-unselected-trailing-space, 3.0625rem ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --m3e-icon-button-extra-small-default-leading-space: var( --m3e-split-button-extra-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-extra-small-default-trailing-space: var( --m3e-split-button-extra-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-small-default-leading-space: var( --m3e-split-button-small-trailing-button-selected-leading-space, 0.8125rem ); --m3e-icon-button-small-default-trailing-space: var( --m3e-split-button-small-trailing-button-selected-trailing-space, 0.8125rem ); --m3e-icon-button-medium-default-leading-space: var( --m3e-split-button-medium-trailing-button-selected-leading-space, 0.9375rem ); --m3e-icon-button-medium-default-trailing-space: var( --m3e-split-button-medium-trailing-button-selected-trailing-space, 0.9375rem ); --m3e-icon-button-large-default-leading-space: var( --m3e-split-button-large-trailing-button-selected-leading-space, 1.8125rem ); --m3e-icon-button-large-default-trailing-space: var( --m3e-split-button-large-trailing-button-selected-trailing-space, 1.8125rem ); --m3e-icon-button-extra-large-default-leading-space: var( --m3e-split-button-extra-large-trailing-button-selected-leading-space, 2.6875rem ); --m3e-icon-button-extra-large-default-trailing-space: var( --m3e-split-button-extra-large-trailing-button-selected-trailing-space, 2.6875rem ); } ::slotted([slot="leading-button"]:not(:hover)), ::slotted([slot="leading-button"]:disabled), ::slotted([slot="leading-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${a.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${a.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${a.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${a.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${a.shape.corner.medium} ); } ::slotted([slot="leading-button"]:hover:not(:disabled):not([disabled-interactive])), ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):hover:not(:disabled):not([disabled-interactive])) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-hover-size, ${a.shape.corner.small} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-hover-size, ${a.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-hover-size, ${a.shape.corner.medium} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-hover-size, ${a.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-hover-size, ${a.shape.corner.largeIncreased} ); } ::slotted([slot="leading-button"]), ::slotted([slot="trailing-button"]) { --m3e-connected-button-group-extra-small-inner-pressed-shape: var( --m3e-split-button-extra-small-inner-corner-pressed-size, ${a.shape.corner.small} ); --m3e-connected-button-group-small-inner-pressed-shape: var( --m3e-split-button-small-inner-corner-pressed-size, ${a.shape.corner.medium} ); --m3e-connected-button-group-medium-inner-pressed-shape: var( --m3e-split-button-medium-inner-corner-pressed-size, ${a.shape.corner.medium} ); --m3e-connected-button-group-large-inner-pressed-shape: var( --m3e-split-button-large-inner-corner-pressed-size, ${a.shape.corner.largeIncreased} ); --m3e-connected-button-group-extra-large-inner-pressed-shape: var( --m3e-split-button-extra-large-inner-corner-pressed-size, ${a.shape.corner.largeIncreased} ); } ::slotted([slot="trailing-button"]:not([aria-expanded="true"]):not(:hover)), ::slotted([slot="trailing-button"]:disabled), ::slotted([slot="trailing-button"][disabled-interactive]) { --m3e-connected-button-group-extra-small-inner-shape: var( --m3e-split-button-extra-small-inner-corner-size, ${a.shape.corner.extraSmall} ); --m3e-connected-button-group-small-inner-shape: var( --m3e-split-button-small-inner-corner-size, ${a.shape.corner.extraSmall} ); --m3e-connected-button-group-medium-inner-shape: var( --m3e-split-button-medium-inner-corner-size, ${a.shape.corner.extraSmall} ); --m3e-connected-button-group-large-inner-shape: var( --m3e-split-button-large-inner-corner-size, ${a.shape.corner.small} ); --m3e-connected-button-group-extra-large-inner-shape: var( --m3e-split-button-extra-large-inner-corner-size, ${a.shape.corner.medium} ); } ::slotted([slot="trailing-button"][aria-expanded="true"]) { --_icon-button-icon-transform: rotate(180deg); --_button-rounded-start-shape: var(--_trailing-button-shape, ${a.shape.corner.full}); --_button-rounded-end-shape: var(--_trailing-button-shape, ${a.shape.corner.full}); } ::slotted([slot="trailing-button"]) { --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${a.shape.corner.full}); } .base { --m3e-icon-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${a.density.calc(0)} ); --m3e-button-extra-small-icon-size: calc( var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${a.density.calc(0)} ); --m3e-icon-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${a.density.calc(-1)} ); --m3e-button-small-icon-size: calc( var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${a.density.calc(-1)} ); --m3e-icon-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${a.density.calc(-2)} ); --m3e-button-medium-icon-size: calc( var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${a.density.calc(-2)} ); --m3e-icon-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${a.density.calc(-3)} ); --m3e-button-large-icon-size: calc( var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${a.density.calc(-3)} ); --m3e-icon-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${a.density.calc(-3)} ); --m3e-button-extra-large-icon-size: calc( var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${a.density.calc(-3)} ); } :host([size="extra-small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem); } :host([size="small"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem); } :host([size="medium"]).base { --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem); } :host([size="large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem); } :host([size="extra-large"]) .base { --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem); }`,c([
286
34
  /**
287
35
  * @license
288
36
  * Copyright 2017 Google LLC