mdui 2.0.3 → 2.0.5

package/components/text-field/style.js

@@ -1,2 +1,363 @@
 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: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}`;
+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;
+  }
+`;

package/components/tooltip/index.d.ts

@@ -19,57 +19,57 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
  * @event close - tooltip 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 关闭
  * @event closed - tooltip 隐藏动画完成时，事件被触发
  *
- * @slot - tooltip 触发的目标元素，仅 `default` slot 中的第一个元素会作为目标元素
- * @slot headline - tooltip 的标题，仅 `variant="rich"` 时该 slot 才有效
+ * @slot - tooltip 触发的目标元素，只有 `default` slot 中的第一个元素会作为目标元素
+ * @slot headline - tooltip 的标题，只有当 `variant="rich"` 时，此 slot 才有效
  * @slot content - tooltip 的内容，可以包含 HTML。若只包含纯文本，可以使用 `content` 属性代替
- * @slot action - tooltip 底部的按钮，仅 `variant="rich"` 时该 slot 才有效
+ * @slot action - tooltip 底部的按钮，只有当 `variant="rich"` 时，此 slot 才有效
  *
- * @csspart popup - 工具提示的容器
+ * @csspart popup - tooltip 的容器
  * @csspart headline - 标题
  * @csspart content - 正文
  * @csspart action - 操作按钮
  *
- * @cssprop --shape-corner-plain - variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-rich - variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner-plain - 当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rich - 当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class Tooltip extends MduiElement<TooltipEventMap> {
     static styles: CSSResultGroup;
     /**
-     * tooltip 的形状。默认为 `plain`。可选值为：
+     * tooltip 的形状。默认为 `plain`。可选值包括：
      *
-     * * `plain`：纯文本，用于简单的单行文本
-     * * `rich`：富文本，可包含标题、正文、及操作按钮
+     * * `plain`：纯文本，适用于简单的单行文本
+     * * `rich`：富文本，可以包含标题、正文和操作按钮
      */
-    variant: /*纯文本，用于简单的单行文本*/ 'plain' | /*富文本，可包含标题、正文、及操作按钮*/ 'rich';
+    variant: /*纯文本，适用于简单的单行文本*/ 'plain' | /*富文本，可以包含标题、正文和操作按钮*/ 'rich';
     /**
-     * tooltip 的位置。默认为 `auto`。可选值为：
+     * tooltip 的位置。默认为 `auto`。可选值包括：
      *
      * * `auto`：自动判断位置。`variant="plan"` 时，优先使用 `top`；`variant="rich"` 时，优先使用 `bottom-right`
      * * `top-left`：位于左上方
-     * * `top-start`：位于上方，且左对齐
-     * * `top`：位于上方，且居中对齐
-     * * `top-end`：位于上方，且右对齐
+     * * `top-start`：位于上方，左对齐
+     * * `top`：位于上方，居中对齐
+     * * `top-end`：位于上方，右对齐
      * * `top-right`：位于右上方
      * * `bottom-left`：位于左下方
-     * * `bottom-start`：位于下方，且左对齐
-     * * `bottom`：位于下方，且居中对齐
-     * * `bottom-end`：位于下方，且右对齐
+     * * `bottom-start`：位于下方，左对齐
+     * * `bottom`：位于下方，居中对齐
+     * * `bottom-end`：位于下方，右对齐
      * * `bottom-right`：位于右下方
-     * * `left-start`：位于左侧，且顶部对齐
-     * * `left`：位于左侧，且居中对齐
-     * * `left-end`：位于左侧，且底部对齐
-     * * `right-start`：位于右侧，且顶部对齐
-     * * `right`：位于右侧，且居中对齐
-     * * `right-end`：位于右侧，且底部对齐
+     * * `left-start`：位于左侧，顶部对齐
+     * * `left`：位于左侧，居中对齐
+     * * `left-end`：位于左侧，底部对齐
+     * * `right-start`：位于右侧，顶部对齐
+     * * `right`：位于右侧，居中对齐
+     * * `right-end`：位于右侧，底部对齐
      */
-    placement: /*自动判断位置*/ 'auto' | /*位于左上方*/ 'top-left' | /*位于上方，且左对齐*/ 'top-start' | /*位于上方，且居中对齐*/ 'top' | /*位于上方，且右对齐*/ 'top-end' | /*位于右上方*/ 'top-right' | /*位于左下方*/ 'bottom-left' | /*位于下方，且左对齐*/ 'bottom-start' | /*位于下方，且居中对齐*/ 'bottom' | /*位于下方，且右对齐*/ 'bottom-end' | /*位于右下方*/ 'bottom-right' | /*位于左侧，且顶部对齐*/ 'left-start' | /*位于左侧，且居中对齐*/ 'left' | /*位于左侧，且底部对齐*/ 'left-end' | /*位于右侧，且顶部对齐*/ 'right-start' | /*位于右侧，且居中对齐*/ 'right' | /*位于右侧，且底部对齐*/ 'right-end';
+    placement: /*自动判断位置*/ 'auto' | /*位于左上方*/ 'top-left' | /*位于上方，左对齐*/ 'top-start' | /*位于上方，居中对齐*/ 'top' | /*位于上方，右对齐*/ 'top-end' | /*位于右上方*/ 'top-right' | /*位于左下方*/ 'bottom-left' | /*位于下方，左对齐*/ 'bottom-start' | /*位于下方，居中对齐*/ 'bottom' | /*位于下方，右对齐*/ 'bottom-end' | /*位于右下方*/ 'bottom-right' | /*位于左侧，顶部对齐*/ 'left-start' | /*位于左侧，居中对齐*/ 'left' | /*位于左侧，底部对齐*/ 'left-end' | /*位于右侧，顶部对齐*/ 'right-start' | /*位于右侧，居中对齐*/ 'right' | /*位于右侧，底部对齐*/ 'right-end';
     /**
-     * hover 触发显示的延时，单位为毫秒
+     * 鼠标悬浮触发显示的延时，单位为毫秒
      */
     openDelay: number;
     /**
-     * hover 触发隐藏的延时，单位为毫秒
+     * 鼠标悬浮触发隐藏的延时，单位为毫秒
      */
     closeDelay: number;
     /**
@@ -81,14 +81,14 @@ export declare class Tooltip extends MduiElement<TooltipEventMap> {
      */
     content?: string;
     /**
-     * 触发方式，支持传入多个值，用空格分隔。可选值为：
+     * 触发方式，支持多个值，用空格分隔。可选值包括：
      *
      * * `click`：点击时触发
-     * * `hover`：鼠标悬浮触发
+     * * `hover`：鼠标悬浮时触发
      * * `focus`：聚焦时触发
-     * * `manual`：使用了该值时，只能使用编程方式打开和关闭 tooltip，且不能再指定其他触发方式
+     * * `manual`：只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式
      */
-    trigger: /*点击时触发*/ 'click' | /*鼠标悬浮触发*/ 'hover' | /*聚焦时触发*/ 'focus' | /*使用了该值时，只能使用编程方式打开和关闭 tooltip，且不能再指定其他触发方式*/ 'manual' | string;
+    trigger: /*点击时触发*/ 'click' | /*鼠标悬浮时触发*/ 'hover' | /*聚焦时触发*/ 'focus' | /*只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式*/ 'manual' | string;
     /**
      * 是否禁用 tooltip
      */

package/components/tooltip/index.js

@@ -35,67 +35,67 @@ import { style } from './style.js';
  * @event close - tooltip 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 关闭
  * @event closed - tooltip 隐藏动画完成时，事件被触发
  *
- * @slot - tooltip 触发的目标元素，仅 `default` slot 中的第一个元素会作为目标元素
- * @slot headline - tooltip 的标题，仅 `variant="rich"` 时该 slot 才有效
+ * @slot - tooltip 触发的目标元素，只有 `default` slot 中的第一个元素会作为目标元素
+ * @slot headline - tooltip 的标题，只有当 `variant="rich"` 时，此 slot 才有效
  * @slot content - tooltip 的内容，可以包含 HTML。若只包含纯文本，可以使用 `content` 属性代替
- * @slot action - tooltip 底部的按钮，仅 `variant="rich"` 时该 slot 才有效
+ * @slot action - tooltip 底部的按钮，只有当 `variant="rich"` 时，此 slot 才有效
  *
- * @csspart popup - 工具提示的容器
+ * @csspart popup - tooltip 的容器
  * @csspart headline - 标题
  * @csspart content - 正文
  * @csspart action - 操作按钮
  *
- * @cssprop --shape-corner-plain - variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-rich - variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner-plain - 当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rich - 当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let Tooltip = class Tooltip extends MduiElement {
     constructor() {
         super();
         /**
-         * tooltip 的形状。默认为 `plain`。可选值为：
+         * tooltip 的形状。默认为 `plain`。可选值包括：
          *
-         * * `plain`：纯文本，用于简单的单行文本
-         * * `rich`：富文本，可包含标题、正文、及操作按钮
+         * * `plain`：纯文本，适用于简单的单行文本
+         * * `rich`：富文本，可以包含标题、正文和操作按钮
          */
         this.variant = 'plain';
         /**
-         * tooltip 的位置。默认为 `auto`。可选值为：
+         * tooltip 的位置。默认为 `auto`。可选值包括：
          *
          * * `auto`：自动判断位置。`variant="plan"` 时，优先使用 `top`；`variant="rich"` 时，优先使用 `bottom-right`
          * * `top-left`：位于左上方
-         * * `top-start`：位于上方，且左对齐
-         * * `top`：位于上方，且居中对齐
-         * * `top-end`：位于上方，且右对齐
+         * * `top-start`：位于上方，左对齐
+         * * `top`：位于上方，居中对齐
+         * * `top-end`：位于上方，右对齐
          * * `top-right`：位于右上方
          * * `bottom-left`：位于左下方
-         * * `bottom-start`：位于下方，且左对齐
-         * * `bottom`：位于下方，且居中对齐
-         * * `bottom-end`：位于下方，且右对齐
+         * * `bottom-start`：位于下方，左对齐
+         * * `bottom`：位于下方，居中对齐
+         * * `bottom-end`：位于下方，右对齐
          * * `bottom-right`：位于右下方
-         * * `left-start`：位于左侧，且顶部对齐
-         * * `left`：位于左侧，且居中对齐
-         * * `left-end`：位于左侧，且底部对齐
-         * * `right-start`：位于右侧，且顶部对齐
-         * * `right`：位于右侧，且居中对齐
-         * * `right-end`：位于右侧，且底部对齐
+         * * `left-start`：位于左侧，顶部对齐
+         * * `left`：位于左侧，居中对齐
+         * * `left-end`：位于左侧，底部对齐
+         * * `right-start`：位于右侧，顶部对齐
+         * * `right`：位于右侧，居中对齐
+         * * `right-end`：位于右侧，底部对齐
          */
         this.placement = 'auto';
         /**
-         * hover 触发显示的延时，单位为毫秒
+         * 鼠标悬浮触发显示的延时，单位为毫秒
          */
         this.openDelay = 150;
         /**
-         * hover 触发隐藏的延时，单位为毫秒
+         * 鼠标悬浮触发隐藏的延时，单位为毫秒
          */
         this.closeDelay = 150;
         /**
-         * 触发方式，支持传入多个值，用空格分隔。可选值为：
+         * 触发方式，支持多个值，用空格分隔。可选值包括：
          *
          * * `click`：点击时触发
-         * * `hover`：鼠标悬浮触发
+         * * `hover`：鼠标悬浮时触发
          * * `focus`：聚焦时触发
-         * * `manual`：使用了该值时，只能使用编程方式打开和关闭 tooltip，且不能再指定其他触发方式
+         * * `manual`：只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式
          */
         this.trigger = 'hover focus';
         /**
@@ -215,7 +215,16 @@ 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';

package/components/tooltip/style.js

@@ -1,2 +1,58 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner-plain:var(--mdui-shape-corner-extra-small);--shape-corner-rich:var(--mdui-shape-corner-medium);--z-index:2500;display:contents}.popup{position:fixed;display:flex;flex-direction:column;z-index:var(--z-index);border-radius:var(--shape-corner-plain);background-color:rgb(var(--mdui-color-inverse-surface));padding:0 .5rem;min-width:1.75rem;max-width:20rem}:host([variant=rich]) .popup{border-radius:var(--shape-corner-rich);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);padding:.75rem 1rem .5rem 1rem}.headline{display:flex;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-title-small-size);font-weight:var(--mdui-typescale-title-small-weight);letter-spacing:var(--mdui-typescale-title-small-tracking);line-height:var(--mdui-typescale-title-small-line-height)}.content{display:flex;padding:.25rem 0;color:rgb(var(--mdui-color-inverse-on-surface));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([variant=rich]) .content{color:rgb(var(--mdui-color-on-surface-variant));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)}.action{display:flex;justify-content:flex-start;padding-top:.5rem}.action ::slotted(:not(:last-child)){margin-right:.5rem}`;
+export const style = css `
+  :host {
+    --shape-corner-plain: var(--mdui-shape-corner-extra-small);
+    --shape-corner-rich: var(--mdui-shape-corner-medium);
+    --z-index: 2500;
+    display: contents;
+  }
+  .popup {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    z-index: var(--z-index);
+    border-radius: var(--shape-corner-plain);
+    background-color: rgb(var(--mdui-color-inverse-surface));
+    padding: 0rem 0.5rem;
+    min-width: 1.75rem;
+    max-width: 20rem;
+  }
+  :host([variant='rich']) .popup {
+    border-radius: var(--shape-corner-rich);
+    background-color: rgb(var(--mdui-color-surface-container));
+    box-shadow: var(--mdui-elevation-level2);
+    padding: 0.75rem 1rem 0.5rem 1rem;
+  }
+  .headline {
+    display: flex;
+    color: rgb(var(--mdui-color-on-surface-variant));
+    font-size: var(--mdui-typescale-title-small-size);
+    font-weight: var(--mdui-typescale-title-small-weight);
+    letter-spacing: var(--mdui-typescale-title-small-tracking);
+    line-height: var(--mdui-typescale-title-small-line-height);
+  }
+  .content {
+    display: flex;
+    padding: 0.25rem 0rem;
+    color: rgb(var(--mdui-color-inverse-on-surface));
+    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([variant='rich']) .content {
+    color: rgb(var(--mdui-color-on-surface-variant));
+    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);
+  }
+  .action {
+    display: flex;
+    justify-content: flex-start;
+    padding-top: 0.5rem;
+  }
+  .action ::slotted(:not(:last-child)) {
+    margin-right: 0.5rem;
+  }
+`;