mdui 2.0.1 → 2.0.3

package/components/slider/index.js

@@ -10,7 +10,6 @@ import { when } from 'lit/directives/when.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { SliderBase } from './slider-base.js';
 import { style } from './style.js';
 /**
@@ -32,7 +31,7 @@ import { style } from './style.js';
  * @csspart label 提示文本
  * @csspart tickmark - 刻度标记
  */
-export let Slider = class Slider extends SliderBase {
+let Slider = class Slider extends SliderBase {
     constructor() {
         super(...arguments);
         /**
@@ -50,29 +49,26 @@ export let Slider = class Slider extends SliderBase {
     get rippleElement() {
         return this.rippleRef.value;
     }
-    onValueChange() {
-        var _a;
+    async onValueChange() {
+        this.value = this.fixValue(this.value);
         // 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);
         }
         else {
+            await this.updateComplete;
             this.invalid = !this.inputRef.value.checkValidity();
         }
-        this.inputRef.value.value = this.value.toString();
-        this.value = parseFloat(this.inputRef.value.value);
         this.updateStyle();
     }
     connectedCallback() {
         super.connectedCallback();
-        if (this.value < this.min) {
-            this.value = this.min;
-        }
-        if (this.value > this.max) {
-            this.value = this.max;
-        }
+        this.value = this.fixValue(this.value);
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         const onTouchStart = () => {
             if (!this.disabled) {
                 this.labelVisible = true;
@@ -87,9 +83,6 @@ export let Slider = class Slider extends SliderBase {
         this.addEventListener('mousedown', onTouchStart);
         this.addEventListener('touchend', onTouchEnd);
         this.addEventListener('mouseup', onTouchEnd);
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
         this.updateStyle();
     }
     /**
@@ -97,7 +90,7 @@ export let Slider = class Slider extends SliderBase {
      * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
      */
     render() {
-        return html `<label><input ${ref(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" .value="${live(this.value.toString())}" @input="${this.onInput}" @change="${this.onChange}"><div part="track-inactive" class="track-inactive"></div><div ${ref(this.trackActiveRef)} part="track-active" class="track-active"></div><div ${ref(this.handleRef)} part="handle" class="handle"><div class="elevation"></div><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value)}</div>${when(this.tickmarks, () => map(this.getCandidateValues(), (value) => html `<div part="tickmark" class="tickmark ${classMap({ active: value < this.value })}" style="${styleMap({
+        return html `<label class="${classMap({ invalid: this.invalid })}"><input ${ref(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" .value="${live(this.value.toString())}" @input="${this.onInput}" @change="${this.onChange}"><div part="track-inactive" class="track-inactive"></div><div ${ref(this.trackActiveRef)} part="track-active" class="track-active"></div><div ${ref(this.handleRef)} part="handle" class="handle"><div class="elevation"></div><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value)}</div>${when(this.tickmarks, () => map(this.getCandidateValues(), (value) => html `<div part="tickmark" class="tickmark ${classMap({ active: value < this.value })}" style="${styleMap({
             left: `${((value - this.min) / this.max) * 100}%`,
             display: value === this.value ? 'none' : 'block',
         })}"></div>`))}</label>`;
@@ -109,7 +102,6 @@ export let Slider = class Slider extends SliderBase {
     }
     onInput() {
         this.value = parseFloat(this.inputRef.value.value);
-        emit(this, 'input');
         this.updateStyle();
     }
 };
@@ -126,3 +118,4 @@ __decorate([
 Slider = __decorate([
     customElement('mdui-slider')
 ], Slider);
+export { Slider };

package/components/slider/slider-base-style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sliderBaseStyle = css `:host{position:relative;display:block;width:100%;-webkit-tap-highlight-color:transparent;height:2.5rem;padding:0 1.25rem}label{position:relative;display:block;width:100%;height:100%}input[type=range]{position:absolute;inset:0;z-index:4;height:100%;cursor:pointer;opacity:0;-webkit-appearance:none;appearance:none;margin:0 -1.25rem;padding:0 .75rem}:host([disabled]) input[type=range]{cursor:not-allowed}.track-active,.track-inactive{position:absolute;top:50%;height:.25rem;margin-top:-.125rem}.track-inactive{left:-.125rem;right:-.125rem;border-radius:var(--mdui-shape-corner-full);background-color:rgb(var(--mdui-color-surface-container-highest))}:host([invalid]) .track-inactive{background-color:rgba(var(--mdui-color-error),.12)}:host([disabled]) .track-inactive{background-color:rgba(var(--mdui-color-on-surface),.12)}.track-active{background-color:rgb(var(--mdui-color-primary))}:host([invalid]) .track-active{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .track-active{background-color:rgba(var(--mdui-color-on-surface),.38)}.handle{position:absolute;top:50%;transform:translate(-50%);cursor:pointer;z-index:2;width:2.5rem;height:2.5rem;margin-top:-1.25rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([invalid]) .handle{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.handle .elevation,.handle::before{position:absolute;display:block;content:' ';left:.625rem;top:.625rem;width:1.25rem;height:1.25rem;border-radius:var(--mdui-shape-corner-full)}.handle .elevation{background-color:rgb(var(--mdui-color-primary));box-shadow:var(--mdui-elevation-level1)}:host([invalid]) .handle .elevation{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .handle .elevation{background-color:rgba(var(--mdui-color-on-surface),.38);box-shadow:var(--mdui-elevation-level0)}.handle::before{background-color:rgb(var(--mdui-color-background))}.handle mdui-ripple{border-radius:var(--mdui-shape-corner-full)}.label{position:absolute;left:50%;transform:translateX(-50%) scale(0);transform-origin:center bottom;display:flex;align-items:center;justify-content:center;cursor:default;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;transition:transform var(--mdui-motion-duration-short2) var(--mdui-motion-easing-standard);bottom:2.5rem;min-width:1.75rem;height:1.75rem;padding:.375rem .5rem;border-radius:var(--mdui-shape-corner-full);color:rgb(var(--mdui-color-on-primary));font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height);background-color:rgb(var(--mdui-color-primary))}:host([invalid]) .label{color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error))}.label::after{content:' ';position:absolute;z-index:-1;transform:rotate(45deg);width:.875rem;height:.875rem;bottom:-.125rem;background-color:rgb(var(--mdui-color-primary))}:host([invalid]) .label::after{background-color:rgb(var(--mdui-color-error))}.label-visible{transform:translateX(-50%) scale(1);transition:transform var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.tickmark{position:absolute;top:50%;transform:translate(-50%);width:.125rem;height:.125rem;margin-top:-.0625rem;border-radius:var(--mdui-shape-corner-full);background-color:rgba(var(--mdui-color-on-surface-variant),.38)}:host([invalid]) .tickmark{background-color:rgba(var(--mdui-color-error),.38)}.tickmark.active{background-color:rgba(var(--mdui-color-on-primary),.38)}:host([invalid]) .tickmark.active{background-color:rgba(var(--mdui-color-on-error),.38)}:host([disabled]) .tickmark{background-color:rgba(var(--mdui-color-on-surface),.38)}`;
+export const sliderBaseStyle = css `:host{position:relative;display:block;width:100%;-webkit-tap-highlight-color:transparent;height:2.5rem;padding:0 1.25rem}label{position:relative;display:block;width:100%;height:100%}input[type=range]{position:absolute;inset:0;z-index:4;height:100%;cursor:pointer;opacity:0;-webkit-appearance:none;appearance:none;width:calc(100% + 20rem * 2 / 16);margin:0 -1.25rem;padding:0 .75rem}:host([disabled]) input[type=range]{cursor:not-allowed}.track-active,.track-inactive{position:absolute;top:50%;height:.25rem;margin-top:-.125rem}.track-inactive{left:-.125rem;right:-.125rem;border-radius:var(--mdui-shape-corner-full);background-color:rgb(var(--mdui-color-surface-container-highest))}.invalid .track-inactive{background-color:rgba(var(--mdui-color-error),.12)}:host([disabled]) .track-inactive{background-color:rgba(var(--mdui-color-on-surface),.12)}.track-active{background-color:rgb(var(--mdui-color-primary))}.invalid .track-active{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .track-active{background-color:rgba(var(--mdui-color-on-surface),.38)}.handle{position:absolute;top:50%;transform:translate(-50%);cursor:pointer;z-index:2;width:2.5rem;height:2.5rem;margin-top:-1.25rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.invalid .handle{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.handle .elevation,.handle::before{position:absolute;display:block;content:' ';left:.625rem;top:.625rem;width:1.25rem;height:1.25rem;border-radius:var(--mdui-shape-corner-full)}.handle .elevation{background-color:rgb(var(--mdui-color-primary));box-shadow:var(--mdui-elevation-level1)}.invalid .handle .elevation{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .handle .elevation{background-color:rgba(var(--mdui-color-on-surface),.38);box-shadow:var(--mdui-elevation-level0)}.handle::before{background-color:rgb(var(--mdui-color-background))}.handle mdui-ripple{border-radius:var(--mdui-shape-corner-full)}.label{position:absolute;left:50%;transform:translateX(-50%) scale(0);transform-origin:center bottom;display:flex;align-items:center;justify-content:center;cursor:default;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;transition:transform var(--mdui-motion-duration-short2) var(--mdui-motion-easing-standard);bottom:2.5rem;min-width:1.75rem;height:1.75rem;padding:.375rem .5rem;border-radius:var(--mdui-shape-corner-full);color:rgb(var(--mdui-color-on-primary));font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height);background-color:rgb(var(--mdui-color-primary))}.invalid .label{color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error))}.label::after{content:' ';position:absolute;z-index:-1;transform:rotate(45deg);width:.875rem;height:.875rem;bottom:-.125rem;background-color:rgb(var(--mdui-color-primary))}.invalid .label::after{background-color:rgb(var(--mdui-color-error))}.label-visible{transform:translateX(-50%) scale(1);transition:transform var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.tickmark{position:absolute;top:50%;transform:translate(-50%);width:.125rem;height:.125rem;margin-top:-.0625rem;border-radius:var(--mdui-shape-corner-full);background-color:rgba(var(--mdui-color-on-surface-variant),.38)}.invalid .tickmark{background-color:rgba(var(--mdui-color-error),.38)}.tickmark.active{background-color:rgba(var(--mdui-color-on-primary),.38)}.invalid .tickmark.active{background-color:rgba(var(--mdui-color-on-error),.38)}:host([disabled]) .tickmark{background-color:rgba(var(--mdui-color-on-surface),.38)}`;

package/components/slider/slider-base.d.ts

@@ -1,8 +1,8 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import type { Ref } from 'lit/directives/ref.js';
-declare const SliderBase_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
-export declare class SliderBase extends SliderBase_base {
+declare const SliderBase_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
+export declare class SliderBase<E> extends SliderBase_base<E> {
     static styles: CSSResultGroup;
     /**
      * 最小允许值，默认为 `0`
@@ -79,6 +79,10 @@ export declare class SliderBase extends SliderBase_base {
      * @param message 自定义的提示文本
      */
     setCustomValidity(message: string): void;
+    /**
+     * value 不在 min、max 或 step 的限制范围内时，修正 value 的值
+     */
+    protected fixValue(value: number): number;
     /**
      * 获取候选值组成的数组
      */

package/components/slider/slider-base.js

@@ -1,17 +1,17 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.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 { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { sliderBaseStyle } from './slider-base-style.js';
-export class SliderBase extends RippleMixin(FocusableMixin(LitElement)) {
+export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -87,7 +87,8 @@ export class SliderBase extends RippleMixin(FocusableMixin(LitElement)) {
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            // @ts-ignore
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -103,13 +104,14 @@ export class SliderBase extends RippleMixin(FocusableMixin(LitElement)) {
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
         if (this.invalid) {
-            const requestInvalid = emit(this, 'invalid', {
+            // @ts-ignore
+            const eventProceeded = this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
             });
-            // 调用了 preventDefault() 时，隐藏默认的表单错误提示
-            if (requestInvalid.defaultPrevented) {
+            if (!eventProceeded) {
+                // 调用了 preventDefault() 时，隐藏默认的表单错误提示
                 this.blur();
                 this.focus();
             }
@@ -125,6 +127,22 @@ export class SliderBase extends RippleMixin(FocusableMixin(LitElement)) {
         this.inputRef.value.setCustomValidity(message);
         this.invalid = !this.inputRef.value.checkValidity();
     }
+    /**
+     * value 不在 min、max 或 step 的限制范围内时，修正 value 的值
+     */
+    fixValue(value) {
+        const { min, max, step } = this;
+        // 确保 value 在 min 和 max 范围内
+        value = Math.min(Math.max(value, min), max);
+        // 计算最接近 value 的 step 值
+        const steps = Math.round((value - min) / step);
+        let fixedValue = min + steps * step;
+        // 如果修正后的值超出最大值，则减去一个 step
+        if (fixedValue > max) {
+            fixedValue -= step;
+        }
+        return fixedValue;
+    }
     /**
      * 获取候选值组成的数组
      */
@@ -138,7 +156,8 @@ export class SliderBase extends RippleMixin(FocusableMixin(LitElement)) {
         return when(!this.nolabel, () => html `<div part="label" class="label ${classMap({ 'label-visible': this.labelVisible })}">${this.labelFormatter(value)}</div>`);
     }
     onChange() {
-        emit(this, 'change');
+        // @ts-ignore
+        this.emit('change');
     }
 }
 SliderBase.styles = [
@@ -182,11 +201,7 @@ __decorate([
     property({ reflect: true })
 ], SliderBase.prototype, "name", void 0);
 __decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-    })
+    state()
 ], SliderBase.prototype, "invalid", void 0);
 __decorate([
     state()

package/components/snackbar/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/clear.js';
 import '../button-icon.js';
 import '../button.js';
@@ -30,7 +30,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class Snackbar extends LitElement {
+export declare class Snackbar extends MduiElement<SnackbarEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否显示 Snackbar
@@ -91,6 +91,13 @@ export declare class Snackbar extends LitElement {
     private onActionClick;
     private onCloseClick;
 }
+export interface SnackbarEventMap {
+    open: CustomEvent<void>;
+    opened: CustomEvent<void>;
+    close: CustomEvent<void>;
+    closed: CustomEvent<void>;
+    'action-click': CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-snackbar': Snackbar;

package/components/snackbar/index.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { animateTo, stopAnimations } from '@mdui/shared/helpers/animate.js';
 import { breakpoint } from '@mdui/shared/helpers/breakpoint.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 { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import '@mdui/shared/icons/clear.js';
@@ -41,7 +41,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let Snackbar = class Snackbar extends LitElement {
+let Snackbar = class Snackbar extends MduiElement {
     constructor() {
         super();
         /**
@@ -97,8 +97,8 @@ export let Snackbar = class Snackbar extends LitElement {
                 await this.updateComplete;
             }
             if (hasUpdated) {
-                const requestOpen = emit(this, 'open', { cancelable: true });
-                if (requestOpen.defaultPrevented) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
                     return;
                 }
             }
@@ -155,14 +155,14 @@ export let Snackbar = class Snackbar extends LitElement {
                 })),
             ]);
             if (hasUpdated) {
-                emit(this, 'opened');
+                this.emit('opened');
             }
             return;
         }
         // 关闭
         if (!this.open && this.hasUpdated) {
-            const requestClose = emit(this, 'close', { cancelable: true });
-            if (requestClose.defaultPrevented) {
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
                 return;
             }
             window.clearTimeout(this.closeTimeout);
@@ -191,7 +191,7 @@ export let Snackbar = class Snackbar extends LitElement {
                 ...children.map((child) => animateTo(child, [{ opacity: 1 }, { opacity: 0, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear })),
             ]);
             this.style.display = 'none';
-            emit(this, 'closed');
+            this.emit('closed');
             return;
         }
     }
@@ -224,7 +224,7 @@ export let Snackbar = class Snackbar extends LitElement {
     }
     onActionClick(event) {
         event.stopPropagation();
-        emit(this, 'action-click');
+        this.emit('action-click');
     }
     onCloseClick() {
         this.open = false;
@@ -283,3 +283,4 @@ __decorate([
 Snackbar = __decorate([
     customElement('mdui-snackbar')
 ], Snackbar);
+export { Snackbar };

package/components/switch/index.d.ts

@@ -1,10 +1,10 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/check.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
-declare const Switch_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+declare const Switch_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
  * @summary 开关切换组件
  *
@@ -29,7 +29,7 @@ declare const Switch_base: import("@open-wc/dedupe-mixin").Constructor<import(".
  * @cssprop --shape-corner - 组件的轨道的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --shape-corner-thumb - 组件的图标容器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Switch extends Switch_base implements FormControl {
+export declare class Switch extends Switch_base<SwitchEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 是否为禁用状态
@@ -115,6 +115,13 @@ export declare class Switch extends Switch_base implements FormControl {
      */
     private onChange;
 }
+export interface SwitchEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: Event;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-switch': Switch;

package/components/switch/index.js

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+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';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.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 { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import '@mdui/shared/icons/check.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.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(MduiElement)) {
     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);
         }
@@ -129,7 +128,7 @@ export let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement))
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -145,13 +144,13 @@ export let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement))
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
         if (this.invalid) {
-            const requestInvalid = emit(this, 'invalid', {
+            const eventProceeded = this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
             });
             // 调用了 preventDefault() 时，隐藏默认的表单错误提示
-            if (requestInvalid.defaultPrevented) {
+            if (!eventProceeded) {
                 this.blur();
                 this.focus();
             }
@@ -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>`
@@ -183,7 +183,7 @@ export let Switch = class Switch extends RippleMixin(FocusableMixin(LitElement))
      */
     onChange() {
         this.checked = this.inputRef.value.checked;
-        emit(this, 'change');
+        this.emit('change');
     }
 };
 Switch.styles = [componentStyle, style];
@@ -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.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary 选项卡面板项组件。需与 `<mdui-tabs>` 和 `<mdui-tab>` 组件配合使用
@@ -17,7 +17,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - 选项卡面板内容
  */
-export declare class TabPanel extends LitElement {
+export declare class TabPanel extends MduiElement<TabPanelEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该选项卡面板的值
@@ -29,6 +29,8 @@ export declare class TabPanel extends LitElement {
     protected active: boolean;
     protected render(): TemplateResult;
 }
+export interface TabPanelEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tab-panel': TabPanel;

package/components/tabs/tab-panel.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { tabPanelStyle } from './tab-panel-style.js';
@@ -21,7 +22,7 @@ import { tabPanelStyle } from './tab-panel-style.js';
  *
  * @slot - 选项卡面板内容
  */
-export let TabPanel = class TabPanel extends LitElement {
+let TabPanel = class TabPanel extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -50,3 +51,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.d.ts

@@ -1,8 +1,8 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
-declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
  * @summary 选项卡项组件。需与 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件配合使用
  *
@@ -30,7 +30,7 @@ declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../r
  * @csspart icon - 导航项中的图标
  * @csspart label - 导航项的文本
  */
-export declare class Tab extends Tab_base {
+export declare class Tab extends Tab_base<TabEventMap> {
     static styles: CSSResultGroup;
     /**
      * 该选项卡导航项的值
@@ -61,6 +61,10 @@ export declare class Tab extends Tab_base {
     protected get focusDisabled(): boolean;
     protected render(): TemplateResult;
 }
+export interface TabEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-tab': Tab;

package/components/tabs/tab.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { html } from 'lit';
+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 { MduiElement } from '@mdui/shared/base/mdui-element.js';
 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 +41,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(MduiElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -76,7 +77,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 +108,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 };