@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/slider/slider.js
CHANGED
|
@@ -52,56 +52,23 @@ export class M3Slider extends Slider {
|
|
|
52
52
|
start: false,
|
|
53
53
|
label: labelEnd
|
|
54
54
|
};
|
|
55
|
-
return html
|
|
56
|
-
class="container ${classMap(containerClasses)}"
|
|
57
|
-
style=${styleMap(containerStyles)}
|
|
58
|
-
>
|
|
59
|
-
${when(this.range, ()=>this.renderInput(inputStartProps))}
|
|
60
|
-
${this.renderInput(inputEndProps)} ${this.renderTrack()}
|
|
61
|
-
<div class="handles-padded">
|
|
62
|
-
<div class="handles">
|
|
63
|
-
${when(this.range, ()=>this.renderHandle(handleStartProps))}
|
|
64
|
-
${this.renderHandle(handleEndProps)}
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</div>`;
|
|
55
|
+
return html`<div class="container ${classMap(containerClasses)}" style="${styleMap(containerStyles)}">${when(this.range, ()=>this.renderInput(inputStartProps))} ${this.renderInput(inputEndProps)} ${this.renderTrack()}<div class="handles-padded"><div class="handles">${when(this.range, ()=>this.renderHandle(handleStartProps))} ${this.renderHandle(handleEndProps)}</div></div></div>`;
|
|
68
56
|
}
|
|
69
57
|
renderTrack() {
|
|
70
|
-
return html
|
|
71
|
-
<div class="track">
|
|
72
|
-
<div class="inactive-before"></div>
|
|
73
|
-
<div class="active"></div>
|
|
74
|
-
<div class="inactive-after"></div>
|
|
75
|
-
</div>
|
|
76
|
-
${this.ticks ? html`
|
|
77
|
-
<div class="tickmarks">
|
|
78
|
-
<div class="inactive-before"></div>
|
|
79
|
-
<div class="active"></div>
|
|
80
|
-
<div class="inactive-after"></div>
|
|
81
|
-
</div>
|
|
82
|
-
` : nothing}
|
|
83
|
-
`;
|
|
58
|
+
return html`<div class="track"><div class="inactive-before"></div><div class="active"></div><div class="inactive-after"></div></div>${this.ticks ? html`<div class="tickmarks"><div class="inactive-before"></div><div class="active"></div><div class="inactive-after"></div></div>` : nothing}`;
|
|
84
59
|
}
|
|
85
60
|
renderLabel(value) {
|
|
86
|
-
return html`<div class="label" aria-hidden="true"
|
|
87
|
-
<span part="label">${value}</span>
|
|
88
|
-
</div>`;
|
|
61
|
+
return html`<div class="label" aria-hidden="true"><span part="label">${value}</span></div>`;
|
|
89
62
|
}
|
|
90
63
|
renderHandle({ start, label }) {
|
|
91
64
|
const onTop = !this.disabled && start === this.startOnTop;
|
|
92
65
|
const isOverlapping = !this.disabled && this.handlesOverlapping;
|
|
93
66
|
const name = start ? 'start' : 'end';
|
|
94
|
-
return html`<div
|
|
95
|
-
class="handle ${classMap({
|
|
67
|
+
return html`<div class="handle ${classMap({
|
|
96
68
|
[name]: true,
|
|
97
69
|
onTop,
|
|
98
70
|
isOverlapping
|
|
99
|
-
})}"
|
|
100
|
-
>
|
|
101
|
-
<md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
|
|
102
|
-
<div class="nub"></div>
|
|
103
|
-
${when(this.labeled, ()=>this.renderLabel(label))}
|
|
104
|
-
</div>`;
|
|
71
|
+
})}"><md-focus-ring part="focus-ring" for="${name}"></md-focus-ring><div class="nub"></div>${when(this.labeled, ()=>this.renderLabel(label))}</div>`;
|
|
105
72
|
}
|
|
106
73
|
}
|
|
107
74
|
M3Slider = _ts_decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const switchStyles = css`:host{--_outline-color:var(--md-sys-color-outline);--_track-color:var(--md-sys-color-surface-container-highest);--_thumb-color:var(--md-sys-color-outline);--_icon-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb,
|
|
2
|
+
export const switchStyles = css`:host{--_outline-color:var(--md-sys-color-outline);--_track-color:var(--md-sys-color-surface-container-highest);--_thumb-color:var(--md-sys-color-outline);--_icon-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb,var(--_track-color) var(--_track-opacity,100%),transparent);border-color:color-mix(in srgb,var(--_outline-color) var(--_outline-opacity,100%),transparent);box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;height:32px;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;border-style:solid;border-width:2px;border-radius:9999px;outline:0;place-content:center;place-items:center;width:52px;display:inline-grid;position:relative}:host(:state(checked)){--_outline-color:var(--md-sys-color-primary);--_track-color:var(--md-sys-color-primary);--_thumb-color:var(--md-sys-color-on-primary);--_icon-color:var(--md-sys-color-on-primary-container);--_ripple-color:var(--md-sys-color-primary)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:12%;--_track-color:var(--md-sys-color-surface-variant);--_track-opacity:12%;--_thumb-color:var(--md-sys-color-on-surface);--_thumb-opacity:38%;--_icon-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)){--_outline-color:var(--md-sys-color-surface);--_track-color:var(--md-sys-color-on-surface);--_thumb-color:var(--md-sys-color-surface);--_thumb-opacity:100%;--_icon-color:var(--md-sys-color-on-surface)}:host([icons]:not(:state(checked)):not([checkedicononly])) [part~=icon-off],:host([icons]:state(checked)) [part~=icon-on]{--_icon-opacity:100%}:host([icons]:state(checked):disabled) [part~=icon-on]{--_icon-opacity:38%}@media (hover:hover) and (pointer:fine){:host(:hover){--_thumb-color:var(--md-sys-color-on-surface-variant)}:host(:state(checked):hover){--_thumb-color:var(--md-sys-color-primary-container)}}@media (forced-colors:active){:host{forced-color-adjust:none}}[part~=thumb]{--_thumb-diameter:16px;--_thumb-diff-default:20px;background-color:color-mix(in srgb,var(--_thumb-color) var(--_thumb-opacity,100%),transparent);height:var(--_thumb-diameter);transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),height var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),margin var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);width:var(--_thumb-diameter);z-index:1;border-radius:50%;place-content:center;place-items:center;margin-inline-start:calc(var(--_thumb-diff-pointer,0px) - var(--_thumb-diff-default));display:grid;position:absolute}:host(:state(checked)) [part~=thumb]{--_thumb-diameter:24px;--_thumb-diff-default:-20px;background-color:var(--_thumb-color)}:host([icons]:not([checkedicononly])) [part~=thumb]{--_thumb-diameter:24px}:host(:active) [part~=thumb]{--_thumb-color:var(--md-sys-color-on-surface-variant);--_thumb-diameter:28px!important}:host(:state(checked):active) [part~=thumb]{--_thumb-color:var(--md-sys-color-primary-container)}[part~=icons]{fill:color-mix(in srgb,var(--_icon-color) var(--_icon-opacity,0),transparent);width:16px;height:16px;transition:fill 67ms linear;position:absolute}md-focus-ring{inset:-4px}md-ripple{color:var(--_ripple-color);height:40px;inset:unset;width:40px}`;
|
package/src/m3/switch/switch.js
CHANGED
|
@@ -16,32 +16,13 @@ export class M3Switch extends ToggleButton {
|
|
|
16
16
|
];
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return html
|
|
20
|
-
<md-focus-ring></md-focus-ring>
|
|
21
|
-
<div part="thumb">
|
|
22
|
-
<md-ripple spacebehavior="always"></md-ripple>
|
|
23
|
-
<span part="target"></span>
|
|
24
|
-
${this.renderOffIcon()}${this.renderOnIcon()}
|
|
25
|
-
</div>
|
|
26
|
-
`;
|
|
19
|
+
return html`<md-focus-ring></md-focus-ring><div part="thumb"><md-ripple spacebehavior="always"></md-ripple><span part="target"></span> ${this.renderOffIcon()}${this.renderOnIcon()}</div>`;
|
|
27
20
|
}
|
|
28
21
|
renderOnIcon() {
|
|
29
|
-
return html
|
|
30
|
-
<svg part="icons icon-on" viewBox="0 0 24 24" aria-hidden="true">
|
|
31
|
-
<path
|
|
32
|
-
d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"
|
|
33
|
-
/>
|
|
34
|
-
</svg>
|
|
35
|
-
`;
|
|
22
|
+
return html`<svg part="icons icon-on" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/></svg>`;
|
|
36
23
|
}
|
|
37
24
|
renderOffIcon() {
|
|
38
|
-
return html
|
|
39
|
-
<svg part="icons icon-off" viewBox="0 0 24 24" aria-hidden="true">
|
|
40
|
-
<path
|
|
41
|
-
d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"
|
|
42
|
-
/>
|
|
43
|
-
</svg>
|
|
44
|
-
`;
|
|
25
|
+
return html`<svg part="icons icon-off" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/></svg>`;
|
|
45
26
|
}
|
|
46
27
|
connectedCallback() {
|
|
47
28
|
super.connectedCallback();
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none
|
|
2
|
+
export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;outline:0;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color)}:host([selected]) md-focus-ring{margin-bottom:calc(var(--_tab-indicator-height) + 2px)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex}[part~=icon]{fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;
|
package/src/m3/tab/tab.js
CHANGED
|
@@ -14,15 +14,7 @@ export class M3Tab extends Tab {
|
|
|
14
14
|
];
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return html
|
|
18
|
-
<md-focus-ring inward></md-focus-ring>
|
|
19
|
-
<md-ripple inward></md-ripple>
|
|
20
|
-
<span part="target"></span>
|
|
21
|
-
<div part="content">
|
|
22
|
-
<slot part="icon" name="icon" aria-hidden="true"></slot>
|
|
23
|
-
<slot part="label"></slot>
|
|
24
|
-
</div>
|
|
25
|
-
`;
|
|
17
|
+
return html`<md-focus-ring inward></md-focus-ring><md-ripple inward></md-ripple><span part="target"></span><div part="content"><slot part="icon" name="icon" aria-hidden="true"></slot><slot part="label"></slot></div>`;
|
|
26
18
|
}
|
|
27
19
|
}
|
|
28
20
|
_ts_decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:left var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default),
|
|
2
|
+
export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:left var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default),width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);will-change:left,width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface);--_tab-indicator-height:2px}:host([secondary]) [part=indicator]{border-radius:0}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}`;
|
package/src/m3/tab/tabs.js
CHANGED
|
@@ -12,10 +12,7 @@ export class M3Tabs extends Tabs {
|
|
|
12
12
|
];
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return html
|
|
16
|
-
${super.render()}
|
|
17
|
-
<div part="indicator" role="presentation"></div>
|
|
18
|
-
`;
|
|
15
|
+
return html`${super.render()}<div part="indicator" role="presentation"></div>`;
|
|
19
16
|
}
|
|
20
17
|
selectTab(selectedTab) {
|
|
21
18
|
super.selectTab(selectedTab);
|
|
@@ -11,18 +11,7 @@ export class M3FilledTextField extends Input {
|
|
|
11
11
|
];
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return html
|
|
15
|
-
<md-filled-field
|
|
16
|
-
label=${this.label}
|
|
17
|
-
supportingtext=${this.supportingText}
|
|
18
|
-
?populated=${!!this.value}
|
|
19
|
-
?disabled=${this.disabled}
|
|
20
|
-
?focused=${this.focused}
|
|
21
|
-
?error=${this.checkValidity() === false}
|
|
22
|
-
>
|
|
23
|
-
${super.render()}
|
|
24
|
-
</md-filled-field>
|
|
25
|
-
`;
|
|
14
|
+
return html`<md-filled-field label="${this.label}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}</md-filled-field>`;
|
|
26
15
|
}
|
|
27
16
|
constructor(...args){
|
|
28
17
|
super(...args), this.label = '', this.supportingText = '';
|
|
@@ -11,20 +11,7 @@ export class M3OutlinedTextField extends Input {
|
|
|
11
11
|
];
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return html
|
|
15
|
-
<md-outlined-field
|
|
16
|
-
label=${this.label}
|
|
17
|
-
supportingtext=${this.supportingText}
|
|
18
|
-
?populated=${!!this.value}
|
|
19
|
-
?disabled=${this.disabled}
|
|
20
|
-
?focused=${this.focused}
|
|
21
|
-
?error=${this.checkValidity() === false}
|
|
22
|
-
>
|
|
23
|
-
${super.render()}
|
|
24
|
-
<slot slot="start" name="start"></slot>
|
|
25
|
-
<slot slot="end" name="end"></slot>
|
|
26
|
-
</md-outlined-field>
|
|
27
|
-
`;
|
|
14
|
+
return html`<md-outlined-field label="${this.label}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}<slot slot="start" name="start"></slot><slot slot="end" name="end"></slot></md-outlined-field>`;
|
|
28
15
|
}
|
|
29
16
|
constructor(...args){
|
|
30
17
|
super(...args), this.label = '', this.supportingText = '';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const textFieldStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block}md-filled-field,md-outlined-field{width:100%}[part=input]{color:inherit;font:var(--md-sys-typography-body-large);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:
|
|
2
|
+
export const textFieldStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block}md-filled-field,md-outlined-field{width:100%}[part=input]{color:inherit;font:var(--md-sys-typography-body-large);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:0;width:100%;height:100%;margin:0;padding:0}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const toolbarStyles = css`:host{--_padding:16px;--_gap:32px;--_container-color:var(--md-sys-color-surface-container);--_on-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb,
|
|
2
|
+
export const toolbarStyles = css`:host{--_padding:16px;--_gap:32px;--_container-color:var(--md-sys-color-surface-container);--_on-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb,var(--_container-color) var(--_container-opacity,100%),transparent);box-sizing:border-box;color:color-mix(in srgb,var(--_on-color) var(--_on-opacity,100%),transparent);align-items:center;width:100%;height:64px;display:flex}[part=container]{box-sizing:border-box;align-items:center;gap:var(--_gap);height:64px;padding:0 var(--_padding);flex:auto;justify-content:space-between;width:100%;display:flex}[part=fab-slot]{justify-content:flex-end;align-items:center;display:flex}:host(:not([orientation=vertical])) ::slotted([slot=fab]){margin-inline-start:8px}:host([orientation=vertical]) ::slotted([slot=fab]){margin-block-start:8px}:host([type=floating]){--_padding:12px;--_gap:4px;--_container-color:var(--md-sys-color-surface-container-high);box-shadow:none;background:0 0;width:fit-content;max-width:calc(100% - 32px);box-shadow:var(--md-toolbar-shadow,var(--md-sys-elevation-shadow-3));border-radius:32px;width:fit-content}& ::slotted(md-button),& ::slotted(md-button-toggle),& ::slotted(md-icon-button),& ::slotted(md-icon-button-toggle){--md-focus-ring-shape:calc(var(--_h) / 2);border-radius:calc(var(--_h)/ 2)}::slotted(md-icon-button-toggle[variant=tonal]:not(:state(checked))){--_background-color:transparent}:host([color=vibrant]){--_container-color:var(--md-sys-color-primary-container);--_on-color:var(--md-sys-color-on-primary-container)}`;
|
|
@@ -10,14 +10,7 @@ export class M3Toolbar extends InternalsAttached(LitElement) {
|
|
|
10
10
|
];
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return html
|
|
14
|
-
<div part="container">
|
|
15
|
-
<slot></slot>
|
|
16
|
-
</div>
|
|
17
|
-
<div part="fab-slot">
|
|
18
|
-
<slot name="fab"></slot>
|
|
19
|
-
</div>
|
|
20
|
-
`;
|
|
13
|
+
return html`<div part="container"><slot></slot></div><div part="fab-slot"><slot name="fab"></slot></div>`;
|
|
21
14
|
}
|
|
22
15
|
constructor(){
|
|
23
16
|
super(), this.type = 'docked', this.color = 'standard', this.orientation = 'horizontal';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const tooltipStyles = css`:host{background-color:var(--md-sys-color-inverse-surface);box-sizing:border-box;color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;pointer-events:none;z-index:800;border-radius:4px;align-items:center;width:max-content;min-height:24px;padding:4px 8px;display:flex;position:absolute;top:0;left:0;transform:scaleY(.35)}:host(:state(closed)){display:none}:host(:state(opening):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transition:color linear 67ms 67ms,
|
|
2
|
+
export const tooltipStyles = css`:host{background-color:var(--md-sys-color-inverse-surface);box-sizing:border-box;color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;pointer-events:none;z-index:800;border-radius:4px;align-items:center;width:max-content;min-height:24px;padding:4px 8px;display:flex;position:absolute;top:0;left:0;transform:scaleY(.35)}:host(:state(closed)){display:none}:host(:state(opening):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transition:color linear 67ms 67ms,opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(1)}:host(:state(opened):not([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing):not([forceinvisible])){color:#0000;opacity:0;transition:color linear 67ms,opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(.35)}`;
|