mdui 2.0.5 → 2.0.6

package/components/switch/style.js

@@ -1,203 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-full);
-    --shape-corner-thumb: var(--mdui-shape-corner-full);
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    height: 2.5rem;
-  }
-  :host([disabled]) {
-    cursor: default;
-    pointer-events: none;
-  }
-  label {
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-    cursor: inherit;
-    -webkit-user-select: none;
-    user-select: none;
-    touch-action: manipulation;
-    zoom: 1;
-    -webkit-user-drag: none;
-  }
-  /* 轨道 */
-  .track {
-    position: relative;
-    display: flex;
-    align-items: center;
-    border-radius: var(--shape-corner);
-    transition-property: background-color, border-width;
-    transition-duration: var(--mdui-motion-duration-short4);
-    transition-timing-function: var(--mdui-motion-easing-standard);
-    height: 2rem;
-    width: 3.25rem;
-    border: 0.125rem solid rgb(var(--mdui-color-outline));
-    background-color: rgb(var(--mdui-color-surface-container-highest));
-  }
-  :host([checked]) .track {
-    background-color: rgb(var(--mdui-color-primary));
-    border-width: 0rem;
-  }
-  .invalid .track {
-    background-color: rgb(var(--mdui-color-error-container));
-    border-color: rgb(var(--mdui-color-error));
-  }
-  :host([disabled]) .track {
-    background-color: rgba(var(--mdui-color-surface-container-highest), 0.12);
-    border-color: rgba(var(--mdui-color-on-surface), 0.12);
-  }
-  :host([disabled][checked]) .track {
-    background-color: rgba(var(--mdui-color-on-surface), 0.12);
-  }
-  /* 隐藏系统 input 标签，用自定义的图标代替 */
-  input {
-    position: absolute;
-    padding: 0;
-    opacity: 0;
-    pointer-events: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin: 0rem 0rem 0rem 0.625rem;
-  }
-  mdui-ripple {
-    border-radius: 50%;
-    transition-property: left, top;
-    transition-duration: var(--mdui-motion-duration-short4);
-    transition-timing-function: var(--mdui-motion-easing-standard);
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-  .thumb {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--shape-corner-thumb);
-    transition-property: width, height, left, background-color;
-    transition-duration: var(--mdui-motion-duration-short4);
-    transition-timing-function: var(--mdui-motion-easing-standard);
-    height: 1rem;
-    width: 1rem;
-    left: 0.375rem;
-    background-color: rgb(var(--mdui-color-outline));
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  .thumb mdui-ripple {
-    left: -0.75rem;
-    top: -0.75rem;
-  }
-  .has-unchecked-icon .thumb {
-    height: 1.5rem;
-    width: 1.5rem;
-    left: 0.125rem;
-  }
-  .has-unchecked-icon .thumb mdui-ripple {
-    left: -0.5rem;
-    top: -0.5rem;
-  }
-  :host([hover]) .thumb,
-  :host([focus-visible]) .thumb,
-  :host([pressed]) .thumb {
-    background-color: rgb(var(--mdui-color-on-surface-variant));
-  }
-  :host([checked]) .thumb {
-    height: 1.5rem;
-    width: 1.5rem;
-    left: 1.5rem;
-    background-color: rgb(var(--mdui-color-on-primary));
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
-  }
-  :host([checked]) .thumb mdui-ripple {
-    left: -0.5rem;
-    top: -0.5rem;
-  }
-  :host([pressed]) .thumb {
-    height: 1.75rem;
-    width: 1.75rem;
-    left: 0rem;
-  }
-  :host([pressed]) .thumb mdui-ripple {
-    left: -0.375rem;
-    top: -0.375rem;
-  }
-  :host([pressed][checked]) .thumb {
-    left: 1.375rem;
-  }
-  :host([hover][checked]) .thumb,
-  :host([focus-visible][checked]) .thumb,
-  :host([pressed][checked]) .thumb {
-    background-color: rgb(var(--mdui-color-primary-container));
-  }
-  .invalid .thumb {
-    background-color: rgb(var(--mdui-color-error));
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-error);
-  }
-  :host([hover]) .invalid .thumb,
-  :host([focus-visible]) .invalid .thumb,
-  :host([pressed]) .invalid .thumb {
-    background-color: rgb(var(--mdui-color-error));
-  }
-  :host([disabled]) .thumb {
-    background-color: rgba(var(--mdui-color-on-surface), 0.38);
-  }
-  :host([disabled][checked]) .thumb {
-    background-color: rgb(var(--mdui-color-surface));
-  }
-  .unchecked-icon,
-  .checked-icon {
-    display: flex;
-    position: absolute;
-    transition-property: opacity, transform;
-    font-size: 1rem;
-  }
-  .unchecked-icon {
-    opacity: 1;
-    transform: scale(1);
-    transition-delay: var(--mdui-motion-duration-short1);
-    transition-duration: var(--mdui-motion-duration-short3);
-    transition-timing-function: var(--mdui-motion-easing-linear);
-    color: rgb(var(--mdui-color-surface-container-highest));
-  }
-  :host([checked]) .unchecked-icon {
-    opacity: 0;
-    transform: scale(0.92);
-    transition-delay: 0ms;
-    transition-duration: var(--mdui-motion-duration-short1);
-  }
-  :host([disabled]) .unchecked-icon {
-    color: rgba(var(--mdui-color-surface-container-highest), 0.38);
-  }
-  .checked-icon {
-    opacity: 0;
-    transform: scale(0.92);
-    transition-delay: 0ms;
-    transition-duration: var(--mdui-motion-duration-short1);
-    transition-timing-function: var(--mdui-motion-easing-linear);
-    color: rgb(var(--mdui-color-on-primary-container));
-  }
-  :host([checked]) .checked-icon {
-    opacity: 1;
-    transform: scale(1);
-    transition-delay: var(--mdui-motion-duration-short1);
-    transition-duration: var(--mdui-motion-duration-short3);
-  }
-  .invalid .checked-icon {
-    color: rgb(var(--mdui-color-error-container));
-  }
-  :host([disabled]) .checked-icon {
-    color: rgba(var(--mdui-color-on-surface), 0.38);
-  }
-  .unchecked-icon .i,
-  .checked-icon .i,
-  ::slotted([slot='unchecked-icon']),
-  ::slotted([slot='checked-icon']) {
-    font-size: inherit;
-    color: inherit;
-  }
-`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);--shape-corner-thumb:var(--mdui-shape-corner-full);position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;height:2.5rem}:host([disabled]){cursor:default;pointer-events:none}label{display:inline-flex;align-items:center;width:100%;height:100%;white-space:nowrap;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}.track{position:relative;display:flex;align-items:center;border-radius:var(--shape-corner);transition-property:background-color,border-width;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:2rem;width:3.25rem;border:.125rem solid rgb(var(--mdui-color-outline));background-color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .track{background-color:rgb(var(--mdui-color-primary));border-width:0}.invalid .track{background-color:rgb(var(--mdui-color-error-container));border-color:rgb(var(--mdui-color-error))}:host([disabled]) .track{background-color:rgba(var(--mdui-color-surface-container-highest),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled][checked]) .track{background-color:rgba(var(--mdui-color-on-surface),.12)}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}mdui-ripple{border-radius:50%;transition-property:left,top;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);width:2.5rem;height:2.5rem}.thumb{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:var(--shape-corner-thumb);transition-property:width,height,left,background-color;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard);height:1rem;width:1rem;left:.375rem;background-color:rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.thumb mdui-ripple{left:-.75rem;top:-.75rem}.has-unchecked-icon .thumb{height:1.5rem;width:1.5rem;left:.125rem}.has-unchecked-icon .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([focus-visible]) .thumb,:host([hover]) .thumb,:host([pressed]) .thumb{background-color:rgb(var(--mdui-color-on-surface-variant))}:host([checked]) .thumb{height:1.5rem;width:1.5rem;left:1.5rem;background-color:rgb(var(--mdui-color-on-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .thumb mdui-ripple{left:-.5rem;top:-.5rem}:host([pressed]) .thumb{height:1.75rem;width:1.75rem;left:0}:host([pressed]) .thumb mdui-ripple{left:-.375rem;top:-.375rem}:host([pressed][checked]) .thumb{left:1.375rem}:host([focus-visible][checked]) .thumb,:host([hover][checked]) .thumb,:host([pressed][checked]) .thumb{background-color:rgb(var(--mdui-color-primary-container))}.invalid .thumb{background-color:rgb(var(--mdui-color-error));--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}:host([focus-visible]) .invalid .thumb,:host([hover]) .invalid .thumb,:host([pressed]) .invalid .thumb{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .thumb{background-color:rgba(var(--mdui-color-on-surface),.38)}:host([disabled][checked]) .thumb{background-color:rgb(var(--mdui-color-surface))}.checked-icon,.unchecked-icon{display:flex;position:absolute;transition-property:opacity,transform;font-size:1rem}.unchecked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-surface-container-highest))}:host([checked]) .unchecked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([disabled]) .unchecked-icon{color:rgba(var(--mdui-color-surface-container-highest),.38)}.checked-icon{opacity:0;transform:scale(.92);transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1);transition-timing-function:var(--mdui-motion-easing-linear);color:rgb(var(--mdui-color-on-primary-container))}:host([checked]) .checked-icon{opacity:1;transform:scale(1);transition-delay:var(--mdui-motion-duration-short1);transition-duration:var(--mdui-motion-duration-short3)}.invalid .checked-icon{color:rgb(var(--mdui-color-error-container))}:host([disabled]) .checked-icon{color:rgba(var(--mdui-color-on-surface),.38)}.checked-icon .i,.unchecked-icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){font-size:inherit;color:inherit}`;

package/components/tabs/tab-panel-style.js

@@ -1,11 +1,2 @@
 import { css } from 'lit';
-export const tabPanelStyle = css `
-  :host {
-    display: block;
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
-  :host(:not([active])) {
-    display: none;
-  }
-`;
+export const tabPanelStyle = css `:host{display:block;overflow-y:auto;flex:1 1 auto}:host(:not([active])){display:none}`;

package/components/tabs/tab-style.js

@@ -1,86 +1,2 @@
 import { css } from 'lit';
-export const tabStyle = css `
-  :host {
-    position: relative;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  :host([active]) {
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
-  }
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    height: 100%;
-  }
-  .preset {
-    flex-direction: column;
-    min-height: 3rem;
-    padding: 0.625rem 1rem;
-  }
-  :host([inline]) .preset {
-    flex-direction: row;
-  }
-  .icon-container,
-  .label-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .icon-container ::slotted([slot='badge']) {
-    position: absolute;
-    transform: translate(50%, -50%);
-  }
-  .icon-container ::slotted([slot='badge'][variant='small']) {
-    transform: translate(0.5625rem, -0.5625rem);
-  }
-  .label-container ::slotted([slot='badge']) {
-    position: absolute;
-    left: 100%;
-    bottom: 100%;
-    transform: translate(-0.75rem, 0.625rem);
-  }
-  .label-container ::slotted([slot='badge'][variant='small']) {
-    transform: translate(-0.375rem, 0.375rem);
-  }
-  .icon,
-  .label {
-    display: flex;
-    color: rgb(var(--mdui-color-on-surface-variant));
-  }
-  :host([hover]) .icon,
-  :host([hover]) .label,
-  :host([focused]) .icon,
-  :host([focused]) .label,
-  :host([pressed]) .icon,
-  :host([pressed]) .label {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-  :host([active]) .icon,
-  :host([active]) .label {
-    color: rgb(var(--mdui-color-primary));
-  }
-  :host([active]) .variant-secondary .icon,
-  :host([active]) .variant-secondary .label {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-  .icon {
-    font-size: 1.5rem;
-  }
-  .label {
-    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);
-  }
-  .icon mdui-icon,
-  ::slotted([slot='icon']) {
-    font-size: inherit;
-    color: inherit;
-  }
-`;
+export const tabStyle = css `:host{position:relative;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.container{display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%}.preset{flex-direction:column;min-height:3rem;padding:.625rem 1rem}:host([inline]) .preset{flex-direction:row}.icon-container,.label-container{position:relative;display:flex;align-items:center;justify-content:center}.icon-container ::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.icon-container ::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.label-container ::slotted([slot=badge]){position:absolute;left:100%;bottom:100%;transform:translate(-.75rem,.625rem)}.label-container ::slotted([slot=badge][variant=small]){transform:translate(-.375rem,.375rem)}.icon,.label{display:flex;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .icon,:host([focused]) .label,:host([hover]) .icon,:host([hover]) .label,:host([pressed]) .icon,:host([pressed]) .label{color:rgb(var(--mdui-color-on-surface))}:host([active]) .icon,:host([active]) .label{color:rgb(var(--mdui-color-primary))}:host([active]) .variant-secondary .icon,:host([active]) .variant-secondary .label{color:rgb(var(--mdui-color-on-surface))}.icon{font-size:1.5rem}.label{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)}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit;color:inherit}`;

package/components/tabs/tab.js

@@ -77,33 +77,13 @@ let Tab = class Tab extends RippleMixin(FocusableMixin(MduiElement)) {
         const hasIcon = this.icon || this.hasSlotController.test('icon');
         const hasCustomSlot = this.hasSlotController.test('custom');
         const renderBadge = () => html `<slot name="badge"></slot>`;
-        return html `<mdui-ripple
-        ${ref(this.rippleRef)}
-        .noRipple=${this.noRipple}
-      ></mdui-ripple>
-      <div
-        part="container"
-        class=${classMap({
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><div part="container" class="${classMap({
             container: true,
             preset: !hasCustomSlot,
             'variant-secondary': this.variant === 'secondary',
-        })}
-      >
-        <slot name="custom">
-          <div class="icon-container">
-            ${when(hasIcon || this.icon, renderBadge)}
-            <slot name="icon" part="icon" class="icon">
-              ${this.icon
-            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
-            : nothingTemplate}
-            </slot>
-          </div>
-          <div class="label-container">
-            ${when(!hasIcon, renderBadge)}
-            <slot part="label" class="label"></slot>
-          </div>
-        </slot>
-      </div>`;
+        })}"><slot name="custom"><div class="icon-container">${when(hasIcon || this.icon, renderBadge)}<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot></div><div class="label-container">${when(!hasIcon, renderBadge)}<slot part="label" class="label"></slot></div></slot></div>`;
     }
 };
 Tab.styles = [componentStyle, tabStyle];

package/components/tabs/tabs-style.js

@@ -1,139 +1,2 @@
 import { css } from 'lit';
-export const tabsStyle = css `
-  :host {
-    position: relative;
-    display: flex;
-  }
-  :host([placement^='top']) {
-    flex-direction: column;
-  }
-  :host([placement^='bottom']) {
-    flex-direction: column-reverse;
-  }
-  :host([placement^='left']) {
-    flex-direction: row;
-  }
-  :host([placement^='right']) {
-    flex-direction: row-reverse;
-  }
-  .container {
-    position: relative;
-    display: flex;
-    flex: 0 0 auto;
-    overflow-x: auto;
-    background-color: rgb(var(--mdui-color-surface));
-  }
-  :host([placement^='top']) .container,
-  :host([placement^='bottom']) .container {
-    flex-direction: row;
-  }
-  :host([placement^='left']) .container,
-  :host([placement^='right']) .container {
-    flex-direction: column;
-  }
-  :host([placement$='-start']) .container {
-    justify-content: flex-start;
-  }
-  :host([placement='top']) .container,
-  :host([placement='bottom']) .container,
-  :host([placement='left']) .container,
-  :host([placement='right']) .container {
-    justify-content: center;
-  }
-  :host([placement$='-end']) .container {
-    justify-content: flex-end;
-  }
-  .container::after {
-    content: ' ';
-    position: absolute;
-    background-color: rgb(var(--mdui-color-surface-variant));
-  }
-  :host([placement^='top']) .container::after,
-  :host([placement^='bottom']) .container::after {
-    left: 0;
-    width: 100%;
-    height: 0.0625rem;
-  }
-  :host([placement^='top']) .container::after {
-    bottom: 0;
-  }
-  :host([placement^='bottom']) .container::after {
-    top: 0;
-  }
-  :host([placement^='left']) .container::after,
-  :host([placement^='right']) .container::after {
-    top: 0;
-    height: 100%;
-    width: 0.0625rem;
-  }
-  :host([placement^='left']) .container::after {
-    right: 0;
-  }
-  :host([placement^='right']) .container::after {
-    left: 0;
-  }
-  .indicator {
-    position: absolute;
-    z-index: 1;
-    background-color: rgb(var(--mdui-color-primary));
-  }
-  .container:not(.initial) .indicator {
-    transition-duration: var(--mdui-motion-duration-medium2);
-    transition-timing-function: var(--mdui-motion-easing-standard-decelerate);
-  }
-  :host([placement^='top']) .indicator,
-  :host([placement^='bottom']) .indicator {
-    transition-property: transform, left, width;
-  }
-  :host([placement^='left']) .indicator,
-  :host([placement^='right']) .indicator {
-    transition-property: transform, top, height;
-  }
-  :host([placement^='top']) .indicator {
-    bottom: 0;
-  }
-  :host([placement^='bottom']) .indicator {
-    top: 0;
-  }
-  :host([placement^='left']) .indicator {
-    right: 0;
-  }
-  :host([placement^='right']) .indicator {
-    left: 0;
-  }
-  :host([placement^='top'][variant='primary']) .indicator,
-  :host([placement^='bottom'][variant='primary']) .indicator {
-    height: 0.1875rem;
-  }
-  :host([placement^='top'][variant='secondary']) .indicator,
-  :host([placement^='bottom'][variant='secondary']) .indicator {
-    height: 0.125rem;
-  }
-  :host([placement^='left'][variant='primary']) .indicator,
-  :host([placement^='right'][variant='primary']) .indicator {
-    width: 0.1875rem;
-  }
-  :host([placement^='left'][variant='secondary']) .indicator,
-  :host([placement^='right'][variant='secondary']) .indicator {
-    width: 0.125rem;
-  }
-  :host([placement^='top'][variant='primary']) .indicator {
-    border-top-left-radius: 0.1875rem;
-    border-top-right-radius: 0.1875rem;
-  }
-  :host([placement^='bottom'][variant='primary']) .indicator {
-    border-bottom-right-radius: 0.1875rem;
-    border-bottom-left-radius: 0.1875rem;
-  }
-  :host([placement^='left'][variant='primary']) .indicator {
-    border-top-left-radius: 0.1875rem;
-    border-bottom-left-radius: 0.1875rem;
-  }
-  :host([placement^='right'][variant='primary']) .indicator {
-    border-top-right-radius: 0.1875rem;
-    border-bottom-right-radius: 0.1875rem;
-  }
-  :host([full-width]) ::slotted(mdui-tab) {
-    flex: 1;
-  }
-`;
+export const tabsStyle = css `:host{position:relative;display:flex}:host([placement^=top]){flex-direction:column}:host([placement^=bottom]){flex-direction:column-reverse}:host([placement^=left]){flex-direction:row}:host([placement^=right]){flex-direction:row-reverse}.container{position:relative;display:flex;flex:0 0 auto;overflow-x:auto;background-color:rgb(var(--mdui-color-surface))}:host([placement^=bottom]) .container,:host([placement^=top]) .container{flex-direction:row}:host([placement^=left]) .container,:host([placement^=right]) .container{flex-direction:column}:host([placement$='-start']) .container{justify-content:flex-start}:host([placement=bottom]) .container,:host([placement=left]) .container,:host([placement=right]) .container,:host([placement=top]) .container{justify-content:center}:host([placement$='-end']) .container{justify-content:flex-end}.container::after{content:' ';position:absolute;background-color:rgb(var(--mdui-color-surface-variant))}:host([placement^=bottom]) .container::after,:host([placement^=top]) .container::after{left:0;width:100%;height:.0625rem}:host([placement^=top]) .container::after{bottom:0}:host([placement^=bottom]) .container::after{top:0}:host([placement^=left]) .container::after,:host([placement^=right]) .container::after{top:0;height:100%;width:.0625rem}:host([placement^=left]) .container::after{right:0}:host([placement^=right]) .container::after{left:0}.indicator{position:absolute;z-index:1;background-color:rgb(var(--mdui-color-primary))}.container:not(.initial) .indicator{transition-duration:var(--mdui-motion-duration-medium2);transition-timing-function:var(--mdui-motion-easing-standard-decelerate)}:host([placement^=bottom]) .indicator,:host([placement^=top]) .indicator{transition-property:transform,left,width}:host([placement^=left]) .indicator,:host([placement^=right]) .indicator{transition-property:transform,top,height}:host([placement^=top]) .indicator{bottom:0}:host([placement^=bottom]) .indicator{top:0}:host([placement^=left]) .indicator{right:0}:host([placement^=right]) .indicator{left:0}:host([placement^=bottom][variant=primary]) .indicator,:host([placement^=top][variant=primary]) .indicator{height:.1875rem}:host([placement^=bottom][variant=secondary]) .indicator,:host([placement^=top][variant=secondary]) .indicator{height:.125rem}:host([placement^=left][variant=primary]) .indicator,:host([placement^=right][variant=primary]) .indicator{width:.1875rem}:host([placement^=left][variant=secondary]) .indicator,:host([placement^=right][variant=secondary]) .indicator{width:.125rem}:host([placement^=top][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-top-right-radius:.1875rem}:host([placement^=bottom][variant=primary]) .indicator{border-bottom-right-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=left][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=right][variant=primary]) .indicator{border-top-right-radius:.1875rem;border-bottom-right-radius:.1875rem}:host([full-width]) ::slotted(mdui-tab){flex:1}`;

package/components/tabs/tabs.js

@@ -107,15 +107,7 @@ let Tabs = class Tabs extends MduiElement {
         this.observeResize = observeResize(this.containerRef.value, () => this.updateIndicator());
     }
     render() {
-        return html `<div
-        ${ref(this.containerRef)}
-        part="container"
-        class="container ${classMap({ initial: this.isInitial })}"
-      >
-        <slot @slotchange=${this.onSlotChange} @click=${this.onClick}></slot>
-        <div ${ref(this.indicatorRef)} part="indicator" class="indicator"></div>
-      </div>
-      <slot name="panel" @slotchange=${this.onSlotChange}></slot>`;
+        return html `<div ${ref(this.containerRef)} part="container" class="container ${classMap({ initial: this.isInitial })}"><slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><div ${ref(this.indicatorRef)} part="indicator" class="indicator"></div></div><slot name="panel" @slotchange="${this.onSlotChange}"></slot>`;
     }
     async onSlotChange() {
         await this.definedController.whenDefined();