mdui 1.0.1 → 2.0.0

package/components/checkbox/index.js

@@ -0,0 +1,257 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.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 { 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 { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.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';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
+import '../icon.js';
+import { RippleMixin } from '../ripple/ripple-mixin.js';
+import { style } from './style.js';
+/**
+ * @summary 复选框组件
+ *
+ * ```html
+ * <mdui-checkbox>Checkbox</mdui-checkbox>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 选中状态变更时触发
+ * @event input - 选中状态变更时触发
+ * @event invalid - 表单字段验证未通过时触发
+ *
+ * @slot - 文本
+ * @slot unchecked-icon - 未选中状态图标
+ * @slot checked-icon - 选中状态图标
+ * @slot indeterminate-icon - 不确定状态图标
+ *
+ * @csspart control - 左侧图标容器
+ * @csspart unchecked-icon - 未选中状态图标
+ * @csspart checked-icon - 选中状态图标
+ * @csspart indeterminate-icon - 不确定状态图标
+ * @csspart label - 文本
+ */
+export let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否为禁用状态
+         */
+        this.disabled = false;
+        /**
+         * 是否为选中状态
+         */
+        this.checked = false;
+        /**
+         * 默认选中状态。在重置表单时，将重置为该默认状态。该属性只能通过 JavaScript 属性设置
+         */
+        this.defaultChecked = false;
+        /**
+         * 是否为不确定状态
+         */
+        this.indeterminate = false;
+        /**
+         * 提交表单时，是否必须选中该复选框
+         */
+        this.required = false;
+        /**
+         * 复选框名称，将与表单数据一起提交
+         */
+        this.name = '';
+        /**
+         * 复选框的值，将于表单数据一起提交
+         */
+        this.value = 'on';
+        /**
+         * 是否验证未通过
+         */
+        this.invalid = false;
+        this.inputRef = createRef();
+        this.rippleRef = createRef();
+        this.formController = new FormController(this, {
+            value: (control) => (control.checked ? control.value : undefined),
+            defaultValue: (control) => control.defaultChecked,
+            setValue: (control, checked) => (control.checked = checked),
+        });
+    }
+    /**
+     * 表单验证状态对象
+     */
+    get validity() {
+        return this.inputRef.value.validity;
+    }
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage() {
+        return this.inputRef.value.validationMessage;
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    get rippleDisabled() {
+        return this.disabled;
+    }
+    get focusElement() {
+        return this.inputRef.value;
+    }
+    get focusDisabled() {
+        return this.disabled;
+    }
+    async onDisabledChange() {
+        await this.updateComplete;
+        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))) {
+            this.invalid = false;
+            formResets.get(form).delete(this);
+        }
+        else {
+            this.invalid = !this.inputRef.value.checkValidity();
+        }
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     */
+    checkValidity() {
+        const valid = this.inputRef.value.checkValidity();
+        if (!valid) {
+            emit(this, 'invalid', {
+                bubbles: false,
+                cancelable: true,
+                composed: false,
+            });
+        }
+        return valid;
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     *
+     * 验证未通过时，还将在组件上显示未通过的提示。
+     */
+    reportValidity() {
+        this.invalid = !this.inputRef.value.reportValidity();
+        if (this.invalid) {
+            const requestInvalid = emit(this, 'invalid', {
+                bubbles: false,
+                cancelable: true,
+                composed: false,
+            });
+            // 调用了 preventDefault() 时，隐藏默认的表单错误提示
+            if (requestInvalid.defaultPrevented) {
+                this.blur();
+                this.focus();
+            }
+        }
+        return !this.invalid;
+    }
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message) {
+        this.inputRef.value.setCustomValidity(message);
+        this.invalid = !this.inputRef.value.checkValidity();
+    }
+    render() {
+        return html `<label><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"> <i part="control"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon
+            ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-check-box-outline-blank class="i"></mdui-icon-check-box-outline-blank>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon
+            ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-check-box class="i"></mdui-icon-check-box>`}</slot><slot name="indeterminate-icon" part="indeterminate-icon" class="icon indeterminate-icon">${this.indeterminateIcon
+            ? html `<mdui-icon name="${this.indeterminateIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-indeterminate-check-box class="i"></mdui-icon-indeterminate-check-box>`}</slot></i><slot part="label" class="label"></slot></label>`;
+    }
+    /**
+     * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom
+     */
+    onChange() {
+        this.checked = this.inputRef.value.checked;
+        this.indeterminate = false;
+        emit(this, 'change');
+    }
+};
+Checkbox.styles = [componentStyle, style];
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Checkbox.prototype, "disabled", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    defaultValue('checked')
+], Checkbox.prototype, "defaultChecked", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true })
+], Checkbox.prototype, "form", void 0);
+__decorate([
+    property({ reflect: true })
+], Checkbox.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'unchecked-icon' })
+], Checkbox.prototype, "uncheckedIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'checked-icon' })
+], Checkbox.prototype, "checkedIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'indeterminate-icon' })
+], Checkbox.prototype, "indeterminateIcon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Checkbox.prototype, "invalid", void 0);
+__decorate([
+    watch('disabled', true),
+    watch('indeterminate', true),
+    watch('required', true)
+], Checkbox.prototype, "onDisabledChange", null);
+__decorate([
+    watch('checked', true)
+], Checkbox.prototype, "onCheckedChange", null);
+Checkbox = __decorate([
+    customElement('mdui-checkbox')
+], Checkbox);

package/components/checkbox/style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/components/checkbox/style.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const style = css `:host{position:relative;display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:.125rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}label{display:inline-flex;align-items:center;width:100%;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.125rem;height:1.125rem;margin:0 0 0 .6875rem}.icon{display:flex;position:absolute;opacity:1;transform:scale(1);color:rgb(var(--mdui-color-on-surface));font-size:1.5rem;transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.checked-icon,.indeterminate-icon{opacity:0;transform:scale(.5);transition-property:color,opacity,transform;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=indeterminate-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;width:2.5rem;min-width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface));transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]) .indeterminate-icon{opacity:0;transform:scale(.5)}:host([checked]) .checked-icon{opacity:1;transform:scale(1)}:host([indeterminate]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([indeterminate]) .icon{color:rgb(var(--mdui-color-primary))}:host([indeterminate]) .checked-icon{opacity:0;transform:scale(.5)}:host([indeterminate]) .indeterminate-icon{opacity:1;transform:scale(1)}:host([invalid]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([invalid]) .icon{color:rgb(var(--mdui-color-error))}:host([invalid]) .label{color:rgb(var(--mdui-color-error))}:host([disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled][checked]) .unchecked-icon,:host([disabled][indeterminate]) .unchecked-icon{opacity:0}`;

package/components/checkbox.d.ts

@@ -0,0 +1 @@
+export * from './checkbox/index.js';

package/components/checkbox.js

@@ -0,0 +1 @@
+export * from './checkbox/index.js';

package/components/chip/index.d.ts

@@ -0,0 +1,102 @@
+import '@mdui/shared/icons/check.js';
+import '@mdui/shared/icons/clear.js';
+import { ButtonBase } from '../button/button-base.js';
+import '../icon.js';
+import type { Ripple } from '../ripple/index.js';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+/**
+ * @summary 纸片组件
+ *
+ * ```html
+ * <mdui-chip>Chip</mdui-chip>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event invalid - 表单字段验证未通过时触发
+ * @event change - 选中状态变更时触发
+ * @event delete - 点击删除图标时触发
+ *
+ * @slot - 文本
+ * @slot icon - 左侧元素
+ * @slot end-icon - 右侧元素
+ * @slot selected-icon - 选中状态的左侧元素
+ * @slot delete-icon - 可删除时，右侧的删除元素
+ *
+ * @csspart button - 内部的 `button` 或 `a` 元素
+ * @csspart label - 文本
+ * @csspart icon - 左侧图标
+ * @csspart end-icon - 右侧图标
+ * @csspart selected-icon - 选中状态的左侧图标
+ * @csspart delete-icon - 可删除时，右侧的删除图标
+ * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class Chip extends ButtonBase {
+    static styles: CSSResultGroup;
+    /**
+     * 纸片形状。可选值为：
+     *
+     * * `assist`：用于显示和当前上下文相关的辅助操作。例如在点餐页面，提供分享，收藏等功能
+     * * `filter`：用于对内容进行筛选。例如在搜索结果页，对搜索结果进行过滤
+     * * `input`：用于表示用户输入的信息片段。例如 Gmail 中“收件人”字段中的联系人
+     * * `suggestion`：用于提供动态生成的推荐信息，以简化用户操作。例如在聊天应用中猜测用户可能想发送的信息，供用户选择
+     */
+    variant: /*用于显示和当前上下文相关的辅助操作。例如在点餐页面，提供分享，收藏等功能*/ 'assist' | /*用于对内容进行筛选。例如在搜索结果页，对搜索结果进行过滤*/ 'filter' | /*用于表示用户输入的信息片段。例如 Gmail 中“收件人”字段中的联系人*/ 'input' | /*用于提供动态生成的推荐信息，以简化用户操作。例如在聊天应用中猜测用户可能想发送的信息，供用户选择*/ 'suggestion';
+    /**
+     * 是否包含阴影
+     */
+    elevated: boolean;
+    /**
+     * 是否可选中
+     */
+    selectable: boolean;
+    /**
+     * 是否为选中状态
+     */
+    selected: boolean;
+    /**
+     * 是否可删除。为 `true` 时，在右侧会显示删除图标图标
+     */
+    deletable: boolean;
+    /**
+     * 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     */
+    icon?: string;
+    /**
+     * 选中状态，左侧的 Material Icons 图标名。也可以通过 `slot="selected-icon"` 设置
+     */
+    selectedIcon?: string;
+    /**
+     * 右侧的 Material Icons 图标名。也可以通过 `slot="end-icon"` 设置
+     */
+    endIcon?: string;
+    /**
+     * 右侧的 Material Icons 图标名。也可以通过 `slot="delete-icon"` 设置
+     */
+    deleteIcon?: string;
+    private readonly rippleRef;
+    private readonly hasSlotController;
+    constructor();
+    protected get rippleElement(): Ripple;
+    private onSelectedChange;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+    private onClick;
+    private onKeyDown;
+    /**
+     * 点击删除按钮
+     */
+    private onDelete;
+    private renderIcon;
+    private renderLabel;
+    private renderEndIcon;
+    private renderDeleteIcon;
+    private renderInner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-chip': Chip;
+    }
+}

package/components/chip/index.js

@@ -0,0 +1,243 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import cc from 'classcat';
+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 '@mdui/shared/icons/check.js';
+import '@mdui/shared/icons/clear.js';
+import { ButtonBase } from '../button/button-base.js';
+import '../icon.js';
+import { style } from './style.js';
+/**
+ * @summary 纸片组件
+ *
+ * ```html
+ * <mdui-chip>Chip</mdui-chip>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event invalid - 表单字段验证未通过时触发
+ * @event change - 选中状态变更时触发
+ * @event delete - 点击删除图标时触发
+ *
+ * @slot - 文本
+ * @slot icon - 左侧元素
+ * @slot end-icon - 右侧元素
+ * @slot selected-icon - 选中状态的左侧元素
+ * @slot delete-icon - 可删除时，右侧的删除元素
+ *
+ * @csspart button - 内部的 `button` 或 `a` 元素
+ * @csspart label - 文本
+ * @csspart icon - 左侧图标
+ * @csspart end-icon - 右侧图标
+ * @csspart selected-icon - 选中状态的左侧图标
+ * @csspart delete-icon - 可删除时，右侧的删除图标
+ * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let Chip = class Chip extends ButtonBase {
+    constructor() {
+        super();
+        /**
+         * 纸片形状。可选值为：
+         *
+         * * `assist`：用于显示和当前上下文相关的辅助操作。例如在点餐页面，提供分享，收藏等功能
+         * * `filter`：用于对内容进行筛选。例如在搜索结果页，对搜索结果进行过滤
+         * * `input`：用于表示用户输入的信息片段。例如 Gmail 中“收件人”字段中的联系人
+         * * `suggestion`：用于提供动态生成的推荐信息，以简化用户操作。例如在聊天应用中猜测用户可能想发送的信息，供用户选择
+         */
+        this.variant = 'assist';
+        /**
+         * 是否包含阴影
+         */
+        this.elevated = false;
+        /**
+         * 是否可选中
+         */
+        this.selectable = false;
+        /**
+         * 是否为选中状态
+         */
+        this.selected = false;
+        /**
+         * 是否可删除。为 `true` 时，在右侧会显示删除图标图标
+         */
+        this.deletable = false;
+        this.rippleRef = createRef();
+        this.hasSlotController = new HasSlotController(this, 'icon', 'selected-icon', 'end-icon');
+        this.onClick = this.onClick.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+    }
+    get rippleElement() {
+        return this.rippleRef.value;
+    }
+    onSelectedChange() {
+        emit(this, 'change');
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('click', this.onClick);
+        this.addEventListener('keydown', this.onKeyDown);
+    }
+    render() {
+        const hasIcon = this.icon || this.hasSlotController.test('icon');
+        const hasEndIcon = this.endIcon || this.hasSlotController.test('end-icon');
+        const hasSelectedIcon = this.selectedIcon ||
+            ['assist', 'filter'].includes(this.variant) ||
+            hasIcon ||
+            this.hasSlotController.test('selected-icon');
+        const className = cc({
+            button: true,
+            'has-icon': this.loading ||
+                (!this.selected && hasIcon) ||
+                (this.selected && hasSelectedIcon),
+            'has-end-icon': hasEndIcon,
+        });
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton()
+            ? this.renderButton({
+                className,
+                part: 'button',
+                content: this.renderInner(),
+            })
+            : this.disabled || this.loading
+                ? html `<span part="button" class="${className} _a">${this.renderInner()}</span>`
+                : this.renderAnchor({
+                    className,
+                    part: 'button',
+                    content: this.renderInner(),
+                })}`;
+    }
+    onClick() {
+        if (this.disabled || this.loading) {
+            return;
+        }
+        // 点击时，切换选中状态
+        if (this.selectable) {
+            this.selected = !this.selected;
+        }
+    }
+    onKeyDown(event) {
+        if (this.disabled || this.loading) {
+            return;
+        }
+        // 按下空格键时，切换选中状态
+        if (this.selectable && event.key === ' ') {
+            event.preventDefault();
+            this.selected = !this.selected;
+        }
+        // 按下 Delete 或 BackSpace 键时，触发 delete 事件
+        if (this.deletable && ['Delete', 'Backspace'].includes(event.key)) {
+            emit(this, 'delete');
+        }
+    }
+    /**
+     * 点击删除按钮
+     */
+    onDelete(event) {
+        event.stopPropagation();
+        emit(this, 'delete');
+    }
+    renderIcon() {
+        if (this.loading) {
+            return this.renderLoading();
+        }
+        const icon = () => {
+            return this.icon
+                ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+                : nothingTemplate;
+        };
+        const selectedIcon = () => {
+            if (this.selectedIcon) {
+                return html `<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>`;
+            }
+            if (this.variant === 'assist' || this.variant === 'filter') {
+                return html `<mdui-icon-check class="i"></mdui-icon-check>`;
+            }
+            return icon();
+        };
+        return !this.selected
+            ? html `<slot name="icon" part="icon" class="icon">${icon()}</slot>`
+            : html `<slot name="selected-icon" part="selected-icon" class="selected-icon">${selectedIcon()}</slot>`;
+    }
+    renderLabel() {
+        return html `<slot part="label" class="label"></slot>`;
+    }
+    renderEndIcon() {
+        return html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+            ? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot>`;
+    }
+    renderDeleteIcon() {
+        if (!this.deletable) {
+            return nothingTemplate;
+        }
+        return html `<slot name="delete-icon" part="delete-icon" class="delete-icon" @click="${this.onDelete}">${this.deleteIcon
+            ? html `<mdui-icon name="${this.deleteIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-clear class="i"></mdui-icon-clear>`}</slot>`;
+    }
+    renderInner() {
+        return [
+            this.renderIcon(),
+            this.renderLabel(),
+            this.renderEndIcon(),
+            this.renderDeleteIcon(),
+        ];
+    }
+};
+Chip.styles = [ButtonBase.styles, style];
+__decorate([
+    property({ reflect: true })
+], Chip.prototype, "variant", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Chip.prototype, "elevated", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Chip.prototype, "selectable", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Chip.prototype, "selected", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Chip.prototype, "deletable", void 0);
+__decorate([
+    property({ reflect: true })
+], Chip.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'selected-icon' })
+], Chip.prototype, "selectedIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'end-icon' })
+], Chip.prototype, "endIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'delete-icon' })
+], Chip.prototype, "deleteIcon", void 0);
+__decorate([
+    watch('selected', true)
+], Chip.prototype, "onSelectedChange", null);
+Chip = __decorate([
+    customElement('mdui-chip')
+], Chip);

package/components/chip/style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/components/chip/style.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-small);position:relative;display:inline-block;overflow:hidden;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);height:2rem;background-color:rgb(var(--mdui-color-surface));border:.0625rem solid rgb(var(--mdui-color-outline));color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.button{padding-right:.4375rem;padding-left:.4375rem}:host([variant=input]) .button{padding-right:.1875rem;padding-left:.1875rem}:host([selected]) .button{padding-right:.5rem;padding-left:.5rem}:host([selected][variant=input]) .button{padding-right:.25rem;padding-left:.25rem}:host([elevated]) .button{padding-right:.5rem;padding-left:.5rem}:host([variant=assist]){color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([elevated]){border-width:0;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));border-width:0;--mdui-comp-ripple-state-layer-color:var(
+      --mdui-color-on-secondary-container
+    )}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){border-color:rgba(var(--mdui-color-on-surface),12%);color:rgba(var(--mdui-color-on-surface),38%);box-shadow:var(--mdui-elevation-level0)}:host([disabled][elevated]),:host([disabled][selected]){background-color:rgba(var(--mdui-color-on-surface),12%)}:host([selected][hover]){box-shadow:var(--mdui-elevation-level1)}:host([elevated][hover]){color:rgb(var(--mdui-color-on-secondary-container));box-shadow:var(--mdui-elevation-level2)}:host([variant=filter][hover]),:host([variant=input][hover]),:host([variant=suggestion][hover]){color:rgb(var(--mdui-color-on-surface-variant))}:host([variant=filter][focus-visible]),:host([variant=input][focus-visible]),:host([variant=suggestion][focus-visible]){border-color:rgb(var(--mdui-color-on-surface-variant))}:host([dragged]),:host([dragged][hover]){box-shadow:var(--mdui-elevation-level4)}.button{overflow:visible}.label{display:inline-flex;padding-right:.5rem;padding-left:.5rem}.end-icon,.icon,.selected-icon{display:inline-flex;font-size:1.28571429em;color:rgb(var(--mdui-color-on-surface-variant))}:host([variant=assist]) .end-icon,:host([variant=assist]) .icon,:host([variant=assist]) .selected-icon{color:rgb(var(--mdui-color-primary))}:host([selected]) .end-icon,:host([selected]) .icon,:host([selected]) .selected-icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([disabled]) .selected-icon{opacity:.38;color:rgb(var(--mdui-color-on-surface))}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}:host([variant=input]) .has-icon .icon,:host([variant=input]) .has-icon .selected-icon,:host([variant=input]) .has-icon mdui-circular-progress{margin-left:.25rem}:host([variant=input]) .has-end-icon .end-icon{margin-right:.25rem}mdui-circular-progress{display:inline-flex;width:1.125rem;height:1.125rem}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}::slotted(mdui-avatar[slot=end-icon]),::slotted(mdui-avatar[slot=icon]),::slotted(mdui-avatar[slot=selected-icon]){width:1.5rem;height:1.5rem}:host([disabled]) ::slotted(mdui-avatar[slot=end-icon]),:host([disabled]) ::slotted(mdui-avatar[slot=icon]),:host([disabled]) ::slotted(mdui-avatar[slot=selected-icon]){opacity:.38}::slotted(mdui-avatar[slot=icon]),::slotted(mdui-avatar[slot=selected-icon]){margin-left:-.25rem;margin-right:-.125rem}::slotted(mdui-avatar[slot=end-icon]){margin-right:-.25rem;margin-left:-.125rem}.delete-icon{display:inline-flex;font-size:1.28571429em;transition:background-color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);border-radius:var(--mdui-shape-corner-full);margin-right:-.25rem;margin-left:-.25rem;padding:.25rem;color:rgb(var(--mdui-color-on-surface-variant))}.delete-icon:hover{background-color:rgba(var(--mdui-color-on-surface-variant),12%)}.has-end-icon .delete-icon{margin-left:.25rem}:host([variant=assiat]) .delete-icon{color:rgb(var(--mdui-color-primary))}:host([variant=input]) .delete-icon{margin-right:.0625rem}:host([disabled]) .delete-icon{color:rgba(var(--mdui-color-on-surface),38%)}.delete-icon .i,::slotted([slot=delete-icon]){font-size:inherit}::slotted(mdui-avatar[slot=delete-icon]){width:1.125rem;height:1.125rem}`;

package/components/chip.d.ts

@@ -0,0 +1 @@
+export * from './chip/index.js';

package/components/chip.js

@@ -0,0 +1 @@
+export * from './chip/index.js';

package/components/circular-progress/index.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary 圆形进度指示器组件
+ *
+ * ```html
+ * <mdui-circular-progress></mdui-circular-progress>
+ * ```
+ */
+export declare class CircularProgress extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 进度指示器的最大值，默认为 1
+     */
+    max: number;
+    /**
+     * 进度指示器的当前值。若未指定该值，则为不确定状态
+     */
+    value?: number;
+    protected render(): TemplateResult;
+    private renderDeterminate;
+    private renderInDeterminate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-circular-progress': CircularProgress;
+    }
+}