mdui 2.0.5 → 2.1.0

package/components/select/index.js

@@ -46,7 +46,25 @@ import { style } from './style.js';
  * @slot clear-icon - 清空按钮中的图标
  * @slot helper - 底部的帮助文本
  *
+ * @csspart chips - 多选时，放置选中值对应的 chip 的容器
+ * @csspart chip - 多选时，每一个选中的值对应的 chip
+ * @csspart chip__button - chip 内部的 `<button>` 元素
+ * @csspart chip__label - chip 内部的文本
+ * @csspart chip__delete-icon - chip 内部的删除图标
  * @csspart text-field - 文本框，即 [`<mdui-text-field>`](/docs/2/components/text-field) 元素
+ * @csspart text-field__container - text-field 内部的文本框容器
+ * @csspart text-field__icon - text-field 内部的左侧图标
+ * @csspart text-field__end-icon - text-field 内部的右侧图标
+ * @csspart text-field__error-icon - text-field 内部的验证失败状态的右侧图标
+ * @csspart text-field__prefix - text-field 内部的左侧文本
+ * @csspart text-field__suffix - text-field 内部的右侧文本
+ * @csspart text-field__label - text-field 内部的标签文本
+ * @csspart text-field__input - text-field 内部的 `<input>` 元素
+ * @csspart text-field__clear-button - text-field 内部的清空按钮
+ * @csspart text-field__clear-icon - text-field 内部的清空按钮中的图标
+ * @csspart text-field__supporting - text-field 内部的底部辅助信息容器，包括 helper 和 error
+ * @csspart text-field__helper - text-field 内部的底部帮助文本
+ * @csspart text-field__error - text-field 内部的底部错误描述文本
  * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/docs/2/components/menu) 元素
  */
 let Select = class Select extends FocusableMixin(MduiElement) {
@@ -204,75 +222,32 @@ let Select = class Select extends FocusableMixin(MduiElement) {
     render() {
         const hasSelection = this.multiple ? !!this.value.length : !!this.value;
         return html `${this.multiple
-            ? html `<select
-            ${ref(this.hiddenInputRef)}
-            class="hidden-input"
-            name=${ifDefined(this.name)}
-            value=${ifDefined(this.value)}
-            .required=${this.required}
-            .disabled=${this.disabled}
-            multiple
-            tabindex="-1"
-          >
-            ${map(this.value, (value) => html `<option selected value=${value}></option>`)}
-          </select>`
-            : html `<input
-            ${ref(this.hiddenInputRef)}
-            type="radio"
-            class="hidden-input"
-            name=${ifDefined(this.name)}
-            value=${ifDefined(this.value)}
-            .required=${this.required}
-            .disabled=${this.disabled}
-            .checked=${hasSelection}
-            tabindex="-1"
-          />`}
-      <mdui-dropdown
-        .stayOpenOnClick=${this.multiple}
-        .disabled=${this.readonly || this.disabled}
-        .placement=${this.placement === 'top'
+            ? html `<select ${ref(this.hiddenInputRef)} class="hidden-input" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .required="${this.required}" .disabled="${this.disabled}" multiple="multiple" tabindex="-1">${map(this.value, (value) => html `<option selected="selected" value="${value}"></option>`)}</select>`
+            : html `<input ${ref(this.hiddenInputRef)} type="radio" class="hidden-input" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .required="${this.required}" .disabled="${this.disabled}" .checked="${hasSelection}" tabindex="-1">`}<mdui-dropdown .stayOpenOnClick="${this.multiple}" .disabled="${this.readonly || this.disabled}" .placement="${this.placement === 'top'
             ? 'top-start'
             : this.placement === 'bottom'
                 ? 'bottom-start'
-                : 'auto'}
-        @open=${this.onDropdownOpen}
-        @close=${this.onDropdownClose}
-      >
-        <mdui-text-field
-          ${ref(this.textFieldRef)}
-          slot="trigger"
-          part="text-field"
-          class="text-field"
-          readonly
-          .readonlyButClearable=${true}
-          .variant=${this.variant}
-          .name=${this.name}
-          .value=${this.multiple
+                : 'auto'}" @open="${this.onDropdownOpen}" @close="${this.onDropdownClose}"><mdui-text-field ${ref(this.textFieldRef)} slot="trigger" part="text-field" class="text-field" exportparts="${[
+            'container',
+            'icon',
+            'end-icon',
+            'error-icon',
+            'prefix',
+            'suffix',
+            'label',
+            'input',
+            'clear-button',
+            'clear-icon',
+            'supporting',
+            'helper',
+            'error',
+        ]
+            .map((v) => `${v}:text-field__${v}`)
+            .join(',')}" readonly="readonly" .readonlyButClearable="${true}" .variant="${this.variant}" .name="${this.name}" .value="${this.multiple
             ? this.value.length
                 ? ' '
                 : ''
-            : this.getMenuItemLabelByValue(this.value)}
-          .label=${this.label}
-          .placeholder=${this.placeholder}
-          .helper=${this.helper}
-          .error=${this.hiddenInputRef.value?.validationMessage}
-          .clearable=${this.clearable}
-          .clearIcon=${this.clearIcon}
-          .endAligned=${this.endAligned}
-          .prefix=${this.prefix}
-          .suffix=${this.suffix}
-          .icon=${this.icon}
-          .endIcon=${this.endIcon}
-          .errorIcon=${this.errorIcon}
-          .form=${this.form}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          .invalidStyle=${this.invalid}
-          @clear=${this.onClear}
-          @change=${(e) => e.stopPropagation()}
-          @keydown=${this.onTextFieldKeyDown}
-        >
-          ${map([
+            : this.getMenuItemLabelByValue(this.value)}" .label="${this.label}" .placeholder="${this.placeholder}" .helper="${this.helper}" .error="${this.hiddenInputRef.value?.validationMessage}" .clearable="${this.clearable}" .clearIcon="${this.clearIcon}" .endAligned="${this.endAligned}" .prefix="${this.prefix}" .suffix="${this.suffix}" .icon="${this.icon}" .endIcon="${this.endIcon}" .errorIcon="${this.errorIcon}" .form="${this.form}" .disabled="${this.disabled}" .required="${this.required}" .invalidStyle="${this.invalid}" @clear="${this.onClear}" @change="${(e) => e.stopPropagation()}" @keydown="${this.onTextFieldKeyDown}">${map([
             'icon',
             'end-icon',
             'error-icon',
@@ -282,30 +257,10 @@ let Select = class Select extends FocusableMixin(MduiElement) {
             'clear-icon',
             'helper',
         ], (slotName) => this.hasSlotController.test(slotName)
-            ? html `<slot name=${slotName} slot=${slotName}></slot>`
-            : nothing)}
-          ${when(this.multiple && this.value.length, () => html `<div slot="input" class="chips">
-                ${map(this.value, (valueItem) => html `<mdui-chip
-                      class="chip"
-                      variant="input"
-                      deletable
-                      tabindex="-1"
-                      @delete=${() => this.onDeleteOneValue(valueItem)}
-                    >
-                      ${this.getMenuItemLabelByValue(valueItem)}
-                    </mdui-chip>`)}
-              </div>`)}
-        </mdui-text-field>
-        <mdui-menu
-          ${ref(this.menuRef)}
-          part="menu"
-          .selects=${this.multiple ? 'multiple' : 'single'}
-          .value=${this.value}
-          @change=${this.onValueChange}
-        >
-          <slot></slot>
-        </mdui-menu>
-      </mdui-dropdown>`;
+            ? html `<slot name="${slotName}" slot="${slotName}"></slot>`
+            : nothing)} ${when(this.multiple && this.value.length, () => html `<div slot="input" class="chips" part="chips">${map(this.value, (valueItem) => html `<mdui-chip class="chip" part="chip" exportparts="${['button', 'label', 'delete-icon']
+            .map((v) => `${v}:chip__${v}`)
+            .join(',')}" variant="input" deletable tabindex="-1" @delete="${() => this.onDeleteOneValue(valueItem)}">${this.getMenuItemLabelByValue(valueItem)}</mdui-chip>`)}</div>`)}</mdui-text-field><mdui-menu ${ref(this.menuRef)} part="menu" .selects="${this.multiple ? 'multiple' : 'single'}" .value="${this.value}" @change="${this.onValueChange}"><slot></slot></mdui-menu></mdui-dropdown>`;
     }
     getMenuItemLabelByValue(valueItem) {
         if (!this.menuItems.length) {

package/components/select/style.js

@@ -1,28 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    display: inline-block;
-    width: 100%;
-  }
-  .hidden-input {
-    display: none;
-  }
-  .text-field {
-    cursor: pointer;
-  }
-  .chips {
-    display: flex;
-    flex-wrap: wrap;
-    margin: -0.5rem -0.25rem;
-    min-height: 2.5rem;
-  }
-  :host([variant='filled'][label]) .chips {
-    margin: 0rem -0.25rem -1rem -0.25rem;
-  }
-  .chip {
-    margin: 0.25rem;
-  }
-  mdui-menu {
-    max-width: none;
-  }
-`;
+export const style = css `:host{display:inline-block;width:100%}.hidden-input{display:none}.text-field{cursor:pointer}.chips{display:flex;flex-wrap:wrap;margin:-.5rem -.25rem;min-height:2.5rem}:host([variant=filled][label]) .chips{margin:0 -.25rem -1rem -.25rem}.chip{margin:.25rem}mdui-menu{max-width:none}`;

package/components/slider/index.js

@@ -90,41 +90,10 @@ let Slider = class Slider extends SliderBase {
      * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
      */
     render() {
-        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({
+        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>`;
+        })}"></div>`))}</label>`;
     }
     updateStyle() {
         const percent = ((this.value - this.min) / (this.max - this.min)) * 100;

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

@@ -1,174 +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: 0rem 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: 0rem -1.25rem;
-    padding: 0rem 0.75rem;
-  }
-  :host([disabled]) input[type='range'] {
-    cursor: not-allowed;
-  }
-  .track-inactive,
-  .track-active {
-    position: absolute;
-    top: 50%;
-    height: 0.25rem;
-    margin-top: -0.125rem;
-  }
-  .track-inactive {
-    left: -0.125rem;
-    right: -0.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), 0.12);
-  }
-  :host([disabled]) .track-inactive {
-    background-color: rgba(var(--mdui-color-on-surface), 0.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), 0.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::before,
-  .handle .elevation {
-    position: absolute;
-    display: block;
-    content: ' ';
-    left: 0.625rem;
-    top: 0.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), 0.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: 0.375rem 0.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: 0.875rem;
-    height: 0.875rem;
-    bottom: -0.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: 0.125rem;
-    height: 0.125rem;
-    margin-top: -0.0625rem;
-    border-radius: var(--mdui-shape-corner-full);
-    background-color: rgba(var(--mdui-color-on-surface-variant), 0.38);
-  }
-  .invalid .tickmark {
-    background-color: rgba(var(--mdui-color-error), 0.38);
-  }
-  .tickmark.active {
-    background-color: rgba(var(--mdui-color-on-primary), 0.38);
-  }
-  .invalid .tickmark.active {
-    background-color: rgba(var(--mdui-color-on-error), 0.38);
-  }
-  :host([disabled]) .tickmark {
-    background-color: rgba(var(--mdui-color-on-surface), 0.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.js

@@ -153,12 +153,7 @@ export class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
      * 渲染浮动标签
      */
     renderLabel(value) {
-        return when(!this.nolabel, () => html `<div
-          part="label"
-          class="label ${classMap({ 'label-visible': this.labelVisible })}"
-        >
-          ${this.labelFormatter(value)}
-        </div>`);
+        return when(!this.nolabel, () => html `<div part="label" class="label ${classMap({ 'label-visible': this.labelVisible })}">${this.labelFormatter(value)}</div>`);
     }
     onChange() {
         // @ts-ignore

package/components/slider/style.js

@@ -1,8 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  .track-active {
-    left: -0.125rem;
-    border-radius: var(--mdui-shape-corner-full) 0 0
-      var(--mdui-shape-corner-full);
-  }
-`;
+export const style = css `.track-active{left:-.125rem;border-radius:var(--mdui-shape-corner-full) 0 0 var(--mdui-shape-corner-full)}`;

package/components/snackbar/index.js

@@ -204,38 +204,11 @@ let Snackbar = class Snackbar extends MduiElement {
         document.removeEventListener('pointerdown', this.onDocumentClick);
     }
     render() {
-        return html `<slot part="message" class="message"></slot>
-      <div class="action-group">
-        <slot
-          name="action"
-          part="action"
-          class="action"
-          @click=${this.onActionClick}
-        >
-          ${this.action
-            ? html `<mdui-button variant="text" loading=${this.actionLoading}>
-                ${this.action}
-              </mdui-button>`
-            : nothingTemplate}
-        </slot>
-        ${when(this.closeable, () => html `<slot
-              name="close-button"
-              part="close-button"
-              class="close-button"
-              @click=${this.onCloseClick}
-            >
-              <mdui-button-icon>
-                <slot name="close-icon" part="close-icon">
-                  ${this.closeIcon
-            ? html `<mdui-icon
-                        name=${this.closeIcon}
-                        class="i"
-                      ></mdui-icon>`
-            : html `<mdui-icon-clear class="i"></mdui-icon-clear>`}
-                </slot>
-              </mdui-button-icon>
-            </slot>`)}
-      </div>`;
+        return html `<slot part="message" class="message"></slot><div class="action-group"><slot name="action" part="action" class="action" @click="${this.onActionClick}">${this.action
+            ? html `<mdui-button variant="text" loading="${this.actionLoading}">${this.action}</mdui-button>`
+            : nothingTemplate}</slot>${when(this.closeable, () => html `<slot name="close-button" part="close-button" class="close-button" @click="${this.onCloseClick}"><mdui-button-icon><slot name="close-icon" part="close-icon">${this.closeIcon
+            ? html `<mdui-icon name="${this.closeIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-clear class="i"></mdui-icon-clear>`}</slot></mdui-button-icon></slot>`)}</div>`;
     }
     /**
      * 在 document 上点击时，根据条件判断是否要关闭 snackbar

package/components/snackbar/style.js

@@ -1,101 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-extra-small);
-    --z-index: 2400;
-    position: fixed;
-    z-index: var(--z-index);
-    display: none;
-    align-items: center;
-    flex-wrap: wrap;
-    border-radius: var(--shape-corner);
-    min-width: 20rem;
-    max-width: 36rem;
-    padding: 0.25rem 0rem;
-    box-shadow: var(--mdui-elevation-level3);
-    background-color: rgb(var(--mdui-color-inverse-surface));
-    color: rgb(var(--mdui-color-inverse-on-surface));
-    font-size: var(--mdui-typescale-body-medium-size);
-    font-weight: var(--mdui-typescale-body-medium-weight);
-    letter-spacing: var(--mdui-typescale-body-medium-tracking);
-    line-height: var(--mdui-typescale-body-medium-line-height);
-  }
-  :host([placement^='top']) {
-    transform-origin: top;
-    top: 1rem;
-  }
-  :host([placement^='bottom']) {
-    transform-origin: bottom;
-    bottom: 1rem;
-  }
-  :host([placement='top-start']),
-  :host([placement='bottom-start']) {
-    left: 1rem;
-  }
-  :host([placement='top-end']),
-  :host([placement='bottom-end']) {
-    right: 1rem;
-  }
-  .message {
-    display: block;
-    margin: 0.625rem 1rem;
-  }
-  :host([message-line='1']) .message {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  :host([message-line='2']) .message {
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  .action-group {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    padding-right: 0.5rem;
-  }
-  .action,
-  .close-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .action {
-    color: rgb(var(--mdui-color-inverse-primary));
-    font-size: var(--mdui-typescale-label-large-size);
-    font-weight: var(--mdui-typescale-label-large-weight);
-    letter-spacing: var(--mdui-typescale-label-large-tracking);
-  }
-  .action mdui-button,
-  ::slotted(mdui-button[slot='action'][variant='text']),
-  ::slotted(mdui-button[slot='action'][variant='outlined']) {
-    color: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    letter-spacing: inherit;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-inverse-primary);
-  }
-  .action mdui-button::part(button) {
-    padding: 0rem 0.5rem;
-  }
-  .close-button {
-    margin: 0rem -0.25rem 0rem 0.25rem;
-    font-size: 1.5rem;
-    color: rgb(var(--mdui-color-inverse-on-surface));
-  }
-  .close-button mdui-button-icon,
-  ::slotted(mdui-button-icon[slot='close-button'][variant='standard']),
-  ::slotted(mdui-button-icon[slot='close-button'][variant='outlined']) {
-    font-size: inherit;
-    color: inherit;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-inverse-on-surface);
-  }
-  .close-button .i,
-  ::slotted([slot='close-icon']) {
-    font-size: inherit;
-  }
-`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-extra-small);--z-index:2400;position:fixed;z-index:var(--z-index);display:none;align-items:center;flex-wrap:wrap;border-radius:var(--shape-corner);min-width:20rem;max-width:36rem;padding:.25rem 0;box-shadow:var(--mdui-elevation-level3);background-color:rgb(var(--mdui-color-inverse-surface));color:rgb(var(--mdui-color-inverse-on-surface));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([placement^=top]){transform-origin:top;top:1rem}:host([placement^=bottom]){transform-origin:bottom;bottom:1rem}:host([placement=bottom-start]),:host([placement=top-start]){left:1rem}:host([placement=bottom-end]),:host([placement=top-end]){right:1rem}.message{display:block;margin:.625rem 1rem}:host([message-line='1']) .message{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([message-line='2']) .message{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}.action-group{display:flex;align-items:center;margin-left:auto;padding-right:.5rem}.action,.close-button{display:inline-flex;align-items:center;justify-content:center}.action{color:rgb(var(--mdui-color-inverse-primary));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking)}.action mdui-button,::slotted(mdui-button[slot=action][variant=outlined]),::slotted(mdui-button[slot=action][variant=text]){color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-primary)}.action mdui-button::part(button){padding:0 .5rem}.close-button{margin:0 -.25rem 0 .25rem;font-size:1.5rem;color:rgb(var(--mdui-color-inverse-on-surface))}.close-button mdui-button-icon,::slotted(mdui-button-icon[slot=close-button][variant=outlined]),::slotted(mdui-button-icon[slot=close-button][variant=standard]){font-size:inherit;color:inherit;--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-on-surface)}.close-button .i,::slotted([slot=close-icon]){font-size:inherit}`;

package/components/switch/index.js

@@ -167,50 +167,16 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
         this.invalid = !this.inputRef.value.checkValidity();
     }
     render() {
-        return html `<label
-      class=${classMap({
+        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>`
+        })}"><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>`
             : this.checkedIcon === ''
                 ? nothingTemplate
-                : html `<mdui-icon-check class="i"></mdui-icon-check>`}
-          </slot>
-          <slot
-            name="unchecked-icon"
-            part="unchecked-icon"
-            class="unchecked-icon"
-          >
-            ${this.uncheckedIcon
-            ? html `<mdui-icon
-                  name=${this.uncheckedIcon}
-                  class="i"
-                ></mdui-icon>`
-            : nothingTemplate}
-          </slot>
-        </div>
-      </div>
-    </label>`;
+                : html `<mdui-icon-check class="i"></mdui-icon-check>`}</slot><slot name="unchecked-icon" part="unchecked-icon" class="unchecked-icon">${this.uncheckedIcon
+            ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot></div></div></label>`;
     }
     /**
      * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom