@vollowx/seele 0.13.0 → 0.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -66
- package/package.json +2 -1
- package/src/all.js +2 -0
- package/src/base/autocomplete.js +1 -4
- package/src/base/input.js +2 -40
- package/src/base/list.js +1 -1
- package/src/base/menu.js +1 -9
- package/src/base/select.js +1 -1
- package/src/base/slider.js +2 -23
- package/src/base/tabs.js +1 -5
- package/src/m3/autocomplete/autocomplete-styles.css.js +1 -1
- package/src/m3/autocomplete/autocomplete.js +1 -20
- package/src/m3/badge/badge-styles.css.js +1 -1
- package/src/m3/badge/badge.js +1 -6
- package/src/m3/button/common-button-styles.css.js +1 -1
- package/src/m3/button/common-button-toggle.js +1 -9
- package/src/m3/button/common-button.js +1 -7
- package/src/m3/button/icon-button-styles.css.js +1 -1
- package/src/m3/button/icon-button-toggle.js +1 -7
- package/src/m3/button/icon-button.js +1 -6
- package/src/m3/button/shared-button-styles.css.js +1 -1
- package/src/m3/button/shared-button-toggle-styles.css.js +1 -1
- package/src/m3/button-group/standard-button-group-styles.css.js +2 -0
- package/src/m3/button-group/standard-button-group.js +130 -0
- package/src/m3/checkbox/checkbox-styles.css.js +1 -1
- package/src/m3/checkbox/checkbox.js +2 -12
- package/src/m3/dialog/dialog-styles.css.js +1 -1
- package/src/m3/dialog/dialog.js +38 -43
- package/src/m3/divider/divider-styles.css.js +1 -1
- package/src/m3/fab/fab-styles.css.js +1 -1
- package/src/m3/fab/fab.js +1 -7
- package/src/m3/field/field-styles.css.js +1 -1
- package/src/m3/field/field.js +3 -16
- package/src/m3/field/filled-field-styles.css.js +1 -1
- package/src/m3/field/filled-field.js +1 -15
- package/src/m3/field/outlined-field-styles.css.js +1 -1
- package/src/m3/field/outlined-field.js +2 -18
- package/src/m3/focus-ring/focus-ring-styles.css.js +1 -1
- package/src/m3/item/item.js +1 -12
- package/src/m3/list/list-item.js +1 -18
- package/src/m3/loading-indicator/loading-indicator.js +1 -5
- package/src/m3/menu/menu-styles.css.js +1 -1
- package/src/m3/ripple/ripple-styles.css.js +1 -1
- package/src/m3/select/filled-select.js +1 -26
- package/src/m3/select/outlined-select.js +1 -26
- package/src/m3/select/select-styles.css.js +1 -1
- package/src/m3/select/select.js +1 -22
- package/src/m3/slider/slider-styles.css.js +1 -1
- package/src/m3/slider/slider.js +5 -38
- package/src/m3/switch/switch-styles.css.js +1 -1
- package/src/m3/switch/switch.js +3 -22
- package/src/m3/tab/tab-styles.css.js +1 -1
- package/src/m3/tab/tab.js +1 -9
- package/src/m3/tab/tabs-styles.css.js +1 -1
- package/src/m3/tab/tabs.js +1 -4
- package/src/m3/text-field/filled-text-field.js +1 -12
- package/src/m3/text-field/outlined-text-field.js +1 -14
- package/src/m3/text-field/text-field-styles.css.js +1 -1
- package/src/m3/toolbar/toolbar-styles.css.js +1 -1
- package/src/m3/toolbar/toolbar.js +1 -8
- package/src/m3/tooltip/tooltip-styles.css.js +1 -1
- package/src/win98/button/button.js +1 -3
package/src/m3/dialog/dialog.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { query } from 'lit/decorators.js';
|
|
4
|
-
import {
|
|
5
|
-
import { Dialog } from '../../base/dialog';
|
|
3
|
+
import { query, state, customElement } from 'lit/decorators.js';
|
|
4
|
+
import { Dialog } from '../../base/dialog.js';
|
|
6
5
|
import { dialogStyles } from './dialog-styles.css.js';
|
|
7
6
|
export class M3Dialog extends Dialog {
|
|
8
7
|
static{
|
|
@@ -11,37 +10,21 @@ export class M3Dialog extends Dialog {
|
|
|
11
10
|
];
|
|
12
11
|
}
|
|
13
12
|
render() {
|
|
14
|
-
return html
|
|
15
|
-
<dialog
|
|
16
|
-
part="dialog"
|
|
17
|
-
@click="${this._handleClick}"
|
|
18
|
-
@cancel="${this._handleCancel}"
|
|
19
|
-
>
|
|
20
|
-
<div part="container">
|
|
21
|
-
<div part="inner">
|
|
22
|
-
<div part="headline">
|
|
23
|
-
<slot name="headline"></slot>
|
|
24
|
-
</div>
|
|
25
|
-
<div part="content">
|
|
26
|
-
<slot></slot>
|
|
27
|
-
</div>
|
|
28
|
-
<div class="actions-placeholder"></div>
|
|
29
|
-
</div>
|
|
30
|
-
<div part="actions">
|
|
31
|
-
<slot name="actions"></slot>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
</dialog>
|
|
35
|
-
<div part="scrim"></div>
|
|
36
|
-
`;
|
|
13
|
+
return html`<dialog part="dialog" @click="${this.#handleClick}" @cancel="${this._handleCancel}"><div part="container"><div part="body"><div part="headline" class="${this.hasIcon ? 'has-icon' : ''}"><slot name="icon" @slotchange="${this.#handleIconSlotChange}"></slot><slot name="headline"></slot></div><div part="content"><slot></slot></div><div class="actions-placeholder"></div></div><div part="actions"><slot name="actions"></slot></div></div></dialog><div part="scrim"></div>`;
|
|
37
14
|
}
|
|
38
15
|
#activeAnimations;
|
|
39
16
|
#clearAnimations() {
|
|
40
17
|
this.#activeAnimations.forEach((anim)=>anim.cancel());
|
|
41
18
|
this.#activeAnimations = [];
|
|
19
|
+
this.#opening = this.#closing = false;
|
|
42
20
|
}
|
|
21
|
+
#handleClick;
|
|
22
|
+
#handleIconSlotChange;
|
|
23
|
+
#opening;
|
|
43
24
|
show() {
|
|
25
|
+
if (this.#opening) return;
|
|
44
26
|
this.#clearAnimations();
|
|
27
|
+
this.#opening = true;
|
|
45
28
|
// Reset margins to allow browser centering
|
|
46
29
|
this.$dialog.style.marginTop = 'auto';
|
|
47
30
|
this.$dialog.style.marginBottom = 'auto';
|
|
@@ -81,7 +64,7 @@ export class M3Dialog extends Dialog {
|
|
|
81
64
|
easing: this._config.openEase,
|
|
82
65
|
fill: 'forwards'
|
|
83
66
|
});
|
|
84
|
-
const
|
|
67
|
+
const body = this.$body.animate([
|
|
85
68
|
{
|
|
86
69
|
opacity: 0.2
|
|
87
70
|
},
|
|
@@ -89,7 +72,7 @@ export class M3Dialog extends Dialog {
|
|
|
89
72
|
opacity: 1
|
|
90
73
|
}
|
|
91
74
|
], {
|
|
92
|
-
duration: this._config.
|
|
75
|
+
duration: this._config.bodyFadeInDur,
|
|
93
76
|
easing: 'linear',
|
|
94
77
|
fill: 'forwards'
|
|
95
78
|
});
|
|
@@ -101,17 +84,21 @@ export class M3Dialog extends Dialog {
|
|
|
101
84
|
opacity: 1
|
|
102
85
|
}
|
|
103
86
|
], {
|
|
104
|
-
duration: this._config.
|
|
87
|
+
duration: this._config.bodyFadeInDur,
|
|
105
88
|
easing: 'linear',
|
|
106
89
|
fill: 'forwards'
|
|
107
90
|
});
|
|
108
|
-
this.#activeAnimations.push(container, scrim,
|
|
91
|
+
this.#activeAnimations.push(container, scrim, body, actions);
|
|
109
92
|
container.onfinish = ()=>{
|
|
110
93
|
this.$container.style.minHeight = '';
|
|
94
|
+
this.#clearAnimations();
|
|
111
95
|
};
|
|
112
96
|
}
|
|
97
|
+
#closing;
|
|
113
98
|
close() {
|
|
99
|
+
if (this.#closing) return;
|
|
114
100
|
this.#clearAnimations();
|
|
101
|
+
this.#closing = true;
|
|
115
102
|
const startHeight = this.$container.offsetHeight;
|
|
116
103
|
const endHeight = startHeight * 0.35;
|
|
117
104
|
this.$container.style.minHeight = '0px';
|
|
@@ -136,8 +123,8 @@ export class M3Dialog extends Dialog {
|
|
|
136
123
|
opacity: 0
|
|
137
124
|
}
|
|
138
125
|
], {
|
|
139
|
-
duration: this._config.closeDur - this._config.
|
|
140
|
-
delay: this._config.
|
|
126
|
+
duration: this._config.closeDur - this._config.bodyFadeOutDur,
|
|
127
|
+
delay: this._config.bodyFadeOutDur,
|
|
141
128
|
easing: 'linear',
|
|
142
129
|
fill: 'forwards'
|
|
143
130
|
});
|
|
@@ -153,7 +140,7 @@ export class M3Dialog extends Dialog {
|
|
|
153
140
|
easing: this._config.closeEase,
|
|
154
141
|
fill: 'forwards'
|
|
155
142
|
});
|
|
156
|
-
const
|
|
143
|
+
const body = this.$body.animate([
|
|
157
144
|
{
|
|
158
145
|
opacity: 1
|
|
159
146
|
},
|
|
@@ -161,7 +148,7 @@ export class M3Dialog extends Dialog {
|
|
|
161
148
|
opacity: 0
|
|
162
149
|
}
|
|
163
150
|
], {
|
|
164
|
-
duration: this._config.
|
|
151
|
+
duration: this._config.bodyFadeOutDur,
|
|
165
152
|
easing: 'linear',
|
|
166
153
|
fill: 'forwards'
|
|
167
154
|
});
|
|
@@ -173,11 +160,11 @@ export class M3Dialog extends Dialog {
|
|
|
173
160
|
opacity: 0
|
|
174
161
|
}
|
|
175
162
|
], {
|
|
176
|
-
duration: this._config.
|
|
163
|
+
duration: this._config.bodyFadeOutDur,
|
|
177
164
|
easing: 'linear',
|
|
178
165
|
fill: 'forwards'
|
|
179
166
|
});
|
|
180
|
-
this.#activeAnimations.push(containerSpatial, containerEffects, scrim,
|
|
167
|
+
this.#activeAnimations.push(containerSpatial, containerEffects, scrim, body, actions);
|
|
181
168
|
containerSpatial.onfinish = ()=>{
|
|
182
169
|
this.$container.style.minHeight = '';
|
|
183
170
|
super.close();
|
|
@@ -191,21 +178,29 @@ export class M3Dialog extends Dialog {
|
|
|
191
178
|
vertSlide: 36,
|
|
192
179
|
openDur: 500,
|
|
193
180
|
closeDur: 200,
|
|
194
|
-
|
|
195
|
-
|
|
181
|
+
bodyFadeInDur: 200,
|
|
182
|
+
bodyFadeOutDur: 100
|
|
196
183
|
} /* Perhaps make them constants? I don't think that there will be anyone
|
|
197
|
-
making classes inheriting this class... */ , this.#activeAnimations = [], this
|
|
184
|
+
making classes inheriting this class... */ , this.hasIcon = false, this.#activeAnimations = [], this.#handleClick = (e)=>{
|
|
198
185
|
const target = e.target;
|
|
199
186
|
if (!this.$container.contains(target) && !this.contains(target)) this.close();
|
|
200
|
-
}
|
|
187
|
+
}, this.#handleIconSlotChange = (e)=>{
|
|
188
|
+
const slot = e.target;
|
|
189
|
+
this.hasIcon = slot.assignedElements({
|
|
190
|
+
flatten: true
|
|
191
|
+
}).length > 0;
|
|
192
|
+
}, this.#opening = false, this.#closing = false;
|
|
201
193
|
}
|
|
202
194
|
}
|
|
195
|
+
_ts_decorate([
|
|
196
|
+
state()
|
|
197
|
+
], M3Dialog.prototype, "hasIcon", void 0);
|
|
203
198
|
_ts_decorate([
|
|
204
199
|
query('[part=container]')
|
|
205
200
|
], M3Dialog.prototype, "$container", void 0);
|
|
206
201
|
_ts_decorate([
|
|
207
|
-
query('[part=
|
|
208
|
-
], M3Dialog.prototype, "$
|
|
202
|
+
query('[part=body]')
|
|
203
|
+
], M3Dialog.prototype, "$body", void 0);
|
|
209
204
|
_ts_decorate([
|
|
210
205
|
query('[part=actions]')
|
|
211
206
|
], M3Dialog.prototype, "$actions", void 0);
|
|
@@ -216,5 +211,5 @@ _ts_decorate([
|
|
|
216
211
|
query('[part=scrim]')
|
|
217
212
|
], M3Dialog.prototype, "$scrim", void 0);
|
|
218
213
|
M3Dialog = _ts_decorate([
|
|
219
|
-
customElement('md-dialog'
|
|
214
|
+
customElement('md-dialog')
|
|
220
215
|
], M3Dialog);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const dividerStyles = css`:host{box-sizing:border-box;height:var(--md-divider-height,1px);width:100%;display:flex
|
|
2
|
+
export const dividerStyles = css`:host{box-sizing:border-box;height:var(--md-divider-height,1px);width:100%;display:flex}@media (forced-colors:active){:host:before{background:canvastext}}:host([inset-start]),:host([inset]){padding-inline-start:8px}:host([inset-end]),:host([inset]){padding-inline-end:8px}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb,
|
|
2
|
+
export const fabStyles = css`:host{--md-focus-ring-shape:var(--_border-radius);--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb,var(--_background-color) var(--_background-opacity,100%),transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb,var(--_text-color) var(--_text-opacity,100%),transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size))/ 2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}:host([size=medium]){--_size:80px;--_border-radius:20px;--_icon-size:28px}:host([size=large]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary-container]){--_text-color:var(--md-sys-color-on-primary-container);--_background-color:var(--md-sys-color-primary-container)}:host([color=secondary-container]){--_text-color:var(--md-sys-color-on-secondary-container);--_background-color:var(--md-sys-color-secondary-container)}:host([color=tertiary-container]){--_text-color:var(--md-sys-color-on-tertiary-container);--_background-color:var(--md-sys-color-tertiary-container)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host([color=surface]){--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em;display:inline-flex}::slotted([slot=label]){margin-inline:4px}`;
|
package/src/m3/fab/fab.js
CHANGED
|
@@ -15,13 +15,7 @@ export class M3Fab extends Button {
|
|
|
15
15
|
];
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return html
|
|
19
|
-
<md-focus-ring></md-focus-ring>
|
|
20
|
-
<md-ripple></md-ripple>
|
|
21
|
-
<span part="target"></span>
|
|
22
|
-
<slot part="icon" aria-hidden="true"></slot>
|
|
23
|
-
<slot part="label" name="label"></slot>
|
|
24
|
-
`;
|
|
18
|
+
return html`<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon" aria-hidden="true"></slot><slot part="label" name="label"></slot>`;
|
|
25
19
|
}
|
|
26
20
|
constructor(...args){
|
|
27
21
|
super(...args), this.size = 'default', this.color = 'primary';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const fieldStyles = css`:host{--_min-height:56px;--_padding-top:16px;--_padding-bottom:16px;cursor:text;-webkit-user-select:none;user-select:none;vertical-align:top;flex-direction:column;display:inline-flex;position:relative}.container{box-sizing:border-box;min-height:var(--_min-height);flex:1;align-items:center;display:flex;position:relative}:host([disabled]){opacity:.38;pointer-events:none}.start
|
|
2
|
+
export const fieldStyles = css`:host{--_min-height:56px;--_padding-top:16px;--_padding-bottom:16px;cursor:text;-webkit-user-select:none;user-select:none;vertical-align:top;flex-direction:column;display:inline-flex;position:relative}.container{box-sizing:border-box;min-height:var(--_min-height);flex:1;align-items:center;display:flex;position:relative}:host([disabled]){opacity:.38;pointer-events:none}.end,.start{color:var(--md-sys-color-on-surface-variant);justify-content:center;align-items:center;min-width:48px;display:flex}.end[hidden],.start[hidden]{display:none}.middle{flex-direction:column;flex:1;justify-content:center;height:100%;display:flex;position:relative;overflow:hidden}.label{font:var(--md-sys-typography-body-large);pointer-events:none;text-overflow:ellipsis;transform-origin:0 0;max-width:calc(100% - 24px);transition:margin-top var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),font-size var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);white-space:nowrap}.input-wrapper{padding-block:var(--_padding-top) var(--_padding-bottom);flex:1;align-items:center;display:flex}:host([haslabel]:not([focused]):not([populated])) ::slotted(input:placeholder-shown),:host([haslabel]:not([focused]):not([populated])) ::slotted(textarea:placeholder-shown){opacity:0}::slotted(*){caret-color:var(--md-sys-color-primary);font:var(--md-sys-typography-body-large)}.supporting-text{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-small);padding-inline:16px;padding-top:4px}:host([error]) ::slotted(*){caret-color:var(--md-sys-color-error)}:host([error]) .supporting-text{color:var(--md-sys-color-error)}`;
|
package/src/m3/field/field.js
CHANGED
|
@@ -13,10 +13,7 @@ import { fieldStyles } from './field-styles.css.js';
|
|
|
13
13
|
];
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return html
|
|
17
|
-
<div class="container">${this.renderContainerContent()}</div>
|
|
18
|
-
${this.renderSupportingText()}
|
|
19
|
-
`;
|
|
16
|
+
return html`<div class="container">${this.renderContainerContent()}</div>${this.renderSupportingText()}`;
|
|
20
17
|
}
|
|
21
18
|
renderSupportingText() {
|
|
22
19
|
if (!this.supportingText) {
|
|
@@ -25,20 +22,10 @@ import { fieldStyles } from './field-styles.css.js';
|
|
|
25
22
|
return html`<div class="supporting-text">${this.supportingText}</div>`;
|
|
26
23
|
}
|
|
27
24
|
renderStart() {
|
|
28
|
-
return html`<slot
|
|
29
|
-
name="start"
|
|
30
|
-
class="start"
|
|
31
|
-
?hidden=${!this.hasStart}
|
|
32
|
-
@slotchange=${this.handleSlotChange}
|
|
33
|
-
></slot>`;
|
|
25
|
+
return html`<slot name="start" class="start" ?hidden="${!this.hasStart}" @slotchange="${this.handleSlotChange}"></slot>`;
|
|
34
26
|
}
|
|
35
27
|
renderEnd() {
|
|
36
|
-
return html`<slot
|
|
37
|
-
name="end"
|
|
38
|
-
class="end"
|
|
39
|
-
?hidden=${!this.hasEnd}
|
|
40
|
-
@slotchange=${this.handleSlotChange}
|
|
41
|
-
></slot>`;
|
|
28
|
+
return html`<slot name="end" class="end" ?hidden="${!this.hasEnd}" @slotchange="${this.handleSlotChange}"></slot>`;
|
|
42
29
|
}
|
|
43
30
|
update(changedProperties) {
|
|
44
31
|
if (changedProperties.has('label')) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const filledFieldStyles = css`.container{--_indicator-height:1px;--_indicator-color:var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-surface-container-highest);box-shadow:inset 0 calc(var(--_indicator-height) * -1) 0 0 var(--_indicator-color);transition:box-shadow var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel]){--_padding-top:24px;--_padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:calc((var(--_padding-top) + var(--_padding-bottom))
|
|
2
|
+
export const filledFieldStyles = css`.container{--_indicator-height:1px;--_indicator-color:var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-surface-container-highest);box-shadow:inset 0 calc(var(--_indicator-height) * -1) 0 0 var(--_indicator-color);transition:box-shadow var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel]){--_padding-top:24px;--_padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:calc((var(--_padding-top) + var(--_padding-bottom))/ 2);position:absolute;top:0}:host([focused]) .label{color:var(--md-sys-color-primary)}:host([error]) .label{color:var(--md-sys-color-error)}:host([focused]) .label,:host([populated]) .label{margin-top:calc(var(--_padding-top)/ 2 - .75em);font-size:.75em}:host([focused]) .container{--_indicator-height:3px;--_indicator-color:var(--md-sys-color-primary)}:host([error]) .container,:host([error][focused]) .container{--_indicator-color:var(--md-sys-color-error)}`;
|
|
@@ -12,21 +12,7 @@ export class M3FilledField extends M3Field {
|
|
|
12
12
|
];
|
|
13
13
|
}
|
|
14
14
|
renderContainerContent() {
|
|
15
|
-
return html
|
|
16
|
-
<md-ripple
|
|
17
|
-
clickbehavior="none"
|
|
18
|
-
enterbehavior="none"
|
|
19
|
-
spacebehavior="none"
|
|
20
|
-
></md-ripple>
|
|
21
|
-
${this.renderStart()}
|
|
22
|
-
<div class="middle">
|
|
23
|
-
<span class="label">${this.label}</span>
|
|
24
|
-
<div class="input-wrapper">
|
|
25
|
-
<slot></slot>
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
${this.renderEnd()}
|
|
29
|
-
`;
|
|
15
|
+
return html`<md-ripple clickbehavior="none" enterbehavior="none" spacebehavior="none"></md-ripple>${this.renderStart()}<div class="middle"><span class="label">${this.label}</span><div class="input-wrapper"><slot></slot></div></div>${this.renderEnd()}`;
|
|
30
16
|
}
|
|
31
17
|
}
|
|
32
18
|
M3FilledField = _ts_decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const outlinedFieldStyles = css`:host{--_outline-width:1px}.container{border-radius:4px;padding-inline:16px}.outline{border-radius:inherit;color:var(--md-sys-color-outline);pointer-events:none;display:flex;position:absolute;inset:0}.outline-
|
|
2
|
+
export const outlinedFieldStyles = css`:host{--_outline-width:1px}.container{border-radius:4px;padding-inline:16px}.outline{border-radius:inherit;color:var(--md-sys-color-outline);pointer-events:none;display:flex;position:absolute;inset:0}.outline-end,.outline-notch,.outline-start{border:var(--_outline-width) solid currentColor;box-sizing:border-box;transition:border-width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),border-top-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}.outline-start{border-radius:inherit;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;width:12px}.outline-end{border-radius:inherit;border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;flex:1}.outline-notch{border-inline:none;align-items:flex-start;max-width:calc(100% - 24px);margin-top:0;padding:0 4px;display:flex}:host(:not([haslabel])) .outline-notch{display:none}.label{margin-top:calc(var(--_padding-top) - 1px)}:host(:hover) .label,:host(:hover) .outline{color:var(--md-sys-color-on-surface)}:host([focused]){--_outline-width:3px}:host([focused]) .label,:host([focused]) .outline{color:var(--md-sys-color-primary)}:host([error]) .label,:host([error]) .outline{color:var(--md-sys-color-error)}:host([focused]) .outline-notch,:host([populated]) .outline-notch{border-top-width:0;border-top-color:#0000}:host([focused]) .label,:host([populated]) .label{margin-top:calc(-.75em - 3px);font-size:.75em}:host([disabled]) .outline{color:var(--md-sys-color-outline-variant)}:host([disabled]) .label{color:var(--md-sys-color-on-surface-variant)}`;
|
|
@@ -11,26 +11,10 @@ export class M3OutlinedField extends M3Field {
|
|
|
11
11
|
];
|
|
12
12
|
}
|
|
13
13
|
renderContainerContent() {
|
|
14
|
-
return html
|
|
15
|
-
${this.renderOutline()} ${this.renderStart()}
|
|
16
|
-
<div class="middle">
|
|
17
|
-
<div class="input-wrapper">
|
|
18
|
-
<slot></slot>
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
${this.renderEnd()}
|
|
22
|
-
`;
|
|
14
|
+
return html`${this.renderOutline()} ${this.renderStart()}<div class="middle"><div class="input-wrapper"><slot></slot></div></div>${this.renderEnd()}`;
|
|
23
15
|
}
|
|
24
16
|
renderOutline() {
|
|
25
|
-
return html
|
|
26
|
-
<div class="outline">
|
|
27
|
-
<div class="outline-start"></div>
|
|
28
|
-
<div class="outline-notch">
|
|
29
|
-
<span class="label">${this.label}</span>
|
|
30
|
-
</div>
|
|
31
|
-
<div class="outline-end"></div>
|
|
32
|
-
</div>
|
|
33
|
-
`;
|
|
17
|
+
return html`<div class="outline"><div class="outline-start"></div><div class="outline-notch"><span class="label">${this.label}</span></div><div class="outline-end"></div></div>`;
|
|
34
18
|
}
|
|
35
19
|
}
|
|
36
20
|
M3OutlinedField = _ts_decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const focusRingStyles = css`:host{animation-delay:0s,
|
|
2
|
+
export const focusRingStyles = css`:host{animation-delay:0s,calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25),calc(var(--md-focus-ring-duration,.6s) * .75);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;animation-timing-function:cubic-bezier(.2,0,0,1),cubic-bezier(.2,0,0,1);display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){box-shadow:0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:calc(-1 * var(--md-focus-ring-outward-offset,2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){box-shadow:inset 0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:var(--md-focus-ring-inward-offset,0);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{box-shadow:0 0}to{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes outward-shrink{0%{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-grow{0%{box-shadow:inset 0 0}to{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-shrink{0%{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@media (prefers-reduced-motion){:host{animation:none}}`;
|
package/src/m3/item/item.js
CHANGED
|
@@ -10,18 +10,7 @@ export class M3Item extends Item {
|
|
|
10
10
|
];
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return html
|
|
14
|
-
<slot name="container"></slot>
|
|
15
|
-
<slot name="start"></slot>
|
|
16
|
-
<div class="text">
|
|
17
|
-
<slot name="overline"></slot>
|
|
18
|
-
<slot class="default-slot"></slot>
|
|
19
|
-
<slot name="headline"></slot>
|
|
20
|
-
<slot name="supporting-text"></slot>
|
|
21
|
-
</div>
|
|
22
|
-
<slot name="trailing-supporting-text"></slot>
|
|
23
|
-
<slot name="end"></slot>
|
|
24
|
-
`;
|
|
13
|
+
return html`<slot name="container"></slot><slot name="start"></slot><div class="text"><slot name="overline"></slot><slot class="default-slot"></slot><slot name="headline"></slot><slot name="supporting-text"></slot></div><slot name="trailing-supporting-text"></slot><slot name="end"></slot>`;
|
|
25
14
|
}
|
|
26
15
|
constructor(...args){
|
|
27
16
|
super(...args), this.multiline = false;
|
package/src/m3/list/list-item.js
CHANGED
|
@@ -12,24 +12,7 @@ export class M3ListItem extends ListItem {
|
|
|
12
12
|
];
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return html
|
|
16
|
-
<md-item>
|
|
17
|
-
<div slot="container">
|
|
18
|
-
<md-focus-ring inward></md-focus-ring>
|
|
19
|
-
<md-ripple></md-ripple>
|
|
20
|
-
</div>
|
|
21
|
-
<slot slot="start" name="start"></slot>
|
|
22
|
-
<slot slot="overline" name="overline"></slot>
|
|
23
|
-
<slot></slot>
|
|
24
|
-
<slot slot="headline" name="headline"></slot>
|
|
25
|
-
<slot slot="supporting-text" name="supporting-text"></slot>
|
|
26
|
-
<slot
|
|
27
|
-
slot="trailing-supporting-text"
|
|
28
|
-
name="trailing-supporting-text"
|
|
29
|
-
></slot>
|
|
30
|
-
<slot slot="end" name="end"></slot>
|
|
31
|
-
</md-item>
|
|
32
|
-
`;
|
|
15
|
+
return html`<md-item><div slot="container"><md-focus-ring inward></md-focus-ring><md-ripple></md-ripple></div><slot slot="start" name="start"></slot><slot slot="overline" name="overline"></slot><slot></slot><slot slot="headline" name="headline"></slot><slot slot="supporting-text" name="supporting-text"></slot><slot slot="trailing-supporting-text" name="trailing-supporting-text"></slot><slot slot="end" name="end"></slot></md-item>`;
|
|
33
16
|
}
|
|
34
17
|
constructor(){
|
|
35
18
|
super();
|
|
@@ -18,11 +18,7 @@ export class M3LoadingIndicator extends InternalsAttached(LitElement) {
|
|
|
18
18
|
];
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return html`<canvas
|
|
22
|
-
width="${CANVAS_SIZE}"
|
|
23
|
-
height="${CANVAS_SIZE}"
|
|
24
|
-
aria-hidden="true"
|
|
25
|
-
></canvas>`;
|
|
21
|
+
return html`<canvas width="${CANVAS_SIZE}" height="${CANVAS_SIZE}" aria-hidden="true"></canvas>`;
|
|
26
22
|
}
|
|
27
23
|
#ctx;
|
|
28
24
|
#animationFrame;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){
|
|
2
|
+
export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){transition:opacity 67ms,transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}& [part=items]{opacity:1}& [part=items]{opacity:0;transition:opacity 67ms}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const rippleStyles = css`:host{border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side,
|
|
2
|
+
export const rippleStyles = css`:host{border-radius:inherit;pointer-events:none;display:block;position:absolute;inset:0;overflow:hidden}[part~=ripple]{background-image:radial-gradient(closest-side,var(--md-ripple-color,currentColor) max(calc(100% - 70px),65%),transparent 100%);position:absolute;top:0;left:0}:host:before{background-color:var(--md-ripple-color,currentColor);border-radius:inherit;content:"";opacity:0;transition:opacity 67ms linear;display:block;position:absolute;inset:0}:host(:state(hover)):before{opacity:.08}`;
|
|
@@ -11,32 +11,7 @@ export class MdFilledSelect extends M3Select {
|
|
|
11
11
|
];
|
|
12
12
|
}
|
|
13
13
|
renderField() {
|
|
14
|
-
return html
|
|
15
|
-
<md-filled-field
|
|
16
|
-
id="field"
|
|
17
|
-
part="field"
|
|
18
|
-
.label=${this.label}
|
|
19
|
-
.populated=${!!this.value}
|
|
20
|
-
.disabled=${this.disabled}
|
|
21
|
-
.required=${this.required}
|
|
22
|
-
.error=${this.error}
|
|
23
|
-
.focused=${this.open || this.focused}
|
|
24
|
-
supportingtext=${this.supportingText}
|
|
25
|
-
@click=${this.toggle}
|
|
26
|
-
@keydown=${this._handleFieldKeydown}
|
|
27
|
-
@focus=${()=>this.focused = true}
|
|
28
|
-
@blur=${()=>this.focused = false}
|
|
29
|
-
tabindex=${this.disabled ? '-1' : '0'}
|
|
30
|
-
role="combobox"
|
|
31
|
-
aria-haspopup="listbox"
|
|
32
|
-
aria-expanded=${this.open}
|
|
33
|
-
aria-controls="menu"
|
|
34
|
-
aria-disabled=${this.disabled}
|
|
35
|
-
aria-required=${this.required}
|
|
36
|
-
>
|
|
37
|
-
${this.renderFieldContent()}
|
|
38
|
-
</md-filled-field>
|
|
39
|
-
`;
|
|
14
|
+
return html`<md-filled-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${()=>this.focused = true}" @blur="${()=>this.focused = false}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-filled-field>`;
|
|
40
15
|
}
|
|
41
16
|
}
|
|
42
17
|
MdFilledSelect = _ts_decorate([
|
|
@@ -11,32 +11,7 @@ export class MdOutlinedSelect extends M3Select {
|
|
|
11
11
|
];
|
|
12
12
|
}
|
|
13
13
|
renderField() {
|
|
14
|
-
return html
|
|
15
|
-
<md-outlined-field
|
|
16
|
-
id="field"
|
|
17
|
-
part="field"
|
|
18
|
-
.label=${this.label}
|
|
19
|
-
.populated=${!!this.value}
|
|
20
|
-
.disabled=${this.disabled}
|
|
21
|
-
.required=${this.required}
|
|
22
|
-
.error=${this.error}
|
|
23
|
-
.focused=${this.open || this.focused}
|
|
24
|
-
supportingtext=${this.supportingText}
|
|
25
|
-
@click=${this.toggle}
|
|
26
|
-
@keydown=${this._handleFieldKeydown}
|
|
27
|
-
@focus=${()=>this.focused = true}
|
|
28
|
-
@blur=${()=>this.focused = false}
|
|
29
|
-
tabindex=${this.disabled ? '-1' : '0'}
|
|
30
|
-
role="combobox"
|
|
31
|
-
aria-haspopup="listbox"
|
|
32
|
-
aria-expanded=${this.open}
|
|
33
|
-
aria-controls="menu"
|
|
34
|
-
aria-disabled=${this.disabled}
|
|
35
|
-
aria-required=${this.required}
|
|
36
|
-
>
|
|
37
|
-
${this.renderFieldContent()}
|
|
38
|
-
</md-outlined-field>
|
|
39
|
-
`;
|
|
14
|
+
return html`<md-outlined-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${()=>this.focused = true}" @blur="${()=>this.focused = false}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-outlined-field>`;
|
|
40
15
|
}
|
|
41
16
|
}
|
|
42
17
|
MdOutlinedSelect = _ts_decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const selectStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}[part=field]{cursor:pointer;outline:
|
|
2
|
+
export const selectStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}[part=field]{cursor:pointer;outline:0;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=menu]{--md-menu-max-height:300px;min-width:100%}`;
|
package/src/m3/select/select.js
CHANGED
|
@@ -7,28 +7,7 @@ import { Select } from '../../base/select.js';
|
|
|
7
7
|
* @fires {Event} input - Fired when the selected value has changed.
|
|
8
8
|
*/ export class M3Select extends Select {
|
|
9
9
|
renderMenu() {
|
|
10
|
-
return html
|
|
11
|
-
<md-menu
|
|
12
|
-
part="menu"
|
|
13
|
-
id="menu"
|
|
14
|
-
for="field"
|
|
15
|
-
type="listbox"
|
|
16
|
-
data-tabindex="-1"
|
|
17
|
-
?quick="${this.quick}"
|
|
18
|
-
offset="${this.offset}"
|
|
19
|
-
align="${this.align}"
|
|
20
|
-
align-strategy="${this.alignStrategy}"
|
|
21
|
-
keep-open-blur
|
|
22
|
-
no-focus-control
|
|
23
|
-
?open="${this.open}"
|
|
24
|
-
@open="${()=>this.open = true}"
|
|
25
|
-
@close="${()=>this.open = false}"
|
|
26
|
-
@item-focus="${this._handleMenuItemFocus}"
|
|
27
|
-
@select="${this._handleMenuSelect}"
|
|
28
|
-
>
|
|
29
|
-
<slot part="items" @slotchange=${this._handleSlotChange}></slot>
|
|
30
|
-
</md-menu>
|
|
31
|
-
`;
|
|
10
|
+
return html`<md-menu part="menu" id="menu" for="field" type="listbox" data-tabindex="-1" ?quick="${this.quick}" offset="${this.offset}" align="${this.align}" align-strategy="${this.alignStrategy}" keep-open-blur no-focus-control ?open="${this.open}" @open="${()=>this.open = true}" @close="${()=>this.open = false}" @item-focus="${this._handleMenuItemFocus}" @select="${this._handleMenuSelect}"><slot part="items" @slotchange="${this._handleSlotChange}"></slot></md-menu>`;
|
|
32
11
|
}
|
|
33
12
|
constructor(...args){
|
|
34
13
|
super(...args), this.label = '', this.supportingText = '', this.focused = false;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100% * var(--_start));--_end-px:calc(100% * var(--_end));--_inv-start-px:calc(100% * (1 - var(--_start)));--_inv-end-px:calc(100% * (1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start) / 2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end) / 2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track
|
|
2
|
+
export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100% * var(--_start));--_end-px:calc(100% * var(--_end));--_inv-start-px:calc(100% * (1 - var(--_start)));--_inv-end-px:calc(100% * (1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start) / 2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end) / 2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.tickmarks,.track{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.tickmarks div,.track div{inset:0 calc(var(--_target-size)/ 2);position:absolute}.track div{border-radius:var(--_track-shape)}.track .inactive-after,.track .inactive-before{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-after,:host([disabled]) .track .inactive-before{background:var(--md-sys-color-on-surface);opacity:.315789}:host([disabled]) .track .active{background:var(--md-sys-color-on-surface)}.tickmarks div{--_tick-color:var(--md-sys-color-on-secondary-container);background-size:calc((100% - var(--_tick-size) * 2)/ var(--_ticks)) 100%;background-image:radial-gradient(circle at var(--_tick-size) center,var(--_tick-color) 0,var(--_tick-color) calc(var(--_tick-size)/ 2),transparent calc(var(--_tick-size)/ 2))}.tickmarks .active{--_tick-color:var(--md-sys-color-on-primary)}:host([disabled]) .tickmarks div{--_tick-color:var(--md-sys-color-on-surface)}:host([disabled]) .tickmarks .active{--_tick-color:var(--md-sys-color-inverse-on-surface)}.inactive-before{clip-path:inset(0 var(--_cut-inv-start) 0 0 round 2px)}.inactive-after{clip-path:inset(0 0 0 var(--_cut-inv-end) round 2px)}.active{clip-path:inset(0 var(--_cut-end) 0 0 round 2px)}.ranged .active{clip-path:inset(0 var(--_cut-end) 0 var(--_cut-start) round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_cut-inv-start) round 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_cut-inv-end) 0 0 round 2px)}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_cut-end) round 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_cut-start) 0 var(--_cut-end) round 2px)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-size)/ 2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(var(--_end-px) - var(--_start-px));position:relative;inset-block:0;inset-inline-start:var(--_start-px)}.handle{--md-ripple-color:var(--md-sys-color-primary);block-size:var(--_target-size);inline-size:var(--_target-size);border-radius:var(--_handle-shape);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:var(--md-sys-color-on-surface)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .label{opacity:1}}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:0}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--track-len:calc(100% - var(--_target-size));--mid-frac:calc(var(--_start) + ((var(--_end) - var(--_start)) / 2));--clip-px:calc(var(--_half-target) + var(--track-len) * var(--mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--clip-px)) 0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--clip-px))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--clip-px)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--clip-px) 0 0)}.onTop{z-index:1}`;
|