mdui 2.0.5 → 2.0.6

package/components/text-field/index.js

@@ -384,25 +384,9 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
             'is-firefox': navigator.userAgent.includes('Firefox'),
             ...invalidClassNameObj,
         });
-        return html `<div part="container" class=${className}>
-        ${this.renderPrefix()}
-        <div class="input-container">
-          ${this.renderLabel()}
-          ${this.isTextarea
+        return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${this.isTextarea
             ? this.renderTextArea(hasInputSlot)
-            : this.renderInput(hasInputSlot)}
-          ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}
-        </div>
-        ${this.renderClearButton()}${this.renderTogglePasswordButton()}
-        ${this.renderSuffix(hasErrorIcon)}
-      </div>
-      ${when(hasError || hasHelper || hasCounter, () => html `<div
-            part="supporting"
-            class=${classMap({ supporting: true, ...invalidClassNameObj })}
-          >
-            ${this.renderHelper(hasError, hasHelper)}
-            ${this.renderCounter(hasCounter)}
-          </div>`)}`;
+            : this.renderInput(hasInputSlot)} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderClearButton()}${this.renderTogglePasswordButton()} ${this.renderSuffix(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
     }
     onChange() {
         this.value = this.inputRef.value.value;
@@ -464,168 +448,62 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
     }
     renderLabel() {
         return this.label
-            ? html `<label
-          part="label"
-          class="label"
-          ${animate({
+            ? html `<label part="label" class="label" ${animate({
                 keyframeOptions: {
                     duration: getDuration(this, 'short4'),
                     easing: getEasing(this, 'standard'),
                 },
-            })}
-        >
-          ${this.label}
-        </label>`
+            })}>${this.label}</label>`
             : nothingTemplate;
     }
     renderPrefix() {
-        return html `<slot name="icon" part="icon" class="icon">
-        ${this.icon
-            ? html `<mdui-icon name=${this.icon} class="i"></mdui-icon>`
-            : nothingTemplate}
-      </slot>
-      <slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`;
+        return html `<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot><slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`;
     }
     renderSuffix(hasErrorIcon) {
-        return html `<slot name="suffix" part="suffix" class="suffix">
-        ${this.suffix}
-      </slot>
-      ${hasErrorIcon
-            ? html `<slot name="error-icon" part="error-icon" class="right-icon">
-            ${this.errorIcon
-                ? html `<mdui-icon name=${this.errorIcon} class="i"></mdui-icon>`
-                : html `<mdui-icon-error class="i"></mdui-icon-error>`}
-          </slot>`
-            : html `<slot
-            name="end-icon"
-            part="end-icon"
-            class="end-icon right-icon"
-          >
-            ${this.endIcon
-                ? html `<mdui-icon name=${this.endIcon} class="i"></mdui-icon>`
-                : nothingTemplate}
-          </slot>`}`;
+        return html `<slot name="suffix" part="suffix" class="suffix">${this.suffix}</slot>${hasErrorIcon
+            ? html `<slot name="error-icon" part="error-icon" class="right-icon">${this.errorIcon
+                ? html `<mdui-icon name="${this.errorIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-error class="i"></mdui-icon-error>`}</slot>`
+            : html `<slot name="end-icon" part="end-icon" class="end-icon right-icon">${this.endIcon
+                ? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
+                : nothingTemplate}</slot>`}`;
     }
     renderClearButton() {
         const hasClearButton = this.clearable &&
             !this.disabled &&
             (!this.readonly || this.readonlyButClearable) &&
             (typeof this.value === 'number' || this.value.length > 0);
-        return when(hasClearButton, () => html `<slot
-          name="clear-button"
-          part="clear-button"
-          class="right-icon"
-          @click=${this.onClear}
-        >
-          <mdui-button-icon tabindex="-1">
-            <slot name="clear-icon" part="clear-icon">
-              ${this.clearIcon
-            ? html `<mdui-icon name=${this.clearIcon} class="i"></mdui-icon>`
-            : html `<mdui-icon-cancel--outlined
-                    class="i"
-                  ></mdui-icon-cancel--outlined>`}
-            </slot>
-          </mdui-button-icon>
-        </slot>`);
+        return when(hasClearButton, () => html `<slot name="clear-button" part="clear-button" class="right-icon" @click="${this.onClear}"><mdui-button-icon tabindex="-1"><slot name="clear-icon" part="clear-icon">${this.clearIcon
+            ? html `<mdui-icon name="${this.clearIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-cancel--outlined class="i"></mdui-icon-cancel--outlined>`}</slot></mdui-button-icon></slot>`);
     }
     renderTogglePasswordButton() {
         const hasTogglePasswordButton = this.type === 'password' && this.togglePassword && !this.disabled;
-        return when(hasTogglePasswordButton, () => html `<slot
-          name="toggle-password-button"
-          part="toggle-password-button"
-          class="right-icon"
-          @click=${this.onTogglePassword}
-        >
-          <mdui-button-icon tabindex="-1">
-            ${this.isPasswordVisible
-            ? html `<slot name="show-password-icon" part="show-password-icon">
-                  ${this.showPasswordIcon
-                ? html `<mdui-icon
-                        name=${this.showPasswordIcon}
-                        class="i"
-                      ></mdui-icon>`
-                : html `<mdui-icon-visibility-off
-                        class="i"
-                      ></mdui-icon-visibility-off>`}
-                </slot>`
-            : html `<slot name="hide-password-icon" part="hide-password-icon">
-                  ${this.hidePasswordIcon
-                ? html `<mdui-icon
-                        name=${this.hidePasswordIcon}
-                        class="i"
-                      ></mdui-icon>`
-                : html `<mdui-icon-visibility
-                        class="i"
-                      ></mdui-icon-visibility>`}
-                </slot>`}
-          </mdui-button-icon>
-        </slot>`);
+        return when(hasTogglePasswordButton, () => html `<slot name="toggle-password-button" part="toggle-password-button" class="right-icon" @click="${this.onTogglePassword}"><mdui-button-icon tabindex="-1">${this.isPasswordVisible
+            ? html `<slot name="show-password-icon" part="show-password-icon">${this.showPasswordIcon
+                ? html `<mdui-icon name="${this.showPasswordIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-visibility-off class="i"></mdui-icon-visibility-off>`}</slot>`
+            : html `<slot name="hide-password-icon" part="hide-password-icon">${this.hidePasswordIcon
+                ? html `<mdui-icon name="${this.hidePasswordIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-visibility class="i"></mdui-icon-visibility>`}</slot>`}</mdui-button-icon></slot>`);
     }
     renderInput(hasInputSlot) {
-        return html `<input
-      ${ref(this.inputRef)}
-      part="input"
-      class="input ${classMap({ 'hide-input': hasInputSlot })}"
-      type=${this.type === 'password' && this.isPasswordVisible
+        return html `<input ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" type="${this.type === 'password' && this.isPasswordVisible
             ? 'text'
-            : this.type}
-      name=${ifDefined(this.name)}
-      .value=${live(this.value)}
-      placeholder=${ifDefined(
+            : this.type}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(
         // @ts-ignore
         !this.label || this.isFocusedStyle || this.hasValue
             ? this.placeholder
-            : undefined)}
-      ?readonly=${this.readonly}
-      ?disabled=${this.disabled}
-      ?required=${this.required}
-      minlength=${ifDefined(this.minlength)}
-      maxlength=${ifDefined(this.maxlength)}
-      min=${ifDefined(this.min)}
-      max=${ifDefined(this.max)}
-      step=${ifDefined(this.step)}
-      autocapitalize=${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}
-      autocomplete=${ifDefined(this.type === 'password' ? 'off' : this.autocomplete)}
-      autocorrect=${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}
-      spellcheck=${ifDefined(this.spellcheck)}
-      pattern=${ifDefined(this.pattern)}
-      enterkeyhint=${ifDefined(this.enterkeyhint)}
-      inputmode=${ifDefined(this.inputmode)}
-      @change=${this.onChange}
-      @input=${this.onInput}
-      @invalid=${this.onInvalid}
-      @keydown=${this.onKeyDown}
-    />`;
+            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${ifDefined(this.type === 'password' ? 'off' : this.autocomplete)}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
     }
     renderTextArea(hasInputSlot) {
-        return html `<textarea
-      ${ref(this.inputRef)}
-      part="input"
-      class="input ${classMap({ 'hide-input': hasInputSlot })}"
-      name=${ifDefined(this.name)}
-      .value=${live(this.value)}
-      placeholder=${ifDefined(
+        return html `<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(
         // @ts-ignore
         !this.label || this.isFocusedStyle || this.hasValue
             ? this.placeholder
-            : undefined)}
-      ?readonly=${this.readonly}
-      ?disabled=${this.disabled}
-      ?required=${this.required}
-      minlength=${ifDefined(this.minlength)}
-      maxlength=${ifDefined(this.maxlength)}
-      rows=${this.rows ?? 1}
-      autocapitalize=${ifDefined(this.autocapitalize)}
-      autocorrect=${ifDefined(this.autocorrect)}
-      spellcheck=${ifDefined(this.spellcheck)}
-      enterkeyhint=${ifDefined(this.enterkeyhint)}
-      inputmode=${ifDefined(this.inputmode)}
-      @change=${this.onChange}
-      @input=${this.onInput}
-      @invalid=${this.onInvalid}
-      @keydown=${this.onKeyDown}
-      @keyup=${this.onTextAreaKeyUp}
-    ></textarea>`;
+            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
     }
     /**
      * @param hasError 是否包含错误提示
@@ -633,21 +511,15 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
      */
     renderHelper(hasError, hasHelper) {
         return hasError
-            ? html `<div part="error" class="error">
-          ${this.error || this.inputRef.value.validationMessage}
-        </div>`
+            ? html `<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>`
             : hasHelper
-                ? html `<slot name="helper" part="helper" class="helper">
-          ${this.helper}
-        </slot>`
+                ? html `<slot name="helper" part="helper" class="helper">${this.helper}</slot>`
                 : // 右边有 counter，需要占位
                     html `<span></span>`;
     }
     renderCounter(hasCounter) {
         return hasCounter
-            ? html `<div part="counter" class="counter">
-          ${this.value.length}/${this.maxlength}
-        </div>`
+            ? html `<div part="counter" class="counter">${this.value.length}/${this.maxlength}</div>`
             : nothingTemplate;
     }
 };

package/components/text-field/style.js

@@ -1,363 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    display: inline-block;
-    width: 100%;
-  }
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  :host([type='hidden']) {
-    display: none;
-  }
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    transition: box-shadow var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-standard);
-    padding: 0rem 1rem;
-  }
-  .container.has-icon {
-    padding-left: 0.75rem;
-  }
-  .container.has-end-icon,
-  .container.has-error-icon {
-    padding-right: 0.75rem;
-  }
-  :host([variant='filled']) .container {
-    box-shadow: inset 0 -0.0625rem 0 0 rgb(var(--mdui-color-on-surface-variant));
-    background-color: rgb(var(--mdui-color-surface-container-highest));
-    border-radius: var(--mdui-shape-corner-extra-small)
-      var(--mdui-shape-corner-extra-small) 0 0;
-  }
-  :host([variant='filled']) .container.invalid,
-  :host([variant='filled']) .container.invalid-style {
-    box-shadow: inset 0 -0.0625rem 0 0 rgb(var(--mdui-color-error));
-  }
-  :host([variant='filled']:hover) .container {
-    box-shadow: inset 0 -0.0625rem 0 0 rgb(var(--mdui-color-on-surface));
-  }
-  :host([variant='filled']:hover) .container.invalid,
-  :host([variant='filled']:hover) .container.invalid-style {
-    box-shadow: inset 0 -0.0625rem 0 0 rgb(var(--mdui-color-on-error-container));
-  }
-  :host([variant='filled'][focused]) .container,
-  :host([variant='filled'][focused-style]) .container {
-    box-shadow: inset 0 -0.125rem 0 0 rgb(var(--mdui-color-primary));
-  }
-  :host([variant='filled'][focused]) .container.invalid,
-  :host([variant='filled'][focused-style]) .container.invalid,
-  :host([variant='filled'][focused]) .container.invalid-style,
-  :host([variant='filled'][focused-style]) .container.invalid-style {
-    box-shadow: inset 0 -0.125rem 0 0 rgb(var(--mdui-color-error));
-  }
-  :host([variant='filled'][disabled]) .container {
-    box-shadow: inset 0 -0.0625rem 0 0 rgba(var(--mdui-color-on-surface), 38%);
-    background-color: rgba(var(--mdui-color-on-surface), 4%);
-  }
-  :host([variant='outlined']) .container {
-    box-shadow: inset 0 0 0 0.0625rem rgb(var(--mdui-color-outline));
-    border-radius: var(--mdui-shape-corner-extra-small);
-  }
-  :host([variant='outlined']) .container.invalid,
-  :host([variant='outlined']) .container.invalid-style {
-    box-shadow: inset 0 0 0 0.0625rem rgb(var(--mdui-color-error));
-  }
-  :host([variant='outlined']:hover) .container {
-    box-shadow: inset 0 0 0 0.0625rem rgb(var(--mdui-color-on-surface));
-  }
-  :host([variant='outlined']:hover) .container.invalid,
-  :host([variant='outlined']:hover) .container.invalid-style {
-    box-shadow: inset 0 0 0 0.0625rem rgb(var(--mdui-color-on-error-container));
-  }
-  :host([variant='outlined'][focused]) .container,
-  :host([variant='outlined'][focused-style]) .container {
-    box-shadow: inset 0 0 0 0.125rem rgb(var(--mdui-color-primary));
-  }
-  :host([variant='outlined'][focused]) .container.invalid,
-  :host([variant='outlined'][focused-style]) .container.invalid,
-  :host([variant='outlined'][focused]) .container.invalid-style,
-  :host([variant='outlined'][focused-style]) .container.invalid-style {
-    box-shadow: inset 0 0 0 0.125rem rgb(var(--mdui-color-error));
-  }
-  :host([variant='outlined'][disabled]) .container {
-    box-shadow: inset 0 0 0 0.125rem rgba(var(--mdui-color-on-surface), 12%);
-  }
-  .icon,
-  .right-icon,
-  .prefix,
-  .suffix {
-    display: flex;
-    -webkit-user-select: none;
-    user-select: none;
-    color: rgb(var(--mdui-color-on-surface-variant));
-  }
-  :host([disabled]) .icon,
-  :host([disabled]) .right-icon,
-  :host([disabled]) .prefix,
-  :host([disabled]) .suffix {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-  }
-  .invalid .right-icon,
-  .invalid .suffix,
-  .invalid-style .right-icon,
-  .invalid-style .suffix {
-    color: rgb(var(--mdui-color-error));
-  }
-  :host(:hover) .invalid .right-icon,
-  :host(:hover) .invalid .suffix,
-  :host(:hover) .invalid-style .right-icon,
-  :host(:hover) .invalid-style .suffix {
-    color: rgb(var(--mdui-color-on-error-container));
-  }
-  :host([focused]) .invalid .right-icon,
-  :host([focused]) .invalid .suffix,
-  :host([focused-style]) .invalid .right-icon,
-  :host([focused-style]) .invalid .suffix,
-  :host([focused]) .invalid-style .right-icon,
-  :host([focused]) .invalid-style .suffix,
-  :host([focused-style]) .invalid-style .right-icon,
-  :host([focused-style]) .invalid-style .suffix {
-    color: rgb(var(--mdui-color-error));
-  }
-  .icon,
-  .right-icon {
-    font-size: 1.5rem;
-  }
-  .icon mdui-button-icon,
-  .right-icon mdui-button-icon,
-  ::slotted(mdui-button-icon[slot]) {
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
-  }
-  .icon .i,
-  .right-icon .i,
-  ::slotted([slot$='icon']) {
-    font-size: inherit;
-  }
-  .has-icon .icon {
-    margin-right: 1rem;
-  }
-  .right-icon:not(.end-icon),
-  .has-end-icon .end-icon {
-    margin-left: 1rem;
-  }
-  .prefix,
-  .suffix {
-    display: none;
-    font-size: var(--mdui-typescale-body-large-size);
-    font-weight: var(--mdui-typescale-body-large-weight);
-    letter-spacing: var(--mdui-typescale-body-large-tracking);
-    line-height: var(--mdui-typescale-body-large-line-height);
-  }
-  :host([variant='filled'][label]) .prefix,
-  :host([variant='filled'][label]) .suffix {
-    padding-top: 1rem;
-  }
-  :host([focused]) .prefix,
-  :host([focused]) .suffix,
-  :host([focused-style]) .prefix,
-  :host([focused-style]) .suffix,
-  .has-value .prefix,
-  .has-value .suffix {
-    display: flex;
-  }
-  .prefix {
-    padding-right: 0.125rem;
-  }
-  .suffix {
-    padding-left: 0.125rem;
-  }
-  .input-container {
-    width: 100%;
-  }
-  .label {
-    position: absolute;
-    pointer-events: none;
-    max-width: calc(100% - 1rem);
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    top: 1rem;
-    color: rgb(var(--mdui-color-on-surface-variant));
-    font-size: var(--mdui-typescale-body-large-size);
-    font-weight: var(--mdui-typescale-body-large-weight);
-    letter-spacing: var(--mdui-typescale-body-large-tracking);
-    line-height: var(--mdui-typescale-body-large-line-height);
-  }
-  .invalid .label,
-  .invalid-style .label {
-    color: rgb(var(--mdui-color-error));
-  }
-  :host([variant='outlined']) .label {
-    padding: 0rem 0.25rem;
-    margin: 0rem -0.25rem;
-  }
-  :host([variant='outlined']:hover) .label {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-  :host([variant='filled']:hover) .invalid .label,
-  :host([variant='outlined']:hover) .invalid .label,
-  :host([variant='filled']:hover) .invalid-style .label,
-  :host([variant='outlined']:hover) .invalid-style .label {
-    color: rgb(var(--mdui-color-on-error-container));
-  }
-  :host([variant='filled'][focused]) .label,
-  :host([variant='filled'][focused-style]) .label,
-  :host([variant='outlined'][focused]) .label,
-  :host([variant='outlined'][focused-style]) .label {
-    color: rgb(var(--mdui-color-primary));
-  }
-  :host([variant='filled'][focused]) .label,
-  :host([variant='filled'][focused-style]) .label,
-  :host([variant='filled']) .has-value .label,
-  :host([variant='filled'][type='date']) .label,
-  :host([variant='filled'][type='datetime-local']) .label,
-  :host([variant='filled'][type='month']) .label,
-  :host([variant='filled'][type='time']) .label,
-  :host([variant='filled'][type='week']) .label {
-    font-size: var(--mdui-typescale-body-small-size);
-    font-weight: var(--mdui-typescale-body-small-weight);
-    letter-spacing: var(--mdui-typescale-body-small-tracking);
-    line-height: var(--mdui-typescale-body-small-line-height);
-    top: 0.25rem;
-  }
-  :host([variant='outlined'][focused]) .label,
-  :host([variant='outlined'][focused-style]) .label,
-  :host([variant='outlined']) .has-value .label,
-  :host([variant='outlined'][type='date']) .label,
-  :host([variant='outlined'][type='datetime-local']) .label,
-  :host([variant='outlined'][type='month']) .label,
-  :host([variant='outlined'][type='time']) .label,
-  :host([variant='outlined'][type='week']) .label {
-    font-size: var(--mdui-typescale-body-small-size);
-    font-weight: var(--mdui-typescale-body-small-weight);
-    letter-spacing: var(--mdui-typescale-body-small-tracking);
-    line-height: var(--mdui-typescale-body-small-line-height);
-    top: -0.5rem;
-    left: 0.75rem;
-    background-color: rgb(var(--mdui-color-background));
-  }
-  :host([variant='filled'][focused]) .invalid .label,
-  :host([variant='filled'][focused-style]) .invalid .label,
-  :host([variant='outlined'][focused]) .invalid .label,
-  :host([variant='outlined'][focused-style]) .invalid .label,
-  :host([variant='filled'][focused]) .invalid-style .label,
-  :host([variant='filled'][focused-style]) .invalid-style .label,
-  :host([variant='outlined'][focused]) .invalid-style .label,
-  :host([variant='outlined'][focused-style]) .invalid-style .label {
-    color: rgb(var(--mdui-color-error));
-  }
-  :host([variant='filled'][disabled]) .label,
-  :host([variant='outlined'][disabled]) .label {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-  }
-  .input {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    border: none;
-    outline: none;
-    background: none;
-    -webkit-appearance: none;
-    appearance: none;
-    resize: none;
-    cursor: inherit;
-    font-family: inherit;
-    padding: 1rem 0rem;
-    font-size: var(--mdui-typescale-body-large-size);
-    font-weight: var(--mdui-typescale-body-large-weight);
-    letter-spacing: var(--mdui-typescale-body-large-tracking);
-    line-height: var(--mdui-typescale-body-large-line-height);
-    color: rgb(var(--mdui-color-on-surface));
-    caret-color: rgb(var(--mdui-color-primary));
-  }
-  .input.hide-input {
-    opacity: 0;
-    height: 0;
-    padding: 0 !important;
-    overflow: hidden;
-  }
-  .input::placeholder {
-    color: rgb(var(--mdui-color-on-surface-variant));
-  }
-  .invalid .input,
-  .invalid-style .input {
-    caret-color: rgb(var(--mdui-color-error));
-  }
-  :host([disabled]) .input {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-  }
-  :host([end-aligned]) .input {
-    text-align: right;
-  }
-  :host([variant='filled']) .label + .input {
-    padding: 1.5rem 0rem 0.5rem 0rem;
-  }
-  .supporting {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.25rem 1rem;
-    color: rgb(var(--mdui-color-on-surface-variant));
-  }
-  .supporting.invalid,
-  .supporting.invalid-style {
-    color: rgb(var(--mdui-color-error));
-  }
-  .helper {
-    display: block;
-    opacity: 1;
-    transition: opacity var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-linear);
-    font-size: var(--mdui-typescale-body-small-size);
-    font-weight: var(--mdui-typescale-body-small-weight);
-    letter-spacing: var(--mdui-typescale-body-small-tracking);
-    line-height: var(--mdui-typescale-body-small-line-height);
-  }
-  :host([disabled]) .helper {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-  }
-  :host([helper-on-focus]) .helper {
-    opacity: 0;
-  }
-  :host([helper-on-focus][focused]) .helper,
-  :host([helper-on-focus][focused-style]) .helper {
-    opacity: 1;
-  }
-  .error {
-    font-size: var(--mdui-typescale-body-small-size);
-    font-weight: var(--mdui-typescale-body-small-weight);
-    letter-spacing: var(--mdui-typescale-body-small-tracking);
-    line-height: var(--mdui-typescale-body-small-line-height);
-  }
-  .counter {
-    flex-wrap: nowrap;
-    padding-left: 1rem;
-    font-size: var(--mdui-typescale-body-small-size);
-    font-weight: var(--mdui-typescale-body-small-weight);
-    letter-spacing: var(--mdui-typescale-body-small-tracking);
-    line-height: var(--mdui-typescale-body-small-line-height);
-  }
-  ::-ms-reveal {
-    display: none;
-  }
-  .is-firefox .input[type='date'],
-  .is-firefox .input[type='datetime-local'],
-  .is-firefox .input[type='time'] {
-    -webkit-clip-path: inset(0 2em 0 0);
-    clip-path: inset(0 2em 0 0);
-  }
-  .input[type='number']::-webkit-outer-spin-button,
-  .input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-  .input[type='number'] {
-    -moz-appearance: textfield;
-  }
-  .input[type='search']::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-`;
+export const style = css `:host{display:inline-block;width:100%}:host([disabled]){pointer-events:none}:host([type=hidden]){display:none}.container{position:relative;display:flex;align-items:center;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);padding:0 1rem}.container.has-icon{padding-left:.75rem}.container.has-end-icon,.container.has-error-icon{padding-right:.75rem}:host([variant=filled]) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-surface-variant));background-color:rgb(var(--mdui-color-surface-container-highest));border-radius:var(--mdui-shape-corner-extra-small) var(--mdui-shape-corner-extra-small) 0 0}:host([variant=filled]) .container.invalid,:host([variant=filled]) .container.invalid-style{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-error))}:host([variant=filled]:hover) .container{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-surface))}:host([variant=filled]:hover) .container.invalid,:host([variant=filled]:hover) .container.invalid-style{box-shadow:inset 0 -.0625rem 0 0 rgb(var(--mdui-color-on-error-container))}:host([variant=filled][focused-style]) .container,:host([variant=filled][focused]) .container{box-shadow:inset 0 -.125rem 0 0 rgb(var(--mdui-color-primary))}:host([variant=filled][focused-style]) .container.invalid,:host([variant=filled][focused-style]) .container.invalid-style,:host([variant=filled][focused]) .container.invalid,:host([variant=filled][focused]) .container.invalid-style{box-shadow:inset 0 -.125rem 0 0 rgb(var(--mdui-color-error))}:host([variant=filled][disabled]) .container{box-shadow:inset 0 -.0625rem 0 0 rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),4%)}:host([variant=outlined]) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-outline));border-radius:var(--mdui-shape-corner-extra-small)}:host([variant=outlined]) .container.invalid,:host([variant=outlined]) .container.invalid-style{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-error))}:host([variant=outlined]:hover) .container{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-on-surface))}:host([variant=outlined]:hover) .container.invalid,:host([variant=outlined]:hover) .container.invalid-style{box-shadow:inset 0 0 0 .0625rem rgb(var(--mdui-color-on-error-container))}:host([variant=outlined][focused-style]) .container,:host([variant=outlined][focused]) .container{box-shadow:inset 0 0 0 .125rem rgb(var(--mdui-color-primary))}:host([variant=outlined][focused-style]) .container.invalid,:host([variant=outlined][focused-style]) .container.invalid-style,:host([variant=outlined][focused]) .container.invalid,:host([variant=outlined][focused]) .container.invalid-style{box-shadow:inset 0 0 0 .125rem rgb(var(--mdui-color-error))}:host([variant=outlined][disabled]) .container{box-shadow:inset 0 0 0 .125rem rgba(var(--mdui-color-on-surface),12%)}.icon,.prefix,.right-icon,.suffix{display:flex;-webkit-user-select:none;user-select:none;color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .icon,:host([disabled]) .prefix,:host([disabled]) .right-icon,:host([disabled]) .suffix{color:rgba(var(--mdui-color-on-surface),38%)}.invalid .right-icon,.invalid .suffix,.invalid-style .right-icon,.invalid-style .suffix{color:rgb(var(--mdui-color-error))}:host(:hover) .invalid .right-icon,:host(:hover) .invalid .suffix,:host(:hover) .invalid-style .right-icon,:host(:hover) .invalid-style .suffix{color:rgb(var(--mdui-color-on-error-container))}:host([focused-style]) .invalid .right-icon,:host([focused-style]) .invalid .suffix,:host([focused-style]) .invalid-style .right-icon,:host([focused-style]) .invalid-style .suffix,:host([focused]) .invalid .right-icon,:host([focused]) .invalid .suffix,:host([focused]) .invalid-style .right-icon,:host([focused]) .invalid-style .suffix{color:rgb(var(--mdui-color-error))}.icon,.right-icon{font-size:1.5rem}.icon mdui-button-icon,.right-icon mdui-button-icon,::slotted(mdui-button-icon[slot]){margin-left:-.5rem;margin-right:-.5rem}.icon .i,.right-icon .i,::slotted([slot$=icon]){font-size:inherit}.has-icon .icon{margin-right:1rem}.has-end-icon .end-icon,.right-icon:not(.end-icon){margin-left:1rem}.prefix,.suffix{display:none;font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([variant=filled][label]) .prefix,:host([variant=filled][label]) .suffix{padding-top:1rem}.has-value .prefix,.has-value .suffix,:host([focused-style]) .prefix,:host([focused-style]) .suffix,:host([focused]) .prefix,:host([focused]) .suffix{display:flex}.prefix{padding-right:.125rem}.suffix{padding-left:.125rem}.input-container{width:100%}.label{position:absolute;pointer-events:none;max-width:calc(100% - 1rem);display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;top:1rem;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}.invalid .label,.invalid-style .label{color:rgb(var(--mdui-color-error))}:host([variant=outlined]) .label{padding:0 .25rem;margin:0 -.25rem}:host([variant=outlined]:hover) .label{color:rgb(var(--mdui-color-on-surface))}:host([variant=filled]:hover) .invalid .label,:host([variant=filled]:hover) .invalid-style .label,:host([variant=outlined]:hover) .invalid .label,:host([variant=outlined]:hover) .invalid-style .label{color:rgb(var(--mdui-color-on-error-container))}:host([variant=filled][focused-style]) .label,:host([variant=filled][focused]) .label,:host([variant=outlined][focused-style]) .label,:host([variant=outlined][focused]) .label{color:rgb(var(--mdui-color-primary))}:host([variant=filled]) .has-value .label,:host([variant=filled][focused-style]) .label,:host([variant=filled][focused]) .label,:host([variant=filled][type=date]) .label,:host([variant=filled][type=datetime-local]) .label,:host([variant=filled][type=month]) .label,:host([variant=filled][type=time]) .label,:host([variant=filled][type=week]) .label{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height);top:.25rem}:host([variant=outlined]) .has-value .label,:host([variant=outlined][focused-style]) .label,:host([variant=outlined][focused]) .label,:host([variant=outlined][type=date]) .label,:host([variant=outlined][type=datetime-local]) .label,:host([variant=outlined][type=month]) .label,:host([variant=outlined][type=time]) .label,:host([variant=outlined][type=week]) .label{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height);top:-.5rem;left:.75rem;background-color:rgb(var(--mdui-color-background))}:host([variant=filled][focused-style]) .invalid .label,:host([variant=filled][focused-style]) .invalid-style .label,:host([variant=filled][focused]) .invalid .label,:host([variant=filled][focused]) .invalid-style .label,:host([variant=outlined][focused-style]) .invalid .label,:host([variant=outlined][focused-style]) .invalid-style .label,:host([variant=outlined][focused]) .invalid .label,:host([variant=outlined][focused]) .invalid-style .label{color:rgb(var(--mdui-color-error))}:host([variant=filled][disabled]) .label,:host([variant=outlined][disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}.input{display:flex;flex-wrap:wrap;width:100%;border:none;outline:0;background:0 0;-webkit-appearance:none;appearance:none;resize:none;cursor:inherit;font-family:inherit;padding:1rem 0;font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height);color:rgb(var(--mdui-color-on-surface));caret-color:rgb(var(--mdui-color-primary))}.input.hide-input{opacity:0;height:0;padding:0!important;overflow:hidden}.input::placeholder{color:rgb(var(--mdui-color-on-surface-variant))}.invalid .input,.invalid-style .input{caret-color:rgb(var(--mdui-color-error))}:host([disabled]) .input{color:rgba(var(--mdui-color-on-surface),38%)}:host([end-aligned]) .input{text-align:right}:host([variant=filled]) .label+.input{padding:1.5rem 0 .5rem 0}.supporting{display:flex;justify-content:space-between;padding:.25rem 1rem;color:rgb(var(--mdui-color-on-surface-variant))}.supporting.invalid,.supporting.invalid-style{color:rgb(var(--mdui-color-error))}.helper{display:block;opacity:1;transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}:host([disabled]) .helper{color:rgba(var(--mdui-color-on-surface),38%)}:host([helper-on-focus]) .helper{opacity:0}:host([helper-on-focus][focused-style]) .helper,:host([helper-on-focus][focused]) .helper{opacity:1}.error{font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}.counter{flex-wrap:nowrap;padding-left:1rem;font-size:var(--mdui-typescale-body-small-size);font-weight:var(--mdui-typescale-body-small-weight);letter-spacing:var(--mdui-typescale-body-small-tracking);line-height:var(--mdui-typescale-body-small-line-height)}::-ms-reveal{display:none}.is-firefox .input[type=date],.is-firefox .input[type=datetime-local],.is-firefox .input[type=time]{-webkit-clip-path:inset(0 2em 0 0);clip-path:inset(0 2em 0 0)}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;display:none}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}`;

package/components/tooltip/index.js

@@ -215,16 +215,7 @@ let Tooltip = class Tooltip extends MduiElement {
         const hasHeadline = this.isRich() &&
             (this.headline || this.hasSlotController.test('headline'));
         const hasAction = this.isRich() && this.hasSlotController.test('action');
-        return html `<slot></slot>
-      <div ${ref(this.popupRef)} part="popup" class="popup" hidden>
-        ${when(hasHeadline, () => html `<slot name="headline" part="headline" class="headline">
-              ${this.headline}
-            </slot>`)}
-        <slot name="content" part="content" class="content">
-          ${this.content}
-        </slot>
-        ${when(hasAction, () => html `<slot name="action" part="action" class="action"></slot>`)}
-      </div>`;
+        return html `<slot></slot><div ${ref(this.popupRef)} part="popup" class="popup" hidden>${when(hasHeadline, () => html `<slot name="headline" part="headline" class="headline">${this.headline}</slot>`)}<slot name="content" part="content" class="content">${this.content}</slot>${when(hasAction, () => html `<slot name="action" part="action" class="action"></slot>`)}</div>`;
     }
     isRich() {
         return this.variant === 'rich';