mdui 2.0.4 → 2.0.5

package/components/select/index.js

@@ -204,16 +204,75 @@ 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="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'
+            ? 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'
             ? '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="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"
+          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',
@@ -223,8 +282,30 @@ 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">
+                ${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>`;
     }
     getMenuItemLabelByValue(valueItem) {
         if (!this.menuItems.length) {

package/components/select/style.js

@@ -1,2 +1,28 @@
 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:-.5rem -.25rem;min-height:2.5rem}:host([variant=filled][label]) .chips{margin:0 -.25rem -1rem -.25rem}.chip{margin:.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: -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;
+  }
+`;

package/components/slider/index.js

@@ -90,10 +90,41 @@ 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,2 +1,174 @@
 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;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)}`;
+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);
+  }
+`;

package/components/slider/slider-base.js

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

package/components/snackbar/index.js

@@ -204,11 +204,38 @@ 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,2 +1,101 @@
 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:.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}`;
+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;
+  }
+`;

package/components/switch/index.js

@@ -167,16 +167,50 @@ 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