mdui 2.0.1 → 2.0.2

package/components/switch/index.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
@@ -42,7 +42,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
+let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -111,11 +111,10 @@ export let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement))
         this.invalid = !this.inputRef.value.checkValidity();
     }
     async onCheckedChange() {
-        var _a;
         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);
         }
@@ -169,6 +168,7 @@ export let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement))
     }
     render() {
         return html `<label class="${classMap({
+            invalid: this.invalid,
             'has-unchecked-icon': this.uncheckedIcon || this.hasSlotController.test('unchecked-icon'),
         })}"><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"><div part="track" class="track"><div part="thumb" class="thumb"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="checked-icon" part="checked-icon" class="checked-icon">${this.checkedIcon
             ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
@@ -227,11 +227,7 @@ __decorate([
     property({ reflect: true })
 ], Switch.prototype, "value", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], Switch.prototype, "invalid", void 0);
 __decorate([
     watch('disabled', true),
@@ -243,3 +239,4 @@ __decorate([
 Switch = __decorate([
     customElement('mdui-switch')
 ], Switch);
+export { Switch };

package/components/switch/style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);--shape-corner-thumb:var(--mdui-shape-corner-full);position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;height:2.5rem}:host([disabled]){cursor:default;pointer-events:none}label{display:inline-flex;align-items:center;width:100%;height:100%;white-space:nowrap;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}.track{position:relative;display:flex;align-items:center;border-radius:var(--shape-corner);transition-property:background-color,border-width;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:2rem;width:3.25rem;border:.125rem solid rgb(var(--mdui-color-outline));background-color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .track{background-color:rgb(var(--mdui-color-primary));border-width:0}:host([invalid]) .track{background-color:rgb(var(--mdui-color-error-container));border-color:rgb(var(--mdui-color-error))}:host([disabled]) .track{background-color:rgba(var(--mdui-color-surface-container-highest),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled][checked]) .track{background-color:rgba(var(--mdui-color-on-surface),.12)}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}mdui-ripple{border-radius:50%;transition-property:left,top;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);width:2.5rem;height:2.5rem}.thumb{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-thumb);transition-property:width,height,left,background-color;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:1rem;width:1rem;left:.375rem;background-color:rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.thumb mdui-ripple{left:-.75rem;top:-.75rem}.has-unchecked-icon .thumb{height:1.5rem;width:1.5rem;left:.125rem}.has-unchecked-icon .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([focus-visible]) .thumb,:host([hover]) .thumb,:host([pressed]) .thumb{background-color:rgb(var(--mdui-color-on-surface-variant))}:host([checked]) .thumb{height:1.5rem;width:1.5rem;left:1.5rem;background-color:rgb(var(--mdui-color-on-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([pressed]) .thumb{height:1.75rem;width:1.75rem;left:0}:host([pressed]) .thumb mdui-ripple{left:-.375rem;top:-.375rem}:host([pressed][checked]) .thumb{left:1.375rem}:host([focus-visible][checked]) .thumb,:host([hover][checked]) .thumb,:host([pressed][checked]) .thumb{background-color:rgb(var(--mdui-color-primary-container))}:host([invalid]) .thumb{background-color:rgb(var(--mdui-color-error));--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([focus-visible][invalid]) .thumb,:host([hover][invalid]) .thumb,:host([pressed][invalid]) .thumb{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .thumb{background-color:rgba(var(--mdui-color-on-surface),.38)}:host([disabled][checked]) .thumb{background-color:rgb(var(--mdui-color-surface))}.checked-icon,.unchecked-icon{display:flex;position:absolute;transition-property:opacity,transform;font-size:1rem}.unchecked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .unchecked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([disabled]) .unchecked-icon{color:rgba(var(--mdui-color-surface-container-highest),.38)}.checked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-on-primary-container))}:host([checked]) .checked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3)}:host([invalid]) .checked-icon{color:rgb(var(--mdui-color-error-container))}:host([disabled]) .checked-icon{color:rgba(var(--mdui-color-on-surface),.38)}.checked-icon .i,.unchecked-icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){font-size:inherit;color:inherit}`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);--shape-corner-thumb:var(--mdui-shape-corner-full);position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;height:2.5rem}:host([disabled]){cursor:default;pointer-events:none}label{display:inline-flex;align-items:center;width:100%;height:100%;white-space:nowrap;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}.track{position:relative;display:flex;align-items:center;border-radius:var(--shape-corner);transition-property:background-color,border-width;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:2rem;width:3.25rem;border:.125rem solid rgb(var(--mdui-color-outline));background-color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .track{background-color:rgb(var(--mdui-color-primary));border-width:0}.invalid .track{background-color:rgb(var(--mdui-color-error-container));border-color:rgb(var(--mdui-color-error))}:host([disabled]) .track{background-color:rgba(var(--mdui-color-surface-container-highest),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled][checked]) .track{background-color:rgba(var(--mdui-color-on-surface),.12)}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}mdui-ripple{border-radius:50%;transition-property:left,top;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);width:2.5rem;height:2.5rem}.thumb{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-thumb);transition-property:width,height,left,background-color;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:1rem;width:1rem;left:.375rem;background-color:rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.thumb mdui-ripple{left:-.75rem;top:-.75rem}.has-unchecked-icon .thumb{height:1.5rem;width:1.5rem;left:.125rem}.has-unchecked-icon .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([focus-visible]) .thumb,:host([hover]) .thumb,:host([pressed]) .thumb{background-color:rgb(var(--mdui-color-on-surface-variant))}:host([checked]) .thumb{height:1.5rem;width:1.5rem;left:1.5rem;background-color:rgb(var(--mdui-color-on-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([pressed]) .thumb{height:1.75rem;width:1.75rem;left:0}:host([pressed]) .thumb mdui-ripple{left:-.375rem;top:-.375rem}:host([pressed][checked]) .thumb{left:1.375rem}:host([focus-visible][checked]) .thumb,:host([hover][checked]) .thumb,:host([pressed][checked]) .thumb{background-color:rgb(var(--mdui-color-primary-container))}.invalid .thumb{background-color:rgb(var(--mdui-color-error));--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([focus-visible]) .invalid .thumb,:host([hover]) .invalid .thumb,:host([pressed]) .invalid .thumb{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .thumb{background-color:rgba(var(--mdui-color-on-surface),.38)}:host([disabled][checked]) .thumb{background-color:rgb(var(--mdui-color-surface))}.checked-icon,.unchecked-icon{display:flex;position:absolute;transition-property:opacity,transform;font-size:1rem}.unchecked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .unchecked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([disabled]) .unchecked-icon{color:rgba(var(--mdui-color-surface-container-highest),.38)}.checked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-on-primary-container))}:host([checked]) .checked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3)}.invalid .checked-icon{color:rgb(var(--mdui-color-error-container))}:host([disabled]) .checked-icon{color:rgba(var(--mdui-color-on-surface),.38)}.checked-icon .i,.unchecked-icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){font-size:inherit;color:inherit}`;

package/components/tabs/tab-panel.js

@@ -21,7 +21,7 @@ import { tabPanelStyle } from './tab-panel-style.js';
  *
  * @slot - 选项卡面板内容
  */
-export let TabPanel = class TabPanel extends LitElement {
+let TabPanel = class TabPanel extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -50,3 +50,4 @@ __decorate([
 TabPanel = __decorate([
     customElement('mdui-tab-panel')
 ], TabPanel);
+export { TabPanel };

package/components/tabs/tab-style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabStyle = css `:host{position:relative;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.container{display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%}.preset{flex-direction:column;min-height:3rem;padding:.625rem 1rem}:host([inline]) .preset{flex-direction:row}.icon-container,.label-container{position:relative;display:flex;align-items:center;justify-content:center}.icon-container ::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.icon-container ::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.label-container ::slotted([slot=badge]){position:absolute;left:100%;bottom:100%;transform:translate(-.75rem,.625rem)}.label-container ::slotted([slot=badge][variant=small]){transform:translate(-.375rem,.375rem)}.icon,.label{display:flex;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .icon,:host([focused]) .label,:host([hover]) .icon,:host([hover]) .label,:host([pressed]) .icon,:host([pressed]) .label{color:rgb(var(--mdui-color-on-surface))}:host([active]) .icon,:host([active]) .label{color:rgb(var(--mdui-color-primary))}:host([active][variant=secondary]) .icon,:host([active][variant=secondary]) .label{color:rgb(var(--mdui-color-on-surface))}.icon{font-size:1.5rem}.label{font-size:var(--mdui-typescale-title-small-size);font-weight:var(--mdui-typescale-title-small-weight);letter-spacing:var(--mdui-typescale-title-small-tracking);line-height:var(--mdui-typescale-title-small-line-height)}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit;color:inherit}`;
+export const tabStyle = css `:host{position:relative;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.container{display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%}.preset{flex-direction:column;min-height:3rem;padding:.625rem 1rem}:host([inline]) .preset{flex-direction:row}.icon-container,.label-container{position:relative;display:flex;align-items:center;justify-content:center}.icon-container ::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.icon-container ::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.label-container ::slotted([slot=badge]){position:absolute;left:100%;bottom:100%;transform:translate(-.75rem,.625rem)}.label-container ::slotted([slot=badge][variant=small]){transform:translate(-.375rem,.375rem)}.icon,.label{display:flex;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .icon,:host([focused]) .label,:host([hover]) .icon,:host([hover]) .label,:host([pressed]) .icon,:host([pressed]) .label{color:rgb(var(--mdui-color-on-surface))}:host([active]) .icon,:host([active]) .label{color:rgb(var(--mdui-color-primary))}:host([active]) .variant-secondary .icon,:host([active]) .variant-secondary .label{color:rgb(var(--mdui-color-on-surface))}.icon{font-size:1.5rem}.label{font-size:var(--mdui-typescale-title-small-size);font-weight:var(--mdui-typescale-title-small-weight);letter-spacing:var(--mdui-typescale-title-small-tracking);line-height:var(--mdui-typescale-title-small-line-height)}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit;color:inherit}`;

package/components/tabs/tab.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
-import cc from 'classcat';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
@@ -40,7 +40,7 @@ import { tabStyle } from './tab-style.js';
  * @csspart icon - 导航项中的图标
  * @csspart label - 导航项的文本
  */
-export let Tab = class Tab extends RippleMixin(FocusableMixin(LitElement)) {
+let Tab = class Tab extends RippleMixin(FocusableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -76,7 +76,11 @@ export let Tab = class Tab extends RippleMixin(FocusableMixin(LitElement)) {
         const hasIcon = this.icon || this.hasSlotController.test('icon');
         const hasCustomSlot = this.hasSlotController.test('custom');
         const renderBadge = () => html `<slot name="badge"></slot>`;
-        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><div part="container" class="container ${cc({ preset: !hasCustomSlot })}"><slot name="custom"><div class="icon-container">${when(hasIcon || this.icon, renderBadge)}<slot name="icon" part="icon" class="icon">${this.icon
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><div part="container" class="${classMap({
+            container: true,
+            preset: !hasCustomSlot,
+            'variant-secondary': this.variant === 'secondary',
+        })}"><slot name="custom"><div class="icon-container">${when(hasIcon || this.icon, renderBadge)}<slot name="icon" part="icon" class="icon">${this.icon
             ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
             : nothingTemplate}</slot></div><div class="label-container">${when(!hasIcon, renderBadge)}<slot part="label" class="label"></slot></div></slot></div>`;
     }
@@ -103,8 +107,9 @@ __decorate([
     })
 ], Tab.prototype, "active", void 0);
 __decorate([
-    property({ reflect: true })
+    state()
 ], Tab.prototype, "variant", void 0);
 Tab = __decorate([
     customElement('mdui-tab')
 ], Tab);
+export { Tab };

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

@@ -3,7 +3,7 @@ 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 type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
  *
@@ -62,19 +62,20 @@ 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;

package/components/tabs/tabs.js

@@ -1,12 +1,14 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+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 { 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';
@@ -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 LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -69,59 +71,58 @@ 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) {
+            emit(this, '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');
         this.activeKey = tab.key;
+        this.isInitial = false;
         this.updateActive();
     }
     updateActive() {
@@ -131,11 +132,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 +154,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 +205,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 +232,4 @@ __decorate([
 Tabs = __decorate([
     customElement('mdui-tabs')
 ], Tabs);
+export { Tabs };

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

@@ -7,7 +7,7 @@ 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';
+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 LitElement;
 /**
  * @summary 文本框组件
@@ -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;

package/components/text-field/index.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(LitElement) {
     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();
     }
     /**
      * 选中文本框中的文本
@@ -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,10 +382,11 @@ 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;
@@ -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}`;