mdui 2.0.4 → 2.0.5

package/components/switch/style.js

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

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

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

package/components/tabs/tab.js

@@ -77,13 +77,33 @@ 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,2 +1,139 @@
 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^=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}`;
+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;
+  }
+`;

package/components/tabs/tabs.js

@@ -107,7 +107,15 @@ 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();