@vollowx/seele 0.12.10 → 0.13.1
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 +34 -58
- package/package.json +6 -5
- package/src/all.js +5 -0
- package/src/base/autocomplete.js +1 -4
- package/src/base/dialog.js +32 -0
- 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 +2 -0
- package/src/m3/dialog/dialog.js +215 -0
- 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-styles.css.js +2 -0
- package/src/m3/loading-indicator/loading-indicator.js +320 -0
- 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/system/base.css +0 -1
- package/src/m3/system/typography.css +5 -5
- 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-styles.css.js +2 -0
- package/src/win98/button/button.js +19 -0
- package/src/m3/system/motion.css +0 -30
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
+
import { LitElement, html } from 'lit';
|
|
3
|
+
import { customElement } from '../../core/decorators';
|
|
4
|
+
import { standardButtonGroupStyles } from './standard-button-group-styles.css.js';
|
|
5
|
+
import { queryAssignedElements } from 'lit/decorators.js';
|
|
6
|
+
const EXPAND_FACTOR = 1.15;
|
|
7
|
+
const shapeAnimation = Symbol('shapeAnimation');
|
|
8
|
+
export class M3StandardButtonGroup extends LitElement {
|
|
9
|
+
static{
|
|
10
|
+
this.styles = [
|
|
11
|
+
standardButtonGroupStyles
|
|
12
|
+
];
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
|
|
16
|
+
}
|
|
17
|
+
connectedCallback() {
|
|
18
|
+
super.connectedCallback();
|
|
19
|
+
this.addEventListener('pointerdown', this.#handlePointerDown);
|
|
20
|
+
this.addEventListener('keydown', this.#handleKeyDown, {
|
|
21
|
+
capture: true
|
|
22
|
+
});
|
|
23
|
+
window.addEventListener('pointerup', this.#reset);
|
|
24
|
+
window.addEventListener('pointercancel', this.#reset);
|
|
25
|
+
window.addEventListener('keyup', this.#reset, {
|
|
26
|
+
capture: true
|
|
27
|
+
});
|
|
28
|
+
this.#resizeObserver = new ResizeObserver((entries)=>{
|
|
29
|
+
if (this.#activeIndex !== -1) return; // Skip if animating
|
|
30
|
+
entries.forEach((entry)=>{
|
|
31
|
+
const target = entry.target;
|
|
32
|
+
const index = this.$buttons.indexOf(target);
|
|
33
|
+
if (index !== -1) {
|
|
34
|
+
const currentWidth = target.style.width;
|
|
35
|
+
target.style.width = '';
|
|
36
|
+
this.#baseWidths[index] = entry.target.getBoundingClientRect().width;
|
|
37
|
+
if (currentWidth) target.style.width = currentWidth;
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
disconnectedCallback() {
|
|
43
|
+
window.removeEventListener('pointerup', this.#reset);
|
|
44
|
+
window.removeEventListener('pointercancel', this.#reset);
|
|
45
|
+
window.removeEventListener('keyup', this.#reset, {
|
|
46
|
+
capture: true
|
|
47
|
+
});
|
|
48
|
+
this.#resizeObserver.disconnect();
|
|
49
|
+
super.disconnectedCallback();
|
|
50
|
+
}
|
|
51
|
+
#activeIndex;
|
|
52
|
+
#resizeObserver;
|
|
53
|
+
#baseWidths;
|
|
54
|
+
#handleSlotChange;
|
|
55
|
+
#handlePointerDown;
|
|
56
|
+
#handleKeyDown;
|
|
57
|
+
#reset;
|
|
58
|
+
/**
|
|
59
|
+
* Passing no element resets all shape changes
|
|
60
|
+
*/ updateLayout(target = null) {
|
|
61
|
+
const pressedIndex = target ? this.$buttons.indexOf(target) : -1;
|
|
62
|
+
this.#activeIndex = pressedIndex;
|
|
63
|
+
const pressedBaseWidth = pressedIndex !== -1 ? this.#baseWidths[pressedIndex] : 0;
|
|
64
|
+
const expansionDelta = pressedBaseWidth * (EXPAND_FACTOR - 1);
|
|
65
|
+
const isPressedAtEdge = pressedIndex === 0 || pressedIndex === this.$buttons.length - 1;
|
|
66
|
+
this.$buttons.forEach((btn, i)=>{
|
|
67
|
+
const currentWidth = btn.getBoundingClientRect().width;
|
|
68
|
+
let targetWidth = this.#baseWidths[i];
|
|
69
|
+
if (pressedIndex !== -1) {
|
|
70
|
+
if (i === pressedIndex) {
|
|
71
|
+
targetWidth = pressedBaseWidth * EXPAND_FACTOR;
|
|
72
|
+
} else if (Math.abs(i - pressedIndex) === 1) {
|
|
73
|
+
if (isPressedAtEdge) targetWidth = this.#baseWidths[i] - expansionDelta;
|
|
74
|
+
else targetWidth = this.#baseWidths[i] - expansionDelta / 2;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
const styles = getComputedStyle(this);
|
|
78
|
+
const rawDuration = styles.getPropertyValue('--md-sys-motion-spatial-fast-duration');
|
|
79
|
+
const rawEasing = styles.getPropertyValue('--md-sys-motion-spatial-fast');
|
|
80
|
+
const duration = parseInt(rawDuration.substring(0, rawDuration.length - 2)) || 0;
|
|
81
|
+
const easing = rawEasing || 'ease';
|
|
82
|
+
if (btn[shapeAnimation]) btn[shapeAnimation].cancel();
|
|
83
|
+
btn[shapeAnimation] = btn.animate([
|
|
84
|
+
{
|
|
85
|
+
width: `${currentWidth}px`
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
width: `${targetWidth}px`
|
|
89
|
+
}
|
|
90
|
+
], {
|
|
91
|
+
duration,
|
|
92
|
+
easing,
|
|
93
|
+
fill: 'forwards'
|
|
94
|
+
});
|
|
95
|
+
btn[shapeAnimation].onfinish = ()=>{
|
|
96
|
+
if (pressedIndex === -1) {
|
|
97
|
+
btn.style.width = '';
|
|
98
|
+
btn[shapeAnimation].cancel();
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
constructor(...args){
|
|
104
|
+
super(...args), this.#activeIndex = -1, this.#baseWidths = [], this.#handleSlotChange = ()=>{
|
|
105
|
+
this.#resizeObserver.disconnect();
|
|
106
|
+
this.$buttons.forEach((btn, i)=>{
|
|
107
|
+
this.#baseWidths[i] = btn.getBoundingClientRect().width;
|
|
108
|
+
this.#resizeObserver.observe(btn);
|
|
109
|
+
});
|
|
110
|
+
}, this.#handlePointerDown = (e)=>{
|
|
111
|
+
if (this === e.target) return;
|
|
112
|
+
this.updateLayout(e.target);
|
|
113
|
+
}, this.#handleKeyDown = (e)=>{
|
|
114
|
+
if (e.key !== ' ' && e.key !== 'Enter') return;
|
|
115
|
+
this.updateLayout(e.target);
|
|
116
|
+
}, this.#reset = (e)=>{
|
|
117
|
+
if (e && e.type === 'keyup' && e.key !== ' ' && e.key !== 'Enter') return;
|
|
118
|
+
if (this.#activeIndex !== -1) {
|
|
119
|
+
this.#activeIndex = -1;
|
|
120
|
+
this.updateLayout();
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
_ts_decorate([
|
|
126
|
+
queryAssignedElements()
|
|
127
|
+
], M3StandardButtonGroup.prototype, "$buttons", void 0);
|
|
128
|
+
M3StandardButtonGroup = _ts_decorate([
|
|
129
|
+
customElement('md-button-group', false)
|
|
130
|
+
], M3StandardButtonGroup);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const checkboxStyles = css`:host{--md-focus-ring-radius:9999px;--_container-color:transparent;--_outline-color:var(--md-sys-color-on-surface-variant);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);--_checkbox-size:18px;background-color:color-mix(in srgb,
|
|
2
|
+
export const checkboxStyles = css`:host{--md-focus-ring-radius:9999px;--_container-color:transparent;--_outline-color:var(--md-sys-color-on-surface-variant);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);--_checkbox-size:18px;background-color:color-mix(in srgb,var(--_container-color) var(--_container-opacity,100%),transparent);border-color:color-mix(in srgb,var(--_outline-color) var(--_outline-opacity,100%),transparent);border-style:solid;border-width:var(--md-checkbox-outline-width,2px);box-sizing:border-box;cursor:pointer;height:var(--_checkbox-size);-webkit-tap-highlight-color:transparent;transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;width:var(--_checkbox-size);border-radius:2px;outline:0;place-content:center;place-items:center;margin:15px;display:inline-grid;position:relative}:host(:state(checked)),:host(:state(indeterminate)){--_container-color:var(--md-sys-color-primary);--_outline-color:var(--md-sys-color-primary);--_mark-color:var(--md-sys-color-on-primary);--_mark-opacity:100%;--_ripple-color:var(--md-sys-color-primary)}:host([error]){--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-error)}:host([error]:state(checked)),:host([error]:state(indeterminate)){--_container-color:var(--md-sys-color-error);--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-on-error);--_ripple-color:var(--md-sys-color-error)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:38%;--_mark-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)),:host(:disabled:state(indeterminate)){--_container-color:var(--md-sys-color-on-surface);--_container-opacity:38%;--_outline-color:var(--md-sys-color-surface);--_outline-opacity:0%;--_mark-color:var(--md-sys-color-surface)}@media (hover:hover) and (pointer:fine){:host(:hover){--_unchecked-outline-color:var(--md-sys-color-on-surface)}}@media (forced-colors:active){:host{forced-color-adjust:none}}:host(:disabled){--_unchecked-container-opacity:38%}[part~=icon]{fill:color-mix(in srgb,var(--_mark-color) var(--_mark-opacity,0),transparent);height:18px;transition:fill var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);width:18px;position:absolute;inset:-2px}[part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default);transform:scaleY(-1) translate(7px,-14px) rotate(45deg)}:host(:state(indeterminate)) [part~=mark]{transform:scaleY(-1) translate(4px,-10px) rotate(0)}:host(:state(checked)) [part~=mark],:host(:state(indeterminate)) [part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default)}[part~=mark-short]{width:2px;height:0;transition-property:transform,height}[part~=mark-long]{width:0;height:2px;transition-property:transform,width}:host(:not(:state(checked)):not(:state(indeterminate)):state(was-checked)) [part~=mark],:host(:not(:state(checked)):not(:state(indeterminate)):state(was-indeterminate)) [part~=mark]{transition-delay:var(--md-sys-motion-effects-fast-duration)}:host(:state(checked)) [part~=mark-short]{height:5.65685px}:host(:state(checked)) [part~=mark-long]{width:11.3137px}:host(:state(checked):state(was-unchecked)) [part~=mark-short]{transition-property:none}:host(:state(indeterminate)) [part~=mark-short]{height:2px}:host(:state(indeterminate)) [part~=mark-long]{width:10px}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-short]{transition-property:height}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-long]{transition-property:width}md-focus-ring{height:44px;inset:unset;width:44px}md-ripple{--md-ripple-color:var(--_ripple-color);height:40px;inset:unset;border-radius:9999px;width:40px}`;
|
|
@@ -14,20 +14,10 @@ export class M3Checkbox extends Checkbox {
|
|
|
14
14
|
];
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return html
|
|
18
|
-
<md-focus-ring></md-focus-ring>
|
|
19
|
-
<md-ripple enterbehavior="none"></md-ripple>
|
|
20
|
-
<span part="target"></span>
|
|
21
|
-
${this.renderIcon()}
|
|
22
|
-
`;
|
|
17
|
+
return html`<md-focus-ring></md-focus-ring><md-ripple enterbehavior="none"></md-ripple><span part="target"></span> ${this.renderIcon()}`;
|
|
23
18
|
}
|
|
24
19
|
renderIcon() {
|
|
25
|
-
return html
|
|
26
|
-
<svg part="icon" viewBox="0 0 18 18" aria-hidden="true">
|
|
27
|
-
<rect part="mark mark-short"></rect>
|
|
28
|
-
<rect part="mark mark-long"></rect>
|
|
29
|
-
</svg>
|
|
30
|
-
`;
|
|
20
|
+
return html`<svg part="icon" viewBox="0 0 18 18" aria-hidden="true"><rect part="mark mark-short"></rect><rect part="mark mark-long"></rect></svg>`;
|
|
31
21
|
}
|
|
32
22
|
constructor(...args){
|
|
33
23
|
super(...args), this.error = false;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const dialogStyles = css`dialog{background:0 0;border:none;outline:0;min-width:280px;max-width:min(560px,100% - 48px);min-height:140px;max-height:min(560px,100% - 48px);padding:0;overflow:visible}dialog[open]{display:flex}dialog::backdrop{background:0 0}[part=container]{box-sizing:border-box;will-change:height,transform,opacity;background-color:var(--md-sys-color-surface-container-high);border-radius:28px;flex-direction:column;flex-grow:1;padding-top:8px;display:flex;position:relative;overflow:hidden}[part=headline]{flex-direction:column;display:flex}::slotted([slot=icon]){block-size:1em;color:var(--md-sys-color-secondary);fill:currentColor;inline-size:1em;margin:16px 0 0;font-size:24px}::slotted([slot=headline]){box-sizing:border-box;font:var(--md-sys-typography-headline-small);color:var(--md-sys-color-on-surface);margin:0;padding:16px 24px 0}[part=headline].has-icon{align-items:center}[part=content]{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-medium);will-change:opacity;padding:16px 24px 0;display:block}[part=actions]{justify-content:flex-end;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}slot[name=actions]::slotted(*){box-sizing:border-box;justify-content:flex-end;gap:8px;padding:24px;display:flex}[part=scrim]{background:var(--md-sys-color-scrim);opacity:.32;pointer-events:none;z-index:1;display:none;position:fixed;inset:0}dialog[open]+[part=scrim]{display:block}`;
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { query, state, customElement } from 'lit/decorators.js';
|
|
4
|
+
import { Dialog } from '../../base/dialog';
|
|
5
|
+
import { dialogStyles } from './dialog-styles.css.js';
|
|
6
|
+
export class M3Dialog extends Dialog {
|
|
7
|
+
static{
|
|
8
|
+
this.styles = [
|
|
9
|
+
dialogStyles
|
|
10
|
+
];
|
|
11
|
+
}
|
|
12
|
+
render() {
|
|
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>`;
|
|
14
|
+
}
|
|
15
|
+
#activeAnimations;
|
|
16
|
+
#clearAnimations() {
|
|
17
|
+
this.#activeAnimations.forEach((anim)=>anim.cancel());
|
|
18
|
+
this.#activeAnimations = [];
|
|
19
|
+
this.#opening = this.#closing = false;
|
|
20
|
+
}
|
|
21
|
+
#handleClick;
|
|
22
|
+
#handleIconSlotChange;
|
|
23
|
+
#opening;
|
|
24
|
+
show() {
|
|
25
|
+
if (this.#opening) return;
|
|
26
|
+
this.#clearAnimations();
|
|
27
|
+
this.#opening = true;
|
|
28
|
+
// Reset margins to allow browser centering
|
|
29
|
+
this.$dialog.style.marginTop = 'auto';
|
|
30
|
+
this.$dialog.style.marginBottom = 'auto';
|
|
31
|
+
super.show();
|
|
32
|
+
const actionsHeight = this.$actions.offsetHeight;
|
|
33
|
+
this.$actionsPlaceholder.style.height = `${actionsHeight}px`;
|
|
34
|
+
this.$container.style.height = 'auto';
|
|
35
|
+
const startHeight = 0;
|
|
36
|
+
const endHeight = this.$container.offsetHeight;
|
|
37
|
+
// Lock the position to prevent auto-centering during animation
|
|
38
|
+
const rect = this.$container.getBoundingClientRect();
|
|
39
|
+
this.$dialog.style.marginTop = `${rect.top}px`;
|
|
40
|
+
this.$dialog.style.marginBottom = 'auto';
|
|
41
|
+
this.$container.style.minHeight = '0px';
|
|
42
|
+
const container = this.$container.animate([
|
|
43
|
+
{
|
|
44
|
+
height: `${startHeight}px`,
|
|
45
|
+
transform: `translateY(-${this._config.vertSlide}px)`
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
height: `${endHeight}px`,
|
|
49
|
+
transform: 'translateY(0px)'
|
|
50
|
+
}
|
|
51
|
+
], {
|
|
52
|
+
duration: this._config.openDur,
|
|
53
|
+
easing: this._config.openEase
|
|
54
|
+
});
|
|
55
|
+
const scrim = this.$scrim.animate([
|
|
56
|
+
{
|
|
57
|
+
opacity: 0
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
opacity: 0.32
|
|
61
|
+
}
|
|
62
|
+
], {
|
|
63
|
+
duration: this._config.openDur,
|
|
64
|
+
easing: this._config.openEase,
|
|
65
|
+
fill: 'forwards'
|
|
66
|
+
});
|
|
67
|
+
const body = this.$body.animate([
|
|
68
|
+
{
|
|
69
|
+
opacity: 0.2
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
opacity: 1
|
|
73
|
+
}
|
|
74
|
+
], {
|
|
75
|
+
duration: this._config.bodyFadeInDur,
|
|
76
|
+
easing: 'linear',
|
|
77
|
+
fill: 'forwards'
|
|
78
|
+
});
|
|
79
|
+
const actions = this.$actions.animate([
|
|
80
|
+
{
|
|
81
|
+
opacity: 0.5
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
opacity: 1
|
|
85
|
+
}
|
|
86
|
+
], {
|
|
87
|
+
duration: this._config.bodyFadeInDur,
|
|
88
|
+
easing: 'linear',
|
|
89
|
+
fill: 'forwards'
|
|
90
|
+
});
|
|
91
|
+
this.#activeAnimations.push(container, scrim, body, actions);
|
|
92
|
+
container.onfinish = ()=>{
|
|
93
|
+
this.$container.style.minHeight = '';
|
|
94
|
+
this.#clearAnimations();
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
#closing;
|
|
98
|
+
close() {
|
|
99
|
+
if (this.#closing) return;
|
|
100
|
+
this.#clearAnimations();
|
|
101
|
+
this.#closing = true;
|
|
102
|
+
const startHeight = this.$container.offsetHeight;
|
|
103
|
+
const endHeight = startHeight * 0.35;
|
|
104
|
+
this.$container.style.minHeight = '0px';
|
|
105
|
+
const containerSpatial = this.$container.animate([
|
|
106
|
+
{
|
|
107
|
+
height: `${startHeight}px`,
|
|
108
|
+
transform: 'translateY(0px)'
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
height: `${endHeight}px`,
|
|
112
|
+
transform: `translateY(-${this._config.vertSlide}px)`
|
|
113
|
+
}
|
|
114
|
+
], {
|
|
115
|
+
duration: this._config.closeDur,
|
|
116
|
+
easing: this._config.closeEase
|
|
117
|
+
});
|
|
118
|
+
const containerEffects = this.$container.animate([
|
|
119
|
+
{
|
|
120
|
+
opacity: 1
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
opacity: 0
|
|
124
|
+
}
|
|
125
|
+
], {
|
|
126
|
+
duration: this._config.closeDur - this._config.bodyFadeOutDur,
|
|
127
|
+
delay: this._config.bodyFadeOutDur,
|
|
128
|
+
easing: 'linear',
|
|
129
|
+
fill: 'forwards'
|
|
130
|
+
});
|
|
131
|
+
const scrim = this.$scrim.animate([
|
|
132
|
+
{
|
|
133
|
+
opacity: 0.32
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
opacity: 0
|
|
137
|
+
}
|
|
138
|
+
], {
|
|
139
|
+
duration: this._config.closeDur,
|
|
140
|
+
easing: this._config.closeEase,
|
|
141
|
+
fill: 'forwards'
|
|
142
|
+
});
|
|
143
|
+
const body = this.$body.animate([
|
|
144
|
+
{
|
|
145
|
+
opacity: 1
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
opacity: 0
|
|
149
|
+
}
|
|
150
|
+
], {
|
|
151
|
+
duration: this._config.bodyFadeOutDur,
|
|
152
|
+
easing: 'linear',
|
|
153
|
+
fill: 'forwards'
|
|
154
|
+
});
|
|
155
|
+
const actions = this.$actions.animate([
|
|
156
|
+
{
|
|
157
|
+
opacity: 1
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
opacity: 0
|
|
161
|
+
}
|
|
162
|
+
], {
|
|
163
|
+
duration: this._config.bodyFadeOutDur,
|
|
164
|
+
easing: 'linear',
|
|
165
|
+
fill: 'forwards'
|
|
166
|
+
});
|
|
167
|
+
this.#activeAnimations.push(containerSpatial, containerEffects, scrim, body, actions);
|
|
168
|
+
containerSpatial.onfinish = ()=>{
|
|
169
|
+
this.$container.style.minHeight = '';
|
|
170
|
+
super.close();
|
|
171
|
+
this.#clearAnimations();
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
constructor(...args){
|
|
175
|
+
super(...args), this._config = {
|
|
176
|
+
openEase: 'cubic-bezier(0, 0, 0, 1)',
|
|
177
|
+
closeEase: 'cubic-bezier(0.3, 0, 1, 1)',
|
|
178
|
+
vertSlide: 36,
|
|
179
|
+
openDur: 500,
|
|
180
|
+
closeDur: 200,
|
|
181
|
+
bodyFadeInDur: 200,
|
|
182
|
+
bodyFadeOutDur: 100
|
|
183
|
+
} /* Perhaps make them constants? I don't think that there will be anyone
|
|
184
|
+
making classes inheriting this class... */ , this.hasIcon = false, this.#activeAnimations = [], this.#handleClick = (e)=>{
|
|
185
|
+
const target = e.target;
|
|
186
|
+
if (!this.$container.contains(target) && !this.contains(target)) this.close();
|
|
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;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
_ts_decorate([
|
|
196
|
+
state()
|
|
197
|
+
], M3Dialog.prototype, "hasIcon", void 0);
|
|
198
|
+
_ts_decorate([
|
|
199
|
+
query('[part=container]')
|
|
200
|
+
], M3Dialog.prototype, "$container", void 0);
|
|
201
|
+
_ts_decorate([
|
|
202
|
+
query('[part=body]')
|
|
203
|
+
], M3Dialog.prototype, "$body", void 0);
|
|
204
|
+
_ts_decorate([
|
|
205
|
+
query('[part=actions]')
|
|
206
|
+
], M3Dialog.prototype, "$actions", void 0);
|
|
207
|
+
_ts_decorate([
|
|
208
|
+
query('.actions-placeholder')
|
|
209
|
+
], M3Dialog.prototype, "$actionsPlaceholder", void 0);
|
|
210
|
+
_ts_decorate([
|
|
211
|
+
query('[part=scrim]')
|
|
212
|
+
], M3Dialog.prototype, "$scrim", void 0);
|
|
213
|
+
M3Dialog = _ts_decorate([
|
|
214
|
+
customElement('md-dialog')
|
|
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-
|
|
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();
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const loadingIndicatorStyles = css`:host{aspect-ratio:1;background-color:var(--md-sys-color-surface);border-radius:9999px;place-items:center;width:48px;display:grid}:host([contained]){background-color:var(--md-sys-color-primary-container)}canvas{width:82%;height:82%;display:block}`;
|