@vollowx/seele 0.13.10 → 0.14.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 +3 -3
- package/custom-elements.json +604 -359
- package/package.json +1 -1
- package/src/all.d.ts +2 -2
- package/src/all.js +2 -2
- package/src/base/autocomplete.d.ts +9 -33
- package/src/base/autocomplete.js +42 -65
- package/src/base/button.d.ts +0 -1
- package/src/base/button.js +7 -11
- package/src/base/checkbox.d.ts +0 -2
- package/src/base/checkbox.js +6 -13
- package/src/base/controllers/list-controller.d.ts +1 -0
- package/src/base/controllers/list-controller.js +6 -1
- package/src/base/dialog.d.ts +2 -2
- package/src/base/dialog.js +11 -2
- package/src/base/list-item.d.ts +1 -1
- package/src/base/list-item.js +11 -12
- package/src/base/list.d.ts +16 -33
- package/src/base/list.js +91 -173
- package/src/base/menu.d.ts +41 -61
- package/src/base/menu.js +184 -306
- package/src/base/{experimental/popup.d.ts → popup.d.ts} +7 -11
- package/src/base/{experimental/popup.js → popup.js} +45 -90
- package/src/base/radio.js +5 -5
- package/src/base/select.d.ts +7 -53
- package/src/base/select.js +45 -79
- package/src/base/tooltip.js +2 -2
- package/src/core/focus.d.ts +11 -0
- package/src/core/focus.js +53 -0
- package/src/m3/autocomplete/autocomplete-styles.css.js +1 -1
- package/src/m3/autocomplete/autocomplete.d.ts +1 -0
- package/src/m3/autocomplete/autocomplete.js +2 -1
- package/src/m3/button/common-button-styles.css.js +1 -1
- package/src/m3/button/icon-button-styles.css.js +1 -1
- package/src/m3/button/icon-button-toggle.js +1 -1
- package/src/m3/button/shared-button-styles.css.js +1 -1
- package/src/m3/button-group/standard-button-group.js +1 -1
- package/src/m3/checkbox/checkbox.js +1 -1
- package/src/m3/dialog/dialog.d.ts +2 -2
- package/src/m3/dialog/dialog.js +2 -2
- package/src/m3/field/field-styles.css.js +1 -1
- package/src/m3/field/field.js +2 -2
- package/src/m3/field/filled-field-styles.css.js +1 -1
- package/src/m3/field/filled-field.js +1 -1
- package/src/m3/field/outlined-field-styles.css.js +1 -1
- package/src/m3/focus-ring/focus-ring.js +1 -1
- package/src/m3/list/list-item.d.ts +2 -2
- package/src/m3/list/list-item.js +6 -6
- package/src/m3/menu/composed-menu.d.ts +19 -0
- package/src/m3/menu/composed-menu.js +42 -0
- package/src/m3/menu/menu-styles.css.js +1 -1
- package/src/m3/menu/menu.d.ts +1 -7
- package/src/m3/menu/menu.js +1 -13
- package/src/m3/navigation/navigation-rail-item-styles.css.js +1 -1
- package/src/m3/popup/popup-styles.css.js +2 -0
- package/src/m3/{experimental → popup}/popup.d.ts +2 -1
- package/src/m3/popup/popup.js +18 -0
- package/src/m3/radio/radio.js +1 -1
- package/src/m3/ripple/ripple.js +3 -3
- package/src/m3/select/filled-select.d.ts +2 -2
- package/src/m3/select/filled-select.js +5 -5
- package/src/m3/select/outlined-select.d.ts +2 -2
- package/src/m3/select/outlined-select.js +5 -5
- package/src/m3/select/select-styles.css.js +1 -1
- package/src/m3/select/select.d.ts +2 -5
- package/src/m3/select/select.js +3 -6
- package/src/m3/styles/color-default-dark.css +51 -0
- package/src/m3/styles/color-default-light.css +51 -0
- package/src/m3/switch/switch-styles.css.js +1 -1
- package/src/m3/switch/switch.js +1 -1
- package/src/m3/tab/tabs-styles.css.js +1 -1
- package/src/m3/tab/tabs.js +1 -1
- package/src/m3/text-field/filled-text-field.js +2 -2
- package/src/m3/text-field/outlined-text-field.js +2 -2
- package/src/m3/tooltip/tooltip-styles.css.js +1 -1
- package/src/core/focus-visible.d.ts +0 -2
- package/src/core/focus-visible.js +0 -13
- package/src/m3/experimental/popup-styles.css.js +0 -2
- package/src/m3/experimental/popup.js +0 -11
- /package/src/base/{experimental/popup-styles.css.js → popup-styles.css.js} +0 -0
|
@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import { customElement } from 'lit/decorators.js';
|
|
4
4
|
import { Autocomplete } from '../../base/autocomplete.js';
|
|
5
|
+
import '../popup/popup.js';
|
|
5
6
|
import '../menu/menu.js';
|
|
6
7
|
import { autocompleteStyles } from './autocomplete-styles.css.js';
|
|
7
8
|
/**
|
|
@@ -10,7 +11,7 @@ import { autocompleteStyles } from './autocomplete-styles.css.js';
|
|
|
10
11
|
let M3Autocomplete = class M3Autocomplete extends Autocomplete {
|
|
11
12
|
static { this.styles = [autocompleteStyles]; }
|
|
12
13
|
renderMenu() {
|
|
13
|
-
return html `<md-
|
|
14
|
+
return html `<md-popup part="popup" role="presentation" no-focus-control quick .open="${this.open}" @toggle="${(e) => (this.open = e.newState === 'open')}"><md-menu part="menu" id="menu" type="listbox" tabindex="-1" @action="${this.handleMenuAction}"><slot @slotchange="${this.handleItemsSlotChange}"></slot></md-menu></md-popup>`;
|
|
14
15
|
}
|
|
15
16
|
};
|
|
16
17
|
M3Autocomplete = __decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const commonButtonStyles = css`@layer
|
|
2
|
+
export const commonButtonStyles = css`@layer main{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);font:var(--md-sys-typography-label-large);min-inline-size:64px;padding-inline:var(--_padding);transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);justify-content:center;align-items:center;gap:8px;display:inline-flex}:host([size=xs]){--_padding:12px;gap:4px}:host([size=m]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=l]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xl]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailing-icon]){flex-direction:row-reverse}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}::slotted([slot=icon]),::slotted([slot=icon-checked]){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const iconButtonStyles = css`@layer
|
|
2
|
+
export const iconButtonStyles = css`@layer main{:host{--_wn:32px;--_ww:52px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);inline-size:var(--_h);place-items:center;display:inline-grid}:host([size=xs]){--_wn:28px;--_ww:40px}:host([size=m]){--_wn:48px;--_ww:72px}:host([size=l]){--_wn:64px;--_ww:128px}:host([size=xl]){--_wn:104px;--_ww:184px}:host([width=narrow]){inline-size:var(--_wn)}:host([width=wide]){inline-size:var(--_ww)}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([size=small]){--_icon-size:24px}:host([variant=text]){--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked)){--_text-color:var(--_color)}}`;
|
|
@@ -17,7 +17,7 @@ import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';
|
|
|
17
17
|
let M3IconButtonToggle = class M3IconButtonToggle extends ButtonToggleMixin(M3IconButton) {
|
|
18
18
|
static { this.styles = [...super.styles, sharedButtonToggleStyles]; }
|
|
19
19
|
render() {
|
|
20
|
-
return html `<md-focus-ring></md-focus-ring><md-ripple
|
|
20
|
+
return html `<md-focus-ring></md-focus-ring><md-ripple enter-behavior="always"></md-ripple><span part="target"></span><slot part="icon unchecked"></slot><slot part="icon checked" name="checked"></slot>`;
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
M3IconButtonToggle = __decorate([
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const sharedButtonStyles = css`@layer
|
|
2
|
+
export const sharedButtonStyles = css`@layer main;@layer shared{:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_icon-size:20px;--_rs:12px;--_rp:8px;--_text-color:var(--_on-color);--_background-color:var(--_color);box-sizing:border-box;cursor:pointer;block-size:var(--_h);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;border-start-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));border-start-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));outline:0;flex-shrink:0;position:relative}:host([notransition]){transition:none!important}md-ripple,md-focus-ring{position:absolute}:host([size=xs]){--_h:32px}:host([size=m]){--_h:56px;--_icon-size:24px;--_rs:16px;--_rp:12px}:host([size=l]){--_h:96px;--_icon-size:32px;--_rs:28px;--_rp:16px}:host([size=xl]){--_h:136px;--_icon-size:40px;--_rs:28px;--_rp:16px}:host([color=secondary]){--_on-color:var(--md-sys-color-on-secondary);--_color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_on-color:var(--md-sys-color-on-tertiary);--_color:var(--md-sys-color-tertiary)}:host([variant=tonal]){--_background-color:var(--md-sys-color-secondary-container);--_text-color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--_background-color:transparent;--_text-color:var(--md-sys-color-on-surface-variant);--md-focus-ring-offset:3px;border-color:color-mix(in srgb, var(--md-sys-color-outline-variant) 100%, transparent);border-style:solid;border-width:1px;& md-ripple{inset:-1px}}:host([variant=text]){--_text-color:var(--_color);--_background-color:transparent!important}:host([square]){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}}@layer shared-toggle,override;@layer active{:host(:active),:host(:state(active)){--md-focus-ring-shape:var(--_rp);border-radius:var(--_rp)}}@layer disabled{:host([variant=outlined]:disabled){--_background-color:var(--md-sys-color-outline)}:host(:disabled),:host([variant=outlined]:state(checked):disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;border-color:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);box-shadow:none;pointer-events:none}@media (forced-colors:active){:host(:disabled){color:graytext;border-color:graytext}}}`;
|
|
@@ -66,7 +66,7 @@ let M3StandardButtonGroup = class M3StandardButtonGroup extends LitElement {
|
|
|
66
66
|
entries.forEach((entry) => {
|
|
67
67
|
const target = entry.target;
|
|
68
68
|
const index = this.$buttons.indexOf(target);
|
|
69
|
-
if (index !== -1) {
|
|
69
|
+
if (index !== -1) { // TODO: support for vertical languages?
|
|
70
70
|
const currentWidth = target.style.width;
|
|
71
71
|
target.style.width = '';
|
|
72
72
|
this.#baseWidths[index] = target.getBoundingClientRect().width;
|
|
@@ -21,7 +21,7 @@ let M3Checkbox = class M3Checkbox extends Checkbox {
|
|
|
21
21
|
}
|
|
22
22
|
static { this.styles = [...super.styles, targetStyles, checkboxStyles]; }
|
|
23
23
|
render() {
|
|
24
|
-
return html `<md-focus-ring></md-focus-ring><md-ripple
|
|
24
|
+
return html `<md-focus-ring></md-focus-ring><md-ripple enter-behavior="none"></md-ripple><span part="target"></span> ${this.renderIcon()}`;
|
|
25
25
|
}
|
|
26
26
|
renderIcon() {
|
|
27
27
|
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>`;
|
|
@@ -38,8 +38,8 @@ export declare class M3Dialog extends Dialog {
|
|
|
38
38
|
static styles: any[];
|
|
39
39
|
render(): import("lit-html").TemplateResult<1>;
|
|
40
40
|
firstUpdated(): Promise<void>;
|
|
41
|
-
show(): void
|
|
42
|
-
close(): void
|
|
41
|
+
show(): Promise<void>;
|
|
42
|
+
close(): Promise<void>;
|
|
43
43
|
}
|
|
44
44
|
declare global {
|
|
45
45
|
interface HTMLElementTagNameMap {
|
package/src/m3/dialog/dialog.js
CHANGED
|
@@ -66,7 +66,7 @@ let M3Dialog = class M3Dialog extends Dialog {
|
|
|
66
66
|
#handleClick;
|
|
67
67
|
#handleIconSlotChange;
|
|
68
68
|
#opening;
|
|
69
|
-
show() {
|
|
69
|
+
async show() {
|
|
70
70
|
if (this.#opening)
|
|
71
71
|
return;
|
|
72
72
|
this.#clearAnimations();
|
|
@@ -117,7 +117,7 @@ let M3Dialog = class M3Dialog extends Dialog {
|
|
|
117
117
|
};
|
|
118
118
|
}
|
|
119
119
|
#closing;
|
|
120
|
-
close() {
|
|
120
|
+
async close() {
|
|
121
121
|
if (this.#closing)
|
|
122
122
|
return;
|
|
123
123
|
this.#clearAnimations();
|
|
@@ -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,.end{color:var(--md-sys-color-on-surface-variant);justify-content:center;align-items:center;min-width:48px;display:flex}.start[hidden],.end[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([
|
|
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,.end{color:var(--md-sys-color-on-surface-variant);justify-content:center;align-items:center;min-width:48px;display:flex}.start[hidden],.end[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([has-label]:not([focused]):not([populated])) ::slotted(input:placeholder-shown),:host([has-label]: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)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;--md-sys-color-error:VisitedText}}`;
|
package/src/m3/field/field.js
CHANGED
|
@@ -55,7 +55,7 @@ __decorate([
|
|
|
55
55
|
property({ type: String, reflect: true })
|
|
56
56
|
], M3Field.prototype, "label", void 0);
|
|
57
57
|
__decorate([
|
|
58
|
-
property({ type: String, reflect: true })
|
|
58
|
+
property({ type: String, reflect: true, attribute: 'supporting-text' })
|
|
59
59
|
], M3Field.prototype, "supportingText", void 0);
|
|
60
60
|
__decorate([
|
|
61
61
|
property({ type: Boolean, reflect: true })
|
|
@@ -70,7 +70,7 @@ __decorate([
|
|
|
70
70
|
property({ type: Boolean, reflect: true })
|
|
71
71
|
], M3Field.prototype, "populated", void 0);
|
|
72
72
|
__decorate([
|
|
73
|
-
property({ type: Boolean, reflect: true })
|
|
73
|
+
property({ type: Boolean, reflect: true, attribute: 'has-label' })
|
|
74
74
|
], M3Field.prototype, "hasLabel", void 0);
|
|
75
75
|
__decorate([
|
|
76
76
|
state()
|
|
@@ -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([
|
|
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([has-label]){--_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([populated]) .label,:host([focused]) .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)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;outline:1px solid canvastext}:host([focused]){outline-color:highlight}}`;
|
|
@@ -7,7 +7,7 @@ import { filledFieldStyles } from './filled-field-styles.css.js';
|
|
|
7
7
|
let M3FilledField = class M3FilledField extends M3Field {
|
|
8
8
|
static { this.styles = [...super.styles, filledFieldStyles]; }
|
|
9
9
|
renderContainerContent() {
|
|
10
|
-
return html `<md-ripple
|
|
10
|
+
return html `<md-ripple click-behavior="none" enter-behavior="none" space-behavior="none"></md-ripple>${this.renderStart()}<div class="middle"><span class="label">${this.label}</span><div class="input-wrapper"><slot></slot></div></div>${this.renderEnd()}`;
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
M3FilledField = __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-start,.outline-notch,.outline-end{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([
|
|
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-start,.outline-notch,.outline-end{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([has-label])) .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([populated]) .outline-notch,:host([focused]) .outline-notch{border-top-width:0;border-top-color:#0000}:host([populated]) .label,:host([focused]) .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)}`;
|
|
@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
4
|
import { customElement } from '../../core/decorators.js';
|
|
5
|
-
import { focusVisible } from '../../core/focus
|
|
5
|
+
import { focusVisible } from '../../core/focus.js';
|
|
6
6
|
import { Attachable, handleControlChange } from '../../base/mixins/attachable.js';
|
|
7
7
|
import { InternalsAttached, internals, replaceStates, } from '../../base/mixins/internals-attached.js';
|
|
8
8
|
import { focusRingStyles } from './focus-ring-styles.css.js';
|
|
@@ -10,8 +10,8 @@ import type { M3FocusRing } from '../focus-ring/focus-ring.js';
|
|
|
10
10
|
* @slot - contents in md-item
|
|
11
11
|
*/
|
|
12
12
|
export declare class M3ListItem extends ListItem {
|
|
13
|
-
ripple: M3Ripple;
|
|
14
|
-
focusRing: M3FocusRing;
|
|
13
|
+
$ripple: M3Ripple;
|
|
14
|
+
$focusRing: M3FocusRing;
|
|
15
15
|
static styles: any[];
|
|
16
16
|
render(): import("lit-html").TemplateResult<1>;
|
|
17
17
|
constructor();
|
package/src/m3/list/list-item.js
CHANGED
|
@@ -19,28 +19,28 @@ let M3ListItem = class M3ListItem extends ListItem {
|
|
|
19
19
|
constructor() {
|
|
20
20
|
super();
|
|
21
21
|
this.updateComplete.then(() => {
|
|
22
|
-
this
|
|
23
|
-
this
|
|
22
|
+
this.$ripple.$control = this;
|
|
23
|
+
this.$focusRing.$control = this;
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
26
|
updated(changed) {
|
|
27
27
|
super.updated(changed);
|
|
28
28
|
if (changed.has('focused')) {
|
|
29
29
|
if (this.focused) {
|
|
30
|
-
this
|
|
30
|
+
this.$focusRing.visualFocus();
|
|
31
31
|
}
|
|
32
32
|
else {
|
|
33
|
-
this
|
|
33
|
+
this.$focusRing.visualBlur();
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
__decorate([
|
|
39
39
|
query('md-ripple')
|
|
40
|
-
], M3ListItem.prototype, "ripple", void 0);
|
|
40
|
+
], M3ListItem.prototype, "$ripple", void 0);
|
|
41
41
|
__decorate([
|
|
42
42
|
query('md-focus-ring')
|
|
43
|
-
], M3ListItem.prototype, "focusRing", void 0);
|
|
43
|
+
], M3ListItem.prototype, "$focusRing", void 0);
|
|
44
44
|
M3ListItem = __decorate([
|
|
45
45
|
customElement('md-list-item')
|
|
46
46
|
], M3ListItem);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { handleControlChange } from '../../base/mixins/attachable.js';
|
|
2
|
+
import { Popup } from '../../base/popup.js';
|
|
3
|
+
import { M3Menu } from './menu.js';
|
|
4
|
+
/**
|
|
5
|
+
* TODO: consider adding ariaLabel that is passed to the menu
|
|
6
|
+
*/
|
|
7
|
+
export declare class M3ComposedMenu extends Popup {
|
|
8
|
+
vibrant: boolean;
|
|
9
|
+
$menu: M3Menu;
|
|
10
|
+
static styles: any[];
|
|
11
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
12
|
+
constructor();
|
|
13
|
+
[handleControlChange](prev: HTMLElement | null, next: HTMLElement | null): void;
|
|
14
|
+
}
|
|
15
|
+
declare global {
|
|
16
|
+
interface HTMLElementTagNameMap {
|
|
17
|
+
'md-composed-menu': M3ComposedMenu;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { property, customElement, query } from 'lit/decorators.js';
|
|
4
|
+
import { ensureReady } from '../../core/ensure-ready.js';
|
|
5
|
+
import { internals } from '../../base/mixins/internals-attached.js';
|
|
6
|
+
import { handleControlChange } from '../../base/mixins/attachable.js';
|
|
7
|
+
import { Popup } from '../../base/popup.js';
|
|
8
|
+
import { popupStyles } from '../popup/popup-styles.css.js';
|
|
9
|
+
/**
|
|
10
|
+
* TODO: consider adding ariaLabel that is passed to the menu
|
|
11
|
+
*/
|
|
12
|
+
let M3ComposedMenu = class M3ComposedMenu extends Popup {
|
|
13
|
+
static { this.styles = [...super.styles, popupStyles]; }
|
|
14
|
+
render() {
|
|
15
|
+
return html `<md-menu><slot></slot></md-menu>`;
|
|
16
|
+
}
|
|
17
|
+
constructor() {
|
|
18
|
+
super();
|
|
19
|
+
this.vibrant = false;
|
|
20
|
+
this[internals].role = 'application';
|
|
21
|
+
}
|
|
22
|
+
[handleControlChange](prev, next) {
|
|
23
|
+
if (next) {
|
|
24
|
+
next.ariaHasPopup = 'menu';
|
|
25
|
+
ensureReady(this.$menu).then(() => {
|
|
26
|
+
next.ariaControlsElements = [this.$menu];
|
|
27
|
+
this.$menu[internals].ariaLabelledByElements = [this.$control];
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
super[handleControlChange](prev, next);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
__decorate([
|
|
34
|
+
property({ type: Boolean, reflect: true })
|
|
35
|
+
], M3ComposedMenu.prototype, "vibrant", void 0);
|
|
36
|
+
__decorate([
|
|
37
|
+
query('md-menu')
|
|
38
|
+
], M3ComposedMenu.prototype, "$menu", void 0);
|
|
39
|
+
M3ComposedMenu = __decorate([
|
|
40
|
+
customElement('md-composed-menu')
|
|
41
|
+
], M3ComposedMenu);
|
|
42
|
+
export { M3ComposedMenu };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const menuStyles = css`:host{
|
|
2
|
+
export const menuStyles = css`:host{box-sizing:border-box;height:inherit;max-height:300px;width:inherit;-webkit-user-select:none;user-select:none;outline:0;padding:4px;scroll-padding-block:4px;display:block;overflow-y:auto}[part=items]{flex-direction:column;gap:2px;display:flex}::slotted(md-divider){margin-block:6px}@media (forced-colors:active){:host{border:1px solid canvastext}}`;
|
package/src/m3/menu/menu.d.ts
CHANGED
|
@@ -2,17 +2,11 @@ import { Menu } from '../../base/menu.js';
|
|
|
2
2
|
/**
|
|
3
3
|
* @tag md-menu
|
|
4
4
|
*
|
|
5
|
-
* @csspart
|
|
6
|
-
* @csspart list
|
|
5
|
+
* @csspart items
|
|
7
6
|
*
|
|
8
7
|
* @slot - menu items
|
|
9
8
|
*/
|
|
10
9
|
export declare class M3Menu extends Menu {
|
|
11
|
-
readonly _durations: {
|
|
12
|
-
show: number;
|
|
13
|
-
hide: number;
|
|
14
|
-
};
|
|
15
|
-
color: 'standard' | 'vibrant';
|
|
16
10
|
static styles: any[];
|
|
17
11
|
}
|
|
18
12
|
declare global {
|
package/src/m3/menu/menu.js
CHANGED
|
@@ -1,29 +1,17 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { customElement } from 'lit/decorators.js';
|
|
3
|
-
import { property } from 'lit/decorators.js';
|
|
4
3
|
import { Menu } from '../../base/menu.js';
|
|
5
4
|
import { menuStyles } from './menu-styles.css.js';
|
|
6
5
|
/**
|
|
7
6
|
* @tag md-menu
|
|
8
7
|
*
|
|
9
|
-
* @csspart
|
|
10
|
-
* @csspart list
|
|
8
|
+
* @csspart items
|
|
11
9
|
*
|
|
12
10
|
* @slot - menu items
|
|
13
11
|
*/
|
|
14
12
|
let M3Menu = class M3Menu extends Menu {
|
|
15
|
-
constructor() {
|
|
16
|
-
super(...arguments);
|
|
17
|
-
this._durations = { show: 300, hide: 150 };
|
|
18
|
-
// FIXME: Might cause a long list to scroll more than expected
|
|
19
|
-
// override readonly _scrollPadding = 4;
|
|
20
|
-
this.color = 'standard';
|
|
21
|
-
}
|
|
22
13
|
static { this.styles = [menuStyles]; }
|
|
23
14
|
};
|
|
24
|
-
__decorate([
|
|
25
|
-
property({ reflect: true })
|
|
26
|
-
], M3Menu.prototype, "color", void 0);
|
|
27
15
|
M3Menu = __decorate([
|
|
28
16
|
customElement('md-menu')
|
|
29
17
|
], M3Menu);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const navigationRailItemStyles = css`:host{color:var(--md-sys-color-on-surface-variant);cursor:pointer;outline:0;grid-template-rows:40px 1fr;justify-content:flex-start;width:max-content;display:grid;position:relative}.pill-root{grid-template:".start icon.label end."32px/20px 16px 24px 0 0fr 16px 20px;place-self:center;display:grid;position:relative}.pill{border-radius:9999px;grid-area:1/start-start/auto/end-end;position:relative}::slotted(*){fill:currentColor;place-self:center;block-size:1em;inline-size:1em;font-size:24px;position:absolute}::slotted([slot=active]){opacity:0}.label-inside{font:var(--md-sys-typography-label-large);display:none}.label-outside{font:var(--md-sys-typography-label-medium);pointer-events:none;text-align:center;word-break:break-word;grid-template-rows:1fr;width:96px;display:block;overflow:hidden}:host([active]){& .pill{color:var(--md-sys-color-on-secondary-container)}& md-ripple{background-color:var(--md-sys-color-secondary-container)}
|
|
2
|
+
export const navigationRailItemStyles = css`:host{color:var(--md-sys-color-on-surface-variant);cursor:pointer;outline:0;grid-template-rows:40px 1fr;justify-content:flex-start;width:max-content;display:grid;position:relative}.pill-root{grid-template:".start icon.label end."32px/20px 16px 24px 0 0fr 16px 20px;place-self:center;display:grid;position:relative}.pill{border-radius:9999px;grid-area:1/start-start/auto/end-end;position:relative}::slotted(*){fill:currentColor;place-self:center;block-size:1em;inline-size:1em;font-size:24px;position:absolute}::slotted([slot=active]){opacity:0}.label-inside{font:var(--md-sys-typography-label-large);display:none}.label-outside{font:var(--md-sys-typography-label-medium);pointer-events:none;text-align:center;word-break:break-word;grid-template-rows:1fr;width:96px;display:block;overflow:hidden}:host([active]){& .pill{color:var(--md-sys-color-on-secondary-container)}& md-ripple{background-color:var(--md-sys-color-secondary-container)}& ::slotted([slot=active]){opacity:1}& ::slotted(:not([slot=active])){opacity:0}& .label-outside{color:var(--md-sys-color-secondary)}}`;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const popupStyles = css`:host{--_fast:var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);--_d:var(--md-sys-motion-spatial-default-duration);--_default:var(--_d) var(--md-sys-motion-spatial-default);background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);color:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--_fast), border-radius var(--_fast), display var(--_d) allow-discrete, overlay var(--_d) allow-discrete;border-radius:16px/46px;transform:scaleY(.35)}:host([strategy=fixed]){position:fixed}:host([vibrant]){--md-divider-color:var(--md-sys-color-tertiary);--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)}}slot{opacity:0;transition:opacity 67ms;display:block}:host(:popover-open){opacity:1;transition:opacity 67ms linear, transform var(--_default), border-radius var(--_default);border-radius:16px;transform:scaleY(1);& slot{opacity:1;transition:opacity 67ms linear 67ms}}@starting-style{:host(:popover-open){opacity:0;border-radius:16px/46px;transform:scaleY(.35);& slot{opacity:0}}}`;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { property, customElement } from 'lit/decorators.js';
|
|
3
|
+
import { Popup } from '../../base/popup.js';
|
|
4
|
+
import { popupStyles } from './popup-styles.css.js';
|
|
5
|
+
let M3Popup = class M3Popup extends Popup {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.vibrant = false;
|
|
9
|
+
}
|
|
10
|
+
static { this.styles = [...super.styles, popupStyles]; }
|
|
11
|
+
};
|
|
12
|
+
__decorate([
|
|
13
|
+
property({ type: Boolean, reflect: true })
|
|
14
|
+
], M3Popup.prototype, "vibrant", void 0);
|
|
15
|
+
M3Popup = __decorate([
|
|
16
|
+
customElement('md-popup')
|
|
17
|
+
], M3Popup);
|
|
18
|
+
export { M3Popup };
|
package/src/m3/radio/radio.js
CHANGED
|
@@ -14,7 +14,7 @@ import { radioStyles } from './radio-styles.css.js';
|
|
|
14
14
|
let M3Radio = class M3Radio extends Radio {
|
|
15
15
|
static { this.styles = [targetStyles, radioStyles]; }
|
|
16
16
|
render() {
|
|
17
|
-
return html `<md-focus-ring></md-focus-ring><md-ripple
|
|
17
|
+
return html `<md-focus-ring></md-focus-ring><md-ripple enter-behavior="none"></md-ripple><span part="target"></span> <svg class="icon" viewBox="0 0 20 20" aria-hidden="true"><circle class="ring" cx="10" cy="10" r="9"/><circle class="dot" cx="10" cy="10" r="0"/></svg>`;
|
|
18
18
|
}
|
|
19
19
|
firstUpdated() {
|
|
20
20
|
// SSR'd <md-radio> components don't have their labels set up on time
|
package/src/m3/ripple/ripple.js
CHANGED
|
@@ -177,13 +177,13 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
|
|
|
177
177
|
}
|
|
178
178
|
};
|
|
179
179
|
__decorate([
|
|
180
|
-
property()
|
|
180
|
+
property({ attribute: 'click-behavior' })
|
|
181
181
|
], M3Ripple.prototype, "clickBehavior", void 0);
|
|
182
182
|
__decorate([
|
|
183
|
-
property()
|
|
183
|
+
property({ attribute: 'enter-behavior' })
|
|
184
184
|
], M3Ripple.prototype, "enterBehavior", void 0);
|
|
185
185
|
__decorate([
|
|
186
|
-
property()
|
|
186
|
+
property({ attribute: 'space-behavior' })
|
|
187
187
|
], M3Ripple.prototype, "spaceBehavior", void 0);
|
|
188
188
|
M3Ripple = __decorate([
|
|
189
189
|
customElement('md-ripple', false)
|
|
@@ -5,12 +5,12 @@ import '../field/filled-field.js';
|
|
|
5
5
|
*
|
|
6
6
|
* @slot - options
|
|
7
7
|
*/
|
|
8
|
-
export declare class
|
|
8
|
+
export declare class M3FilledSelect extends M3Select {
|
|
9
9
|
static styles: any[];
|
|
10
10
|
protected renderField(): import("lit-html").TemplateResult<1>;
|
|
11
11
|
}
|
|
12
12
|
declare global {
|
|
13
13
|
interface HTMLElementTagNameMap {
|
|
14
|
-
'md-filled-select':
|
|
14
|
+
'md-filled-select': M3FilledSelect;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
@@ -9,13 +9,13 @@ import { selectStyles } from './select-styles.css.js';
|
|
|
9
9
|
*
|
|
10
10
|
* @slot - options
|
|
11
11
|
*/
|
|
12
|
-
let
|
|
12
|
+
let M3FilledSelect = class M3FilledSelect extends M3Select {
|
|
13
13
|
static { this.styles = [selectStyles]; }
|
|
14
14
|
renderField() {
|
|
15
|
-
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}"
|
|
15
|
+
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}" supporting-text="${this.supportingText}" @keydown="${this._handleFieldKeydown}" @focus="${() => (this.focused = true)}" @blur="${() => (this.focused = false)}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-filled-field>`;
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
M3FilledSelect = __decorate([
|
|
19
19
|
customElement('md-filled-select')
|
|
20
|
-
],
|
|
21
|
-
export {
|
|
20
|
+
], M3FilledSelect);
|
|
21
|
+
export { M3FilledSelect };
|
|
@@ -5,12 +5,12 @@ import '../field/outlined-field.js';
|
|
|
5
5
|
*
|
|
6
6
|
* @slot - options
|
|
7
7
|
*/
|
|
8
|
-
export declare class
|
|
8
|
+
export declare class M3OutlinedSelect extends M3Select {
|
|
9
9
|
static styles: any[];
|
|
10
10
|
protected renderField(): import("lit-html").TemplateResult<1>;
|
|
11
11
|
}
|
|
12
12
|
declare global {
|
|
13
13
|
interface HTMLElementTagNameMap {
|
|
14
|
-
'md-outlined-select':
|
|
14
|
+
'md-outlined-select': M3OutlinedSelect;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
@@ -9,13 +9,13 @@ import { selectStyles } from './select-styles.css.js';
|
|
|
9
9
|
*
|
|
10
10
|
* @slot - options
|
|
11
11
|
*/
|
|
12
|
-
let
|
|
12
|
+
let M3OutlinedSelect = class M3OutlinedSelect extends M3Select {
|
|
13
13
|
static { this.styles = [selectStyles]; }
|
|
14
14
|
renderField() {
|
|
15
|
-
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}"
|
|
15
|
+
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}" supporting-text="${this.supportingText}" @keydown="${this._handleFieldKeydown}" @focus="${() => (this.focused = true)}" @blur="${() => (this.focused = false)}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-outlined-field>`;
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
M3OutlinedSelect = __decorate([
|
|
19
19
|
customElement('md-outlined-select')
|
|
20
|
-
],
|
|
21
|
-
export {
|
|
20
|
+
], M3OutlinedSelect);
|
|
21
|
+
export { M3OutlinedSelect };
|
|
@@ -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:none;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=
|
|
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:none;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=popup]{--md-menu-max-height:300px;min-width:inherit}`;
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
+
import '../popup/popup.js';
|
|
1
2
|
import '../menu/menu.js';
|
|
2
3
|
import { Select } from '../../base/select.js';
|
|
3
|
-
import { M3Field } from '../field/field.js';
|
|
4
|
-
/**
|
|
5
|
-
* @fires {Event} change - Fired when the selected value has changed.
|
|
6
|
-
* @fires {Event} input - Fired when the selected value has changed.
|
|
7
|
-
*/
|
|
4
|
+
import type { M3Field } from '../field/field.js';
|
|
8
5
|
export declare abstract class M3Select extends Select {
|
|
9
6
|
label: string;
|
|
10
7
|
supportingText: string;
|
package/src/m3/select/select.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import { property, query, state } from 'lit/decorators.js';
|
|
4
|
+
import '../popup/popup.js';
|
|
4
5
|
import '../menu/menu.js';
|
|
5
6
|
import { Select } from '../../base/select.js';
|
|
6
|
-
/**
|
|
7
|
-
* @fires {Event} change - Fired when the selected value has changed.
|
|
8
|
-
* @fires {Event} input - Fired when the selected value has changed.
|
|
9
|
-
*/
|
|
10
7
|
export class M3Select extends Select {
|
|
11
8
|
constructor() {
|
|
12
9
|
super(...arguments);
|
|
@@ -15,14 +12,14 @@ export class M3Select extends Select {
|
|
|
15
12
|
this.focused = false;
|
|
16
13
|
}
|
|
17
14
|
renderMenu() {
|
|
18
|
-
return html `<md-
|
|
15
|
+
return html `<md-popup part="popup" role="presentation" for="field" no-focus-control .open="${this.open}" @toggle="${(e) => (this.open = e.newState === 'open')}"><md-menu id="menu" part="menu" role="listbox" tabindex="-1" bare @item-focus="${this._handleMenuItemFocus}" @action="${this._handleMenuAction}"><slot @slotchange="${this._handleSlotChange}"></slot></md-menu></md-popup>`;
|
|
19
16
|
}
|
|
20
17
|
}
|
|
21
18
|
__decorate([
|
|
22
19
|
property({ type: String })
|
|
23
20
|
], M3Select.prototype, "label", void 0);
|
|
24
21
|
__decorate([
|
|
25
|
-
property({ type: String })
|
|
22
|
+
property({ type: String, attribute: 'supporting-text' })
|
|
26
23
|
], M3Select.prototype, "supportingText", void 0);
|
|
27
24
|
__decorate([
|
|
28
25
|
state()
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--md-sys-color-primary: rgb(203 190 255);
|
|
3
|
+
--md-sys-color-surface-tint: rgb(203 190 255);
|
|
4
|
+
--md-sys-color-on-primary: rgb(51 39 94);
|
|
5
|
+
--md-sys-color-primary-container: rgb(73 62 118);
|
|
6
|
+
--md-sys-color-on-primary-container: rgb(231 222 255);
|
|
7
|
+
--md-sys-color-secondary: rgb(202 195 220);
|
|
8
|
+
--md-sys-color-on-secondary: rgb(50 46 65);
|
|
9
|
+
--md-sys-color-secondary-container: rgb(72 68 88);
|
|
10
|
+
--md-sys-color-on-secondary-container: rgb(230 223 249);
|
|
11
|
+
--md-sys-color-tertiary: rgb(238 184 203);
|
|
12
|
+
--md-sys-color-on-tertiary: rgb(73 37 52);
|
|
13
|
+
--md-sys-color-tertiary-container: rgb(98 59 75);
|
|
14
|
+
--md-sys-color-on-tertiary-container: rgb(255 217 229);
|
|
15
|
+
--md-sys-color-error: rgb(255 180 171);
|
|
16
|
+
--md-sys-color-on-error: rgb(105 0 5);
|
|
17
|
+
--md-sys-color-error-container: rgb(147 0 10);
|
|
18
|
+
--md-sys-color-on-error-container: rgb(255 218 214);
|
|
19
|
+
--md-sys-color-background: rgb(20 19 24);
|
|
20
|
+
--md-sys-color-on-background: rgb(230 225 233);
|
|
21
|
+
--md-sys-color-surface: rgb(20 19 24);
|
|
22
|
+
--md-sys-color-on-surface: rgb(230 225 233);
|
|
23
|
+
--md-sys-color-surface-variant: rgb(72 69 78);
|
|
24
|
+
--md-sys-color-on-surface-variant: rgb(201 196 207);
|
|
25
|
+
--md-sys-color-outline: rgb(147 143 153);
|
|
26
|
+
--md-sys-color-outline-variant: rgb(72 69 78);
|
|
27
|
+
--md-sys-color-shadow: rgb(0 0 0);
|
|
28
|
+
--md-sys-color-scrim: rgb(0 0 0);
|
|
29
|
+
--md-sys-color-inverse-surface: rgb(230 225 233);
|
|
30
|
+
--md-sys-color-inverse-on-surface: rgb(49 47 53);
|
|
31
|
+
--md-sys-color-inverse-primary: rgb(97 86 144);
|
|
32
|
+
--md-sys-color-primary-fixed: rgb(231 222 255);
|
|
33
|
+
--md-sys-color-on-primary-fixed: rgb(29 17 72);
|
|
34
|
+
--md-sys-color-primary-fixed-dim: rgb(203 190 255);
|
|
35
|
+
--md-sys-color-on-primary-fixed-variant: rgb(73 62 118);
|
|
36
|
+
--md-sys-color-secondary-fixed: rgb(230 223 249);
|
|
37
|
+
--md-sys-color-on-secondary-fixed: rgb(29 25 43);
|
|
38
|
+
--md-sys-color-secondary-fixed-dim: rgb(202 195 220);
|
|
39
|
+
--md-sys-color-on-secondary-fixed-variant: rgb(72 68 88);
|
|
40
|
+
--md-sys-color-tertiary-fixed: rgb(255 217 229);
|
|
41
|
+
--md-sys-color-on-tertiary-fixed: rgb(48 17 31);
|
|
42
|
+
--md-sys-color-tertiary-fixed-dim: rgb(238 184 203);
|
|
43
|
+
--md-sys-color-on-tertiary-fixed-variant: rgb(98 59 75);
|
|
44
|
+
--md-sys-color-surface-dim: rgb(20 19 24);
|
|
45
|
+
--md-sys-color-surface-bright: rgb(58 56 62);
|
|
46
|
+
--md-sys-color-surface-container-lowest: rgb(15 13 19);
|
|
47
|
+
--md-sys-color-surface-container-low: rgb(28 27 32);
|
|
48
|
+
--md-sys-color-surface-container: rgb(32 31 36);
|
|
49
|
+
--md-sys-color-surface-container-high: rgb(43 41 47);
|
|
50
|
+
--md-sys-color-surface-container-highest: rgb(54 52 58);
|
|
51
|
+
}
|