mdui 2.0.1 → 2.0.3

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2016-present zdhxiong@gmail.com
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2016-present zdhxiong@gmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/avatar/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../icon.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
@@ -15,7 +15,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Avatar extends LitElement {
+export declare class Avatar extends MduiElement<AvatarEventMap> {
     static styles: CSSResultGroup;
     /**
      * 头像的图片地址
@@ -42,6 +42,8 @@ export declare class Avatar extends LitElement {
     private readonly hasSlotController;
     protected render(): TemplateResult;
 }
+export interface AvatarEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-avatar': Avatar;

package/components/avatar/index.js

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
@@ -22,7 +23,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Avatar = class Avatar extends LitElement {
+let Avatar = class Avatar extends MduiElement {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, '[default]');
@@ -53,3 +54,4 @@ __decorate([
 Avatar = __decorate([
     customElement('mdui-avatar')
 ], Avatar);
+export { Avatar };

package/components/badge/index.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 徽标组件
@@ -11,7 +11,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Badge extends LitElement {
+export declare class Badge extends MduiElement<BadgeEventMap> {
     static styles: CSSResultGroup;
     /**
      * 徽标形状。可选值为：
@@ -21,6 +21,8 @@ export declare class Badge extends LitElement {
     variant: /*小型徽标，不显示文字*/ 'small' | /*大型徽标，会显示文字*/ 'large';
     protected render(): TemplateResult;
 }
+export interface BadgeEventMap {
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-badge': Badge;

package/components/badge/index.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 { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
@@ -15,7 +16,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Badge = class Badge extends LitElement {
+let Badge = class Badge extends MduiElement {
     constructor() {
         super(...arguments);
         /**
@@ -39,3 +40,4 @@ __decorate([
 Badge = __decorate([
     customElement('mdui-badge')
 ], Badge);
+export { Badge };

package/components/bottom-app-bar/index.d.ts

@@ -1,7 +1,7 @@
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import type { LayoutPlacement } from '../layout/helper.js';
 import type { ScrollPaddingPosition } from '@mdui/shared/mixins/scrollBehavior.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 declare const BottomAppBar_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/scrollBehavior.js").ScrollBehaviorMixinInterface> & typeof LayoutItemBase;
 /**
  * @summary 底部应用栏组件
@@ -27,7 +27,7 @@ declare const BottomAppBar_base: import("@open-wc/dedupe-mixin").Constructor<imp
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export declare class BottomAppBar extends BottomAppBar_base {
+export declare class BottomAppBar extends BottomAppBar_base<BottomAppBarEventMap> {
     static styles: CSSResultGroup;
     /**
      * 是否隐藏
@@ -44,7 +44,7 @@ export declare class BottomAppBar extends BottomAppBar_base {
     scrollBehavior?: 'hide';
     protected get scrollPaddingPosition(): ScrollPaddingPosition;
     protected get layoutPlacement(): LayoutPlacement;
-    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
     /**
      * 滚动行为
@@ -52,6 +52,12 @@ export declare class BottomAppBar extends BottomAppBar_base {
      */
     protected runScrollThreshold(isScrollingUp: boolean): void;
 }
+export interface BottomAppBarEventMap {
+    show: CustomEvent<void>;
+    shown: CustomEvent<void>;
+    hide: CustomEvent<void>;
+    hidden: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-bottom-app-bar': BottomAppBar;

package/components/bottom-app-bar/index.js

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.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 { ScrollBehaviorMixin } from '@mdui/shared/mixins/scrollBehavior.js';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
@@ -31,7 +30,7 @@ import { style } from './style.js';
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
  */
-export let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
+let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
     constructor() {
         super(...arguments);
         /**
@@ -49,11 +48,11 @@ export let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutI
     get layoutPlacement() {
         return 'bottom';
     }
-    connectedCallback() {
-        super.connectedCallback();
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
         this.addEventListener('transitionend', (event) => {
             if (event.target === this) {
-                emit(this, this.hide ? 'hidden' : 'shown');
+                this.emit(this.hide ? 'hidden' : 'shown');
             }
         });
     }
@@ -67,15 +66,15 @@ export let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutI
     runScrollThreshold(isScrollingUp) {
         // 向下滚动
         if (!isScrollingUp && !this.hide) {
-            const requestHide = emit(this, 'hide');
-            if (!requestHide.defaultPrevented) {
+            const eventProceeded = this.emit('hide', { cancelable: true });
+            if (eventProceeded) {
                 this.hide = true;
             }
         }
         // 向上滚动
         if (isScrollingUp && this.hide) {
-            const requestShow = emit(this, 'show');
-            if (!requestShow.defaultPrevented) {
+            const eventProceeded = this.emit('show', { cancelable: true });
+            if (eventProceeded) {
                 this.hide = false;
             }
         }
@@ -103,3 +102,4 @@ __decorate([
 BottomAppBar = __decorate([
     customElement('mdui-bottom-app-bar')
 ], BottomAppBar);
+export { BottomAppBar };

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

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '../circular-progress.js';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 type RenderButtonOptions = {
     id?: string;
     className?: string;
@@ -8,8 +8,8 @@ type RenderButtonOptions = {
     content?: TemplateResult | TemplateResult[];
     tabindex?: number;
 };
-declare const ButtonBase_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & 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 ButtonBase extends ButtonBase_base {
+declare const ButtonBase_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & 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 ButtonBase<E> extends ButtonBase_base<E> {
     static styles: CSSResultGroup;
     /**
      * 是否禁用
@@ -114,7 +114,6 @@ export declare class ButtonBase extends ButtonBase_base {
     protected get rippleDisabled(): boolean;
     protected get focusElement(): HTMLElement | null;
     protected get focusDisabled(): boolean;
-    connectedCallback(): void;
     /**
      * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
      */
@@ -131,6 +130,7 @@ export declare class ButtonBase extends ButtonBase_base {
      * @param message 自定义的提示文本
      */
     setCustomValidity(message: string): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected renderLoading(): TemplateResult;
     protected renderButton({ id, className, part, content, }: RenderButtonOptions): TemplateResult;
     protected isButton(): boolean;

package/components/button/button-base.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import cc from 'classcat';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController } from '@mdui/shared/controllers/form.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 { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
@@ -13,7 +13,7 @@ import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
 import '../circular-progress.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { buttonBaseStyle } from './button-base-style.js';
-export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**
@@ -76,25 +76,15 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElemen
         return this.disabled || this.loading;
     }
     get focusElement() {
-        var _a, _b;
         return this.isButton()
-            ? (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('._button')
-            : (_b = this.renderRoot) === null || _b === void 0 ? void 0 : _b.querySelector('._a');
+            ? this.renderRoot?.querySelector('._button')
+            : !this.focusDisabled
+                ? this.renderRoot?.querySelector('._a')
+                : this;
     }
     get focusDisabled() {
         return this.disabled || this.loading;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', () => {
-            if (this.type === 'submit') {
-                this.formController.submit(this);
-            }
-            if (this.type === 'reset') {
-                this.formController.reset(this);
-            }
-        });
-    }
     /**
      * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
      */
@@ -102,7 +92,8 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElemen
         if (this.isButton()) {
             const valid = this.focusElement.checkValidity();
             if (!valid) {
-                emit(this, 'invalid', {
+                // @ts-ignore
+                this.emit('invalid', {
                     bubbles: false,
                     cancelable: true,
                     composed: false,
@@ -121,7 +112,8 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElemen
         if (this.isButton()) {
             const invalid = !this.focusElement.reportValidity();
             if (invalid) {
-                emit(this, 'invalid', {
+                // @ts-ignore
+                this.emit('invalid', {
                     bubbles: false,
                     cancelable: true,
                     composed: false,
@@ -142,6 +134,17 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(LitElemen
             this.focusElement.setCustomValidity(message);
         }
     }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.addEventListener('click', () => {
+            if (this.type === 'submit') {
+                this.formController.submit(this);
+            }
+            if (this.type === 'reset') {
+                this.formController.reset(this);
+            }
+        });
+    }
     renderLoading() {
         return this.loading
             ? html `<mdui-circular-progress part="loading"></mdui-circular-progress>`

package/components/button/index.d.ts

@@ -25,7 +25,7 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Button extends ButtonBase {
+export declare class Button extends ButtonBase<ButtonEventMap> {
     static styles: CSSResultGroup;
     /**
      * 按钮形状。可选值为：
@@ -57,6 +57,11 @@ export declare class Button extends ButtonBase {
     private renderEndIcon;
     private renderInner;
 }
+export interface ButtonEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-button': Button;

package/components/button/index.js

@@ -30,7 +30,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Button = class Button extends ButtonBase {
+let Button = class Button extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
@@ -108,3 +108,4 @@ __decorate([
 Button = __decorate([
     customElement('mdui-button')
 ], Button);
+export { Button };

package/components/button-icon/index.d.ts

@@ -24,7 +24,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class ButtonIcon extends ButtonBase {
+export declare class ButtonIcon extends ButtonBase<ButtonIconEventMap> {
     static styles: CSSResultGroup;
     /**
      * 图标按钮的形状。可选值为：
@@ -59,6 +59,12 @@ export declare class ButtonIcon extends ButtonBase {
     protected render(): TemplateResult;
     private renderIcon;
 }
+export interface ButtonIconEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-button-icon': ButtonIcon;

package/components/button-icon/index.js

@@ -5,7 +5,6 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.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 { ButtonBase } from '../button/button-base.js';
 import '../icon.js';
@@ -32,7 +31,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let ButtonIcon = class ButtonIcon extends ButtonBase {
+let ButtonIcon = class ButtonIcon extends ButtonBase {
     constructor() {
         super(...arguments);
         /**
@@ -59,7 +58,7 @@ export let ButtonIcon = class ButtonIcon extends ButtonBase {
         return this.rippleRef.value;
     }
     onSelectedChange() {
-        emit(this, 'change');
+        this.emit('change');
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
@@ -127,3 +126,4 @@ __decorate([
 ButtonIcon = __decorate([
     customElement('mdui-button-icon')
 ], ButtonIcon);
+export { ButtonIcon };

package/components/card/index.d.ts

@@ -1,7 +1,7 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { Ripple } from '../ripple/index.js';
 import type { TemplateResult, CSSResultGroup } from 'lit';
-declare const Card_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & 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 Card_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & 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 卡片组件
  *
@@ -16,7 +16,7 @@ declare const Card_base: import("@open-wc/dedupe-mixin").Constructor<import("@md
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export declare class Card extends Card_base {
+export declare class Card extends Card_base<CardEventMap> {
     static styles: CSSResultGroup;
     /**
      * 卡片形状。可选值为：
@@ -37,10 +37,14 @@ export declare class Card extends Card_base {
     private readonly rippleRef;
     protected get rippleElement(): Ripple;
     protected get rippleDisabled(): boolean;
-    protected get focusElement(): HTMLElement;
+    protected get focusElement(): HTMLElement | null;
     protected get focusDisabled(): boolean;
     protected render(): TemplateResult;
 }
+export interface CardEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-card': Card;

package/components/card/index.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.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 { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
@@ -22,7 +23,7 @@ import { style } from './style.js';
  *
  * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
-export let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
+let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
         super(...arguments);
         /**
@@ -50,7 +51,9 @@ export let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitE
         return this.disabled || (!this.href && !this.clickable);
     }
     get focusElement() {
-        return this;
+        return this.href && !this.disabled
+            ? this.renderRoot.querySelector('._a')
+            : this;
     }
     get focusDisabled() {
         return this.rippleDisabled;
@@ -85,3 +88,4 @@ __decorate([
 Card = __decorate([
     customElement('mdui-card')
 ], Card);
+export { Card };

package/components/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/check-box-outline-blank.js';
 import '@mdui/shared/icons/check-box.js';
 import '@mdui/shared/icons/indeterminate-check-box.js';
@@ -6,7 +6,7 @@ import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { TemplateResult, CSSResultGroup } from 'lit';
-declare const Checkbox_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 Checkbox_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 复选框组件
  *
@@ -31,7 +31,7 @@ declare const Checkbox_base: import("@open-wc/dedupe-mixin").Constructor<import(
  * @csspart indeterminate-icon - 不确定状态图标
  * @csspart label - 文本
  */
-export declare class Checkbox extends Checkbox_base implements FormControl {
+export declare class Checkbox extends Checkbox_base<CheckboxEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
      * 是否为禁用状态
@@ -122,6 +122,13 @@ export declare class Checkbox extends Checkbox_base implements FormControl {
      */
     private onChange;
 }
+export interface CheckboxEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: Event;
+    invalid: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-checkbox': Checkbox;