mdui 2.0.1 → 2.0.3

package/components/tabs/tabs-style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabsStyle = css `:host{position:relative;display:flex}:host([placement^=top]){flex-direction:column}:host([placement^=bottom]){flex-direction:column-reverse}:host([placement^=left]){flex-direction:row}:host([placement^=right]){flex-direction:row-reverse}.container{position:relative;display:flex;flex:0 0 auto;overflow-x:auto;background-color:rgb(var(--mdui-color-surface))}:host([placement^=bottom]) .container,:host([placement^=top]) .container{flex-direction:row}:host([placement^=left]) .container,:host([placement^=right]) .container{flex-direction:column}:host([placement$='-start']) .container{justify-content:flex-start}:host([placement=bottom]) .container,:host([placement=left]) .container,:host([placement=right]) .container,:host([placement=top]) .container{justify-content:center}:host([placement$='-end']) .container{justify-content:flex-end}.container::after{content:' ';position:absolute;background-color:rgb(var(--mdui-color-surface-variant))}:host([placement^=bottom]) .container::after,:host([placement^=top]) .container::after{left:0;width:100%;height:.0625rem}:host([placement^=top]) .container::after{bottom:0}:host([placement^=bottom]) .container::after{top:0}:host([placement^=left]) .container::after,:host([placement^=right]) .container::after{top:0;height:100%;width:.0625rem}:host([placement^=left]) .container::after{right:0}:host([placement^=right]) .container::after{left:0}.indicator{position:absolute;z-index:1;transition-duration:var(--mdui-motion-duration-medium2);transition-timing-function:var(--mdui-motion-easing-standard-decelerate);background-color:rgb(var(--mdui-color-primary))}:host([placement^=bottom]) .indicator,:host([placement^=top]) .indicator{transition-property:transform,left,width}:host([placement^=left]) .indicator,:host([placement^=right]) .indicator{transition-property:transform,top,height}:host([placement^=top]) .indicator{bottom:0}:host([placement^=bottom]) .indicator{top:0}:host([placement^=left]) .indicator{right:0}:host([placement^=right]) .indicator{left:0}:host([placement^=bottom][variant=primary]) .indicator,:host([placement^=top][variant=primary]) .indicator{height:.1875rem}:host([placement^=bottom][variant=secondary]) .indicator,:host([placement^=top][variant=secondary]) .indicator{height:.125rem}:host([placement^=left][variant=primary]) .indicator,:host([placement^=right][variant=primary]) .indicator{width:.1875rem}:host([placement^=left][variant=secondary]) .indicator,:host([placement^=right][variant=secondary]) .indicator{width:.125rem}:host([placement^=top][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-top-right-radius:.1875rem}:host([placement^=bottom][variant=primary]) .indicator{border-bottom-right-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=left][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=right][variant=primary]) .indicator{border-top-right-radius:.1875rem;border-bottom-right-radius:.1875rem}:host([full-width]) ::slotted(mdui-tab){flex:1}`;
+export const tabsStyle = css `:host{position:relative;display:flex}:host([placement^=top]){flex-direction:column}:host([placement^=bottom]){flex-direction:column-reverse}:host([placement^=left]){flex-direction:row}:host([placement^=right]){flex-direction:row-reverse}.container{position:relative;display:flex;flex:0 0 auto;overflow-x:auto;background-color:rgb(var(--mdui-color-surface))}:host([placement^=bottom]) .container,:host([placement^=top]) .container{flex-direction:row}:host([placement^=left]) .container,:host([placement^=right]) .container{flex-direction:column}:host([placement$='-start']) .container{justify-content:flex-start}:host([placement=bottom]) .container,:host([placement=left]) .container,:host([placement=right]) .container,:host([placement=top]) .container{justify-content:center}:host([placement$='-end']) .container{justify-content:flex-end}.container::after{content:' ';position:absolute;background-color:rgb(var(--mdui-color-surface-variant))}:host([placement^=bottom]) .container::after,:host([placement^=top]) .container::after{left:0;width:100%;height:.0625rem}:host([placement^=top]) .container::after{bottom:0}:host([placement^=bottom]) .container::after{top:0}:host([placement^=left]) .container::after,:host([placement^=right]) .container::after{top:0;height:100%;width:.0625rem}:host([placement^=left]) .container::after{right:0}:host([placement^=right]) .container::after{left:0}.indicator{position:absolute;z-index:1;background-color:rgb(var(--mdui-color-primary))}.container:not(.initial) .indicator{transition-duration:var(--mdui-motion-duration-medium2);transition-timing-function:var(--mdui-motion-easing-standard-decelerate)}:host([placement^=bottom]) .indicator,:host([placement^=top]) .indicator{transition-property:transform,left,width}:host([placement^=left]) .indicator,:host([placement^=right]) .indicator{transition-property:transform,top,height}:host([placement^=top]) .indicator{bottom:0}:host([placement^=bottom]) .indicator{top:0}:host([placement^=left]) .indicator{right:0}:host([placement^=right]) .indicator{left:0}:host([placement^=bottom][variant=primary]) .indicator,:host([placement^=top][variant=primary]) .indicator{height:.1875rem}:host([placement^=bottom][variant=secondary]) .indicator,:host([placement^=top][variant=secondary]) .indicator{height:.125rem}:host([placement^=left][variant=primary]) .indicator,:host([placement^=right][variant=primary]) .indicator{width:.1875rem}:host([placement^=left][variant=secondary]) .indicator,:host([placement^=right][variant=secondary]) .indicator{width:.125rem}:host([placement^=top][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-top-right-radius:.1875rem}:host([placement^=bottom][variant=primary]) .indicator{border-bottom-right-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=left][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=right][variant=primary]) .indicator{border-top-right-radius:.1875rem;border-bottom-right-radius:.1875rem}:host([full-width]) ::slotted(mdui-tab){flex:1}`;

package/components/tabs/tabs.d.ts

@@ -1,9 +1,9 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
  *
@@ -27,7 +27,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @csspart container - `<mdui-tab>` 元素的容器
  * @csspart indicator - 激活状态指示器
  */
-export declare class Tabs extends LitElement {
+export declare class Tabs extends MduiElement<TabsEventMap> {
     static styles: CSSResultGroup;
     /**
      * 选项卡形状。可选值为：
@@ -62,24 +62,28 @@ export declare class Tabs extends LitElement {
      */
     fullWidth: boolean;
     private activeKey;
+    private isInitial;
+    private readonly tabs;
+    private readonly panels;
     private activeTab?;
     private observeResize?;
-    private tabs;
-    private panels;
     private readonly containerRef;
     private readonly indicatorRef;
+    private readonly definedController;
     private onActiveKeyChange;
     private onValueChange;
     private onIndicatorChange;
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
-    private syncTabsAndPanels;
     private onSlotChange;
     private onClick;
     private updateActive;
     private updateIndicator;
 }
+export interface TabsEventMap {
+    change: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tabs': Tabs;

package/components/tabs/tabs.js

@@ -1,15 +1,17 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { html } from 'lit';
+import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/children.js';
 import '@mdui/jq/methods/css.js';
 import '@mdui/jq/methods/find.js';
 import '@mdui/jq/methods/get.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
+import { DefinedController } from '@mdui/shared/controllers/defined.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { tabsStyle } from './tabs-style.js';
@@ -36,7 +38,7 @@ import { tabsStyle } from './tabs-style.js';
  * @csspart container - `<mdui-tab>` 元素的容器
  * @csspart indicator - 激活状态指示器
  */
-export let Tabs = class Tabs extends LitElement {
+let Tabs = class Tabs extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -69,59 +71,61 @@ export let Tabs = class Tabs extends LitElement {
         this.fullWidth = false;
         // 因为 tab 的 value 可能会重复，所以在每个 tab 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
         this.activeKey = 0;
-        this.tabs = [];
-        this.panels = [];
+        // 是否为初始状态，初始状态不触发 change 事件
+        this.isInitial = true;
         this.containerRef = createRef();
         this.indicatorRef = createRef();
+        this.definedController = new DefinedController(this, {
+            relatedElements: ['mdui-tab', 'mdui-tab-panel'],
+        });
     }
-    onActiveKeyChange() {
-        var _a;
+    async onActiveKeyChange() {
+        await this.definedController.whenDefined();
         // 根据 activeKey 读取对应 tab 的值
-        this.value = (_a = this.tabs.find((tab) => tab.key === this.activeKey)) === null || _a === void 0 ? void 0 : _a.value;
-        emit(this, 'change');
+        this.value = this.tabs.find((tab) => tab.key === this.activeKey)?.value;
+        this.updateActive();
+        if (!this.isInitial) {
+            this.emit('change');
+        }
     }
-    onValueChange() {
-        var _a;
+    async onValueChange() {
+        this.isInitial = !this.hasUpdated;
+        await this.definedController.whenDefined();
         const tab = this.tabs.find((tab) => tab.value === this.value);
-        this.activeKey = (_a = tab === null || tab === void 0 ? void 0 : tab.key) !== null && _a !== void 0 ? _a : 0;
-        this.updateActive();
+        this.activeKey = tab?.key ?? 0;
     }
-    onIndicatorChange() {
+    async onIndicatorChange() {
+        await this.updateComplete;
         this.updateIndicator();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.syncTabsAndPanels();
-        this.updateComplete.then(() => {
-            this.observeResize = observeResize(this.containerRef.value, () => this.updateIndicator());
-        });
-    }
     disconnectedCallback() {
-        var _a;
         super.disconnectedCallback();
-        (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        this.observeResize?.unobserve();
     }
-    render() {
-        return html `<div ${ref(this.containerRef)} part="container" class="container"><slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><div ${ref(this.indicatorRef)} part="indicator" class="indicator"></div></div><slot name="panel" @slotchange="${this.onSlotChange}"></slot>`;
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.observeResize = observeResize(this.containerRef.value, () => this.updateIndicator());
     }
-    syncTabsAndPanels() {
-        this.tabs = $(this).find('mdui-tab').get();
-        this.panels = $(this)
-            .find('mdui-tab-panel[slot="panel"]')
-            .get();
+    render() {
+        return html `<div ${ref(this.containerRef)} part="container" class="container ${classMap({ initial: this.isInitial })}"><slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><div ${ref(this.indicatorRef)} part="indicator" class="indicator"></div></div><slot name="panel" @slotchange="${this.onSlotChange}"></slot>`;
     }
-    onSlotChange() {
-        this.syncTabsAndPanels();
+    async onSlotChange() {
+        await this.definedController.whenDefined();
         this.updateActive();
     }
-    onClick(event) {
+    async onClick(event) {
         // event.button 为 0 时，为鼠标左键点击。忽略鼠标中键和右键
         if (event.button) {
             return;
         }
+        await this.definedController.whenDefined();
         const target = event.target;
         const tab = target.closest('mdui-tab');
+        if (!tab) {
+            return;
+        }
         this.activeKey = tab.key;
+        this.isInitial = false;
         this.updateActive();
     }
     updateActive() {
@@ -131,11 +135,10 @@ export let Tabs = class Tabs extends LitElement {
             return tab;
         })
             .find((tab) => tab.active);
-        this.panels.forEach((panel) => { var _a; return (panel.active = panel.value === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.value)); });
+        this.panels.forEach((panel) => (panel.active = panel.value === this.activeTab?.value));
         this.updateIndicator();
     }
-    async updateIndicator() {
-        await this.updateComplete;
+    updateIndicator() {
         const activeTab = this.activeTab;
         const $indicator = $(this.indicatorRef.value);
         const isVertical = this.placement.startsWith('left') || this.placement.startsWith('right');
@@ -154,9 +157,9 @@ export let Tabs = class Tabs extends LitElement {
             : { transform: 'scaleX(1)', height: '', top: '' };
         let shownStyle = {};
         if (this.variant === 'primary') {
-            const customSlots = $activeTab.find(':scope > [slot="custom"]').get();
-            const children = customSlots.length
-                ? customSlots
+            const $customSlots = $activeTab.find(':scope > [slot="custom"]');
+            const children = $customSlots.length
+                ? $customSlots.get()
                 : $(activeTab.renderRoot)
                     .find('slot[name="custom"]')
                     .children()
@@ -205,6 +208,19 @@ __decorate([
 __decorate([
     state()
 ], Tabs.prototype, "activeKey", void 0);
+__decorate([
+    state()
+], Tabs.prototype, "isInitial", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'mdui-tab', flatten: true })
+], Tabs.prototype, "tabs", void 0);
+__decorate([
+    queryAssignedElements({
+        selector: 'mdui-tab-panel',
+        slot: 'panel',
+        flatten: true,
+    })
+], Tabs.prototype, "panels", void 0);
 __decorate([
     watch('activeKey', true)
 ], Tabs.prototype, "onActiveKeyChange", null);
@@ -219,3 +235,4 @@ __decorate([
 Tabs = __decorate([
     customElement('mdui-tabs')
 ], Tabs);
+export { Tabs };

package/components/text-field/index.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/css.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/cancel--outlined.js';
 import '@mdui/shared/icons/error.js';
 import '@mdui/shared/icons/visibility-off.js';
@@ -7,8 +7,8 @@ import '@mdui/shared/icons/visibility.js';
 import '../button-icon.js';
 import '../icon.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
-declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
  * @summary 文本框组件
  *
@@ -53,7 +53,7 @@ declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import
  * @csspart error - 底部的错误描述文本
  * @csspart counter - 底部右侧的字数统计
  */
-export declare class TextField extends TextField_base implements FormControl {
+export declare class TextField extends TextField_base<TextFieldEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 文本框形状。默认为 `filled`。可选值为：
@@ -324,7 +324,6 @@ export declare class TextField extends TextField_base implements FormControl {
     private onRowsChange;
     private onMaxRowsChange;
     private onMinRowsChange;
-    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * 选中文本框中的文本
@@ -366,6 +365,7 @@ export declare class TextField extends TextField_base implements FormControl {
      * @param message 自定义的提示文本
      */
     setCustomValidity(message: string): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     private onChange;
     private onClear;
@@ -392,6 +392,14 @@ export declare class TextField extends TextField_base implements FormControl {
     private renderHelper;
     private renderCounter;
 }
+export interface TextFieldEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: CustomEvent<void>;
+    invalid: CustomEvent<void>;
+    clear: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-text-field': TextField;

package/components/text-field/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -9,12 +9,12 @@ import { when } from 'lit/directives/when.js';
 import { animate } from '@lit-labs/motion';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
@@ -71,7 +71,7 @@ import { style } from './style.js';
  * @csspart error - 底部的错误描述文本
  * @csspart counter - 底部右侧的字数统计
  */
-export let TextField = class TextField extends FocusableMixin(LitElement) {
+let TextField = class TextField extends FocusableMixin(MduiElement) {
     constructor() {
         super(...arguments);
         /**
@@ -200,8 +200,8 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
      * 如果值无法被转换为 `number` 类型，则会返回 `NaN`。
      */
     get valueAsNumber() {
-        var _a, _b;
-        return ((_b = (_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.valueAsNumber) !== null && _b !== void 0 ? _b : parseFloat(this.value));
+        return (this.inputRef.value?.valueAsNumber ??
+            parseFloat(this.value));
     }
     set valueAsNumber(newValue) {
         const input = document.createElement('input');
@@ -234,13 +234,12 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
         this.invalid = !this.inputRef.value.checkValidity();
     }
     async onValueChange() {
-        var _a;
         this.hasValue = !!this.value;
         if (this.hasUpdated) {
             await this.updateComplete;
             // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
             const form = this.formController.getForm();
-            if (form && ((_a = formResets.get(form)) === null || _a === void 0 ? void 0 : _a.has(this))) {
+            if (form && formResets.get(form)?.has(this)) {
                 this.invalid = false;
                 formResets.get(form).delete(this);
             }
@@ -256,53 +255,31 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
         if (!this.autosize) {
             return;
         }
-        // 设置最大高度，为 line-height * maxRows + padding-top + padding-bottom
-        const setMaxHeight = () => {
-            var _a;
-            const $input = $(this.inputRef.value);
-            $input.css('max-height', parseFloat($input.css('line-height')) * ((_a = this.maxRows) !== null && _a !== void 0 ? _a : 1) +
-                parseFloat($input.css('padding-top')) +
-                parseFloat($input.css('padding-bottom')));
-        };
-        if (this.hasUpdated) {
-            setMaxHeight();
-        }
-        else {
+        if (!this.hasUpdated) {
             await this.updateComplete;
-            setMaxHeight();
         }
+        // 设置最大高度，为 line-height * maxRows + padding-top + padding-bottom
+        const $input = $(this.inputRef.value);
+        $input.css('max-height', parseFloat($input.css('line-height')) * (this.maxRows ?? 1) +
+            parseFloat($input.css('padding-top')) +
+            parseFloat($input.css('padding-bottom')));
     }
     async onMinRowsChange() {
         if (!this.autosize) {
             return;
         }
-        // 设置最小高度，为 line-height * minRows + padding-top + padding-bottom
-        const setMinHeight = () => {
-            var _a;
-            const $input = $(this.inputRef.value);
-            $input.css('min-height', parseFloat($input.css('line-height')) * ((_a = this.minRows) !== null && _a !== void 0 ? _a : 1) +
-                parseFloat($input.css('padding-top')) +
-                parseFloat($input.css('padding-bottom')));
-        };
-        if (this.hasUpdated) {
-            setMinHeight();
-        }
-        else {
+        if (!this.hasUpdated) {
             await this.updateComplete;
-            setMinHeight();
         }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateComplete.then(() => {
-            this.setTextareaHeight();
-            this.observeResize = observeResize(this.inputRef.value, () => this.setTextareaHeight());
-        });
+        // 设置最小高度，为 line-height * minRows + padding-top + padding-bottom
+        const $input = $(this.inputRef.value);
+        $input.css('min-height', parseFloat($input.css('line-height')) * (this.minRows ?? 1) +
+            parseFloat($input.css('padding-top')) +
+            parseFloat($input.css('padding-bottom')));
     }
     disconnectedCallback() {
-        var _a;
         super.disconnectedCallback();
-        (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+        this.observeResize?.unobserve();
     }
     /**
      * 选中文本框中的文本
@@ -336,8 +313,8 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
         if (this.value !== this.inputRef.value.value) {
             this.value = this.inputRef.value.value;
             this.setTextareaHeight();
-            emit(this, 'input');
-            emit(this, 'change');
+            this.emit('input');
+            this.emit('change');
         }
     }
     /**
@@ -346,7 +323,7 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -362,7 +339,7 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
         if (this.invalid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -380,6 +357,11 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
         this.inputRef.value.setCustomValidity(message);
         this.invalid = !this.inputRef.value.checkValidity();
     }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.setTextareaHeight();
+        this.observeResize = observeResize(this.inputRef.value, () => this.setTextareaHeight());
+    }
     render() {
         const hasIcon = !!this.icon || this.hasSlotController.test('icon');
         const hasEndIcon = !!this.endIcon || this.hasSlotController.test('end-icon');
@@ -389,6 +371,10 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
         const hasCounter = this.counter && !!this.maxlength;
         // 存在 input slot 时，隐藏组件内部的 .input 元素，使用 slot 代替
         const hasInputSlot = this.hasSlotController.test('input');
+        const invalidClassNameObj = {
+            invalid: this.invalid,
+            'invalid-style': this.invalidStyle,
+        };
         const className = classMap({
             container: true,
             'has-value': this.hasValue,
@@ -396,23 +382,24 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
             'has-end-icon': hasEndIcon,
             'has-error-icon': hasErrorIcon,
             'is-firefox': navigator.userAgent.includes('Firefox'),
+            ...invalidClassNameObj,
         });
         return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${this.isTextarea
             ? this.renderTextArea(hasInputSlot)
-            : this.renderInput(hasInputSlot)} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderClearButton()}${this.renderTogglePasswordButton()} ${this.renderSuffix(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="supporting">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
+            : this.renderInput(hasInputSlot)} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderClearButton()}${this.renderTogglePasswordButton()} ${this.renderSuffix(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
     }
     onChange() {
         this.value = this.inputRef.value.value;
         if (this.isTextarea) {
             this.setTextareaHeight();
         }
-        emit(this, 'change');
+        this.emit('change');
     }
     onClear(event) {
         this.value = '';
-        emit(this, 'clear');
-        emit(this, 'input');
-        emit(this, 'change');
+        this.emit('clear');
+        this.emit('input');
+        this.emit('change');
         this.focus();
         event.stopPropagation();
     }
@@ -421,7 +408,7 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
         if (this.isTextarea) {
             this.setTextareaHeight();
         }
-        emit(this, 'input');
+        this.emit('input');
     }
     onInvalid(event) {
         event.preventDefault();
@@ -512,12 +499,11 @@ export let TextField = class TextField extends FocusableMixin(LitElement) {
             : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${ifDefined(this.type === 'password' ? 'off' : this.autocomplete)}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
     }
     renderTextArea(hasInputSlot) {
-        var _a;
         return html `<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(
         // @ts-ignore
         !this.label || this.isFocusedStyle || this.hasValue
             ? this.placeholder
-            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${(_a = this.rows) !== null && _a !== void 0 ? _a : 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
+            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
     }
     /**
      * @param hasError 是否包含错误提示
@@ -701,19 +687,10 @@ __decorate([
     property({ reflect: true })
 ], TextField.prototype, "inputmode", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], TextField.prototype, "invalid", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-        attribute: 'invalid-style',
-    })
+    state()
 ], TextField.prototype, "invalidStyle", void 0);
 __decorate([
     property({
@@ -750,3 +727,4 @@ __decorate([
 TextField = __decorate([
     customElement('mdui-text-field')
 ], TextField);
+export { TextField };

package/components/text-field/style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const style = css `:host{display:inline-block;width:100%}:host([disabled]){pointer-events:none}:host([type=hidden]){display:none}.container{position:relative;display:flex;align-items:center;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);padding:0 1rem}.container.has-icon{padding-left:.75rem}.container.has-end-icon,.container.has-error-icon{padding-right:.75rem}:host([variant=filled]) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-surface-variant));background-color:rgb(var(--mdui-color-surface-container-highest));border-radius:var(--mdui-shape-corner-extra-small) var(--mdui-shape-corner-extra-small) 0 0}:host([variant=filled][invalid-style]) .container,:host([variant=filled][invalid]) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-error))}:host([variant=filled]:hover) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-surface))}:host([variant=filled][invalid-style]:hover) .container,:host([variant=filled][invalid]:hover) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-error-container))}:host([variant=filled][focused-style]) .container,:host([variant=filled][focused]) .container{box-shadow:inset 0 -.125rem 0 0 rgb(var(--mdui-color-primary))}:host([variant=filled][focused-style][invalid-style]) .container,:host([variant=filled][focused-style][invalid]) .container,:host([variant=filled][focused][invalid-style]) .container,:host([variant=filled][focused][invalid]) .container{box-shadow:inset 0 -.125rem 0 0 rgb(var(--mdui-color-error))}:host([variant=filled][disabled]) .container{box-shadow:inset 0 -.0625rem 0 0 rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),4%)}:host([variant=outlined]) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-outline));border-radius:var(--mdui-shape-corner-extra-small)}:host([variant=outlined][invalid-style]) .container,:host([variant=outlined][invalid]) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-error))}:host([variant=outlined]:hover) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-on-surface))}:host([variant=outlined][invalid-style]:hover) .container,:host([variant=outlined][invalid]:hover) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-on-error-container))}:host([variant=outlined][focused-style]) .container,:host([variant=outlined][focused]) .container{box-shadow:inset 0 0 0 .125rem rgb(var(--mdui-color-primary))}:host([variant=outlined][focused-style][invalid-style]) .container,:host([variant=outlined][focused-style][invalid]) .container,:host([variant=outlined][focused][invalid-style]) .container,:host([variant=outlined][focused][invalid]) .container{box-shadow:inset 0 0 0 .125rem rgb(var(--mdui-color-error))}:host([variant=outlined][disabled]) .container{box-shadow:inset 0 0 0 .125rem rgba(var(--mdui-color-on-surface),12%)}.icon,.prefix,.right-icon,.suffix{display:flex;-webkit-user-select:none;user-select:none;color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .icon,:host([disabled]) .prefix,:host([disabled]) .right-icon,:host([disabled]) .suffix{color:rgba(var(--mdui-color-on-surface),38%)}:host([invalid-style]) .right-icon,:host([invalid-style]) .suffix,:host([invalid]) .right-icon,:host([invalid]) .suffix{color:rgb(var(--mdui-color-error))}:host([invalid-style]:hover) .right-icon,:host([invalid-style]:hover) .suffix,:host([invalid]:hover) .right-icon,:host([invalid]:hover) .suffix{color:rgb(var(--mdui-color-on-error-container))}:host([focused-style][invalid-style]) .right-icon,:host([focused-style][invalid-style]) .suffix,:host([focused-style][invalid]) .right-icon,:host([focused-style][invalid]) .suffix,:host([focused][invalid-style]) .right-icon,:host([focused][invalid-style]) .suffix,:host([focused][invalid]) .right-icon,:host([focused][invalid]) .suffix{color:rgb(var(--mdui-color-error))}.icon,.right-icon{font-size:1.5rem}.icon mdui-button-icon,.right-icon mdui-button-icon,::slotted(mdui-button-icon[slot]){margin-left:-.5rem;margin-right:-.5rem}.icon .i,.right-icon .i,::slotted([slot$=icon]){font-size:inherit}.has-icon .icon{margin-right:1rem}.has-end-icon .end-icon,.right-icon:not(.end-icon){margin-left:1rem}.prefix,.suffix{display:none;font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([variant=filled][label]) .prefix,:host([variant=filled][label]) .suffix{padding-top:1rem}.has-value .prefix,.has-value .suffix,:host([focused-style]) .prefix,:host([focused-style]) .suffix,:host([focused]) .prefix,:host([focused]) .suffix{display:flex}.prefix{padding-right:.125rem}.suffix{padding-left:.125rem}.input-container{width:100%}.label{position:absolute;pointer-events:none;max-width:calc(100% - 1rem);display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;top:1rem;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([invalid-style]) .label,:host([invalid]) .label{color:rgb(var(--mdui-color-error))}:host([variant=outlined]) .label{padding:0 .25rem;margin:0 -.25rem}:host([variant=outlined]:hover) .label{color:rgb(var(--mdui-color-on-surface))}:host([variant=filled][invalid-style]:hover) .label,:host([variant=filled][invalid]:hover) .label,:host([variant=outlined][invalid-style]:hover) .label,:host([variant=outlined][invalid]:hover) .label{color:rgb(var(--mdui-color-on-error-container))}:host([variant=filled][focused-style]) .label,:host([variant=filled][focused]) .label,:host([variant=outlined][focused-style]) .label,:host([variant=outlined][focused]) .label{color:rgb(var(--mdui-color-primary))}:host([variant=filled]) .has-value .label,:host([variant=filled][focused-style]) .label,:host([variant=filled][focused]) .label,:host([variant=filled][type=date]) .label,:host([variant=filled][type=datetime-local]) .label,:host([variant=filled][type=month]) .label,:host([variant=filled][type=time]) .label,:host([variant=filled][type=week]) .label{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height);top:.25rem}:host([variant=outlined]) .has-value .label,:host([variant=outlined][focused-style]) .label,:host([variant=outlined][focused]) .label,:host([variant=outlined][type=date]) .label,:host([variant=outlined][type=datetime-local]) .label,:host([variant=outlined][type=month]) .label,:host([variant=outlined][type=time]) .label,:host([variant=outlined][type=week]) .label{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height);top:-.5rem;left:.75rem;background-color:rgb(var(--mdui-color-background))}:host([variant=filled][focused-style][invalid-style]) .label,:host([variant=filled][focused-style][invalid]) .label,:host([variant=filled][focused][invalid-style]) .label,:host([variant=filled][focused][invalid]) .label,:host([variant=outlined][focused-style][invalid-style]) .label,:host([variant=outlined][focused-style][invalid]) .label,:host([variant=outlined][focused][invalid-style]) .label,:host([variant=outlined][focused][invalid]) .label{color:rgb(var(--mdui-color-error))}:host([variant=filled][disabled]) .label,:host([variant=outlined][disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}.input{display:flex;flex-wrap:wrap;width:100%;border:none;outline:0;background:0 0;-webkit-appearance:none;appearance:none;resize:none;cursor:inherit;font-family:inherit;padding:1rem 0;font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height);color:rgb(var(--mdui-color-on-surface));caret-color:rgb(var(--mdui-color-primary))}.input.hide-input{opacity:0;height:0;padding:0!important;overflow:hidden}.input::placeholder{color:rgb(var(--mdui-color-on-surface-variant))}:host([invalid-style]) .input,:host([invalid]) .input{caret-color:rgb(var(--mdui-color-error))}:host([disabled]) .input{color:rgba(var(--mdui-color-on-surface),38%)}:host([end-aligned]) .input{text-align:right}:host([variant=filled]) .label+.input{padding:1.5rem 0 .5rem 0}.supporting{display:flex;justify-content:space-between;padding:.25rem 1rem;color:rgb(var(--mdui-color-on-surface-variant))}:host([invalid-style]) .supporting,:host([invalid]) .supporting{color:rgb(var(--mdui-color-error))}.helper{display:block;opacity:1;transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}:host([disabled]) .helper{color:rgba(var(--mdui-color-on-surface),38%)}:host([helper-on-focus]) .helper{opacity:0}:host([helper-on-focus][focused-style]) .helper,:host([helper-on-focus][focused]) .helper{opacity:1}.error{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}.counter{flex-wrap:nowrap;padding-left:1rem;font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}::-ms-reveal{display:none}.is-firefox .input[type=date],.is-firefox .input[type=datetime-local],.is-firefox .input[type=time]{-webkit-clip-path:inset(0 2em 0 0);clip-path:inset(0 2em 0 0)}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;display:none}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}`;
+export const style = css `:host{display:inline-block;width:100%}:host([disabled]){pointer-events:none}:host([type=hidden]){display:none}.container{position:relative;display:flex;align-items:center;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);padding:0 1rem}.container.has-icon{padding-left:.75rem}.container.has-end-icon,.container.has-error-icon{padding-right:.75rem}:host([variant=filled]) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-surface-variant));background-color:rgb(var(--mdui-color-surface-container-highest));border-radius:var(--mdui-shape-corner-extra-small) var(--mdui-shape-corner-extra-small) 0 0}:host([variant=filled]) .container.invalid,:host([variant=filled]) .container.invalid-style{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-error))}:host([variant=filled]:hover) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-surface))}:host([variant=filled]:hover) .container.invalid,:host([variant=filled]:hover) .container.invalid-style{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-error-container))}:host([variant=filled][focused-style]) .container,:host([variant=filled][focused]) .container{box-shadow:inset 0 -.125rem 0 0 rgb(var(--mdui-color-primary))}:host([variant=filled][focused-style]) .container.invalid,:host([variant=filled][focused-style]) .container.invalid-style,:host([variant=filled][focused]) .container.invalid,:host([variant=filled][focused]) .container.invalid-style{box-shadow:inset 0 -.125rem 0 0 rgb(var(--mdui-color-error))}:host([variant=filled][disabled]) .container{box-shadow:inset 0 -.0625rem 0 0 rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),4%)}:host([variant=outlined]) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-outline));border-radius:var(--mdui-shape-corner-extra-small)}:host([variant=outlined]) .container.invalid,:host([variant=outlined]) .container.invalid-style{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-error))}:host([variant=outlined]:hover) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-on-surface))}:host([variant=outlined]:hover) .container.invalid,:host([variant=outlined]:hover) .container.invalid-style{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-on-error-container))}:host([variant=outlined][focused-style]) .container,:host([variant=outlined][focused]) .container{box-shadow:inset 0 0 0 .125rem rgb(var(--mdui-color-primary))}:host([variant=outlined][focused-style]) .container.invalid,:host([variant=outlined][focused-style]) .container.invalid-style,:host([variant=outlined][focused]) .container.invalid,:host([variant=outlined][focused]) .container.invalid-style{box-shadow:inset 0 0 0 .125rem rgb(var(--mdui-color-error))}:host([variant=outlined][disabled]) .container{box-shadow:inset 0 0 0 .125rem rgba(var(--mdui-color-on-surface),12%)}.icon,.prefix,.right-icon,.suffix{display:flex;-webkit-user-select:none;user-select:none;color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .icon,:host([disabled]) .prefix,:host([disabled]) .right-icon,:host([disabled]) .suffix{color:rgba(var(--mdui-color-on-surface),38%)}.invalid .right-icon,.invalid .suffix,.invalid-style .right-icon,.invalid-style .suffix{color:rgb(var(--mdui-color-error))}:host(:hover) .invalid .right-icon,:host(:hover) .invalid .suffix,:host(:hover) .invalid-style .right-icon,:host(:hover) .invalid-style .suffix{color:rgb(var(--mdui-color-on-error-container))}:host([focused-style]) .invalid .right-icon,:host([focused-style]) .invalid .suffix,:host([focused-style]) .invalid-style .right-icon,:host([focused-style]) .invalid-style .suffix,:host([focused]) .invalid .right-icon,:host([focused]) .invalid .suffix,:host([focused]) .invalid-style .right-icon,:host([focused]) .invalid-style .suffix{color:rgb(var(--mdui-color-error))}.icon,.right-icon{font-size:1.5rem}.icon mdui-button-icon,.right-icon mdui-button-icon,::slotted(mdui-button-icon[slot]){margin-left:-.5rem;margin-right:-.5rem}.icon .i,.right-icon .i,::slotted([slot$=icon]){font-size:inherit}.has-icon .icon{margin-right:1rem}.has-end-icon .end-icon,.right-icon:not(.end-icon){margin-left:1rem}.prefix,.suffix{display:none;font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([variant=filled][label]) .prefix,:host([variant=filled][label]) .suffix{padding-top:1rem}.has-value .prefix,.has-value .suffix,:host([focused-style]) .prefix,:host([focused-style]) .suffix,:host([focused]) .prefix,:host([focused]) .suffix{display:flex}.prefix{padding-right:.125rem}.suffix{padding-left:.125rem}.input-container{width:100%}.label{position:absolute;pointer-events:none;max-width:calc(100% - 1rem);display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;top:1rem;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}.invalid .label,.invalid-style .label{color:rgb(var(--mdui-color-error))}:host([variant=outlined]) .label{padding:0 .25rem;margin:0 -.25rem}:host([variant=outlined]:hover) .label{color:rgb(var(--mdui-color-on-surface))}:host([variant=filled]:hover) .invalid .label,:host([variant=filled]:hover) .invalid-style .label,:host([variant=outlined]:hover) .invalid .label,:host([variant=outlined]:hover) .invalid-style .label{color:rgb(var(--mdui-color-on-error-container))}:host([variant=filled][focused-style]) .label,:host([variant=filled][focused]) .label,:host([variant=outlined][focused-style]) .label,:host([variant=outlined][focused]) .label{color:rgb(var(--mdui-color-primary))}:host([variant=filled]) .has-value .label,:host([variant=filled][focused-style]) .label,:host([variant=filled][focused]) .label,:host([variant=filled][type=date]) .label,:host([variant=filled][type=datetime-local]) .label,:host([variant=filled][type=month]) .label,:host([variant=filled][type=time]) .label,:host([variant=filled][type=week]) .label{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height);top:.25rem}:host([variant=outlined]) .has-value .label,:host([variant=outlined][focused-style]) .label,:host([variant=outlined][focused]) .label,:host([variant=outlined][type=date]) .label,:host([variant=outlined][type=datetime-local]) .label,:host([variant=outlined][type=month]) .label,:host([variant=outlined][type=time]) .label,:host([variant=outlined][type=week]) .label{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height);top:-.5rem;left:.75rem;background-color:rgb(var(--mdui-color-background))}:host([variant=filled][focused-style]) .invalid .label,:host([variant=filled][focused-style]) .invalid-style .label,:host([variant=filled][focused]) .invalid .label,:host([variant=filled][focused]) .invalid-style .label,:host([variant=outlined][focused-style]) .invalid .label,:host([variant=outlined][focused-style]) .invalid-style .label,:host([variant=outlined][focused]) .invalid .label,:host([variant=outlined][focused]) .invalid-style .label{color:rgb(var(--mdui-color-error))}:host([variant=filled][disabled]) .label,:host([variant=outlined][disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}.input{display:flex;flex-wrap:wrap;width:100%;border:none;outline:0;background:0 0;-webkit-appearance:none;appearance:none;resize:none;cursor:inherit;font-family:inherit;padding:1rem 0;font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height);color:rgb(var(--mdui-color-on-surface));caret-color:rgb(var(--mdui-color-primary))}.input.hide-input{opacity:0;height:0;padding:0!important;overflow:hidden}.input::placeholder{color:rgb(var(--mdui-color-on-surface-variant))}.invalid .input,.invalid-style .input{caret-color:rgb(var(--mdui-color-error))}:host([disabled]) .input{color:rgba(var(--mdui-color-on-surface),38%)}:host([end-aligned]) .input{text-align:right}:host([variant=filled]) .label+.input{padding:1.5rem 0 .5rem 0}.supporting{display:flex;justify-content:space-between;padding:.25rem 1rem;color:rgb(var(--mdui-color-on-surface-variant))}.supporting.invalid,.supporting.invalid-style{color:rgb(var(--mdui-color-error))}.helper{display:block;opacity:1;transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}:host([disabled]) .helper{color:rgba(var(--mdui-color-on-surface),38%)}:host([helper-on-focus]) .helper{opacity:0}:host([helper-on-focus][focused-style]) .helper,:host([helper-on-focus][focused]) .helper{opacity:1}.error{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}.counter{flex-wrap:nowrap;padding-left:1rem;font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}::-ms-reveal{display:none}.is-firefox .input[type=date],.is-firefox .input[type=datetime-local],.is-firefox .input[type=time]{-webkit-clip-path:inset(0 2em 0 0);clip-path:inset(0 2em 0 0)}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;display:none}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}`;