@vollowx/seele 0.13.0 → 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 +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 +37 -42
- 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
|
@@ -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)}`;
|