@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/tabs/internal/_tab.scss

@@ -0,0 +1,295 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../focus/focus-ring';
+@use '../../internal/sass/string-ext';
+@use '../../internal/sass/theme';
+@use '../../ripple/ripple';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $reference: tokens.md-comp-tab-values();
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: theme.create-theme-vars($tokens, '');
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  // contains tokens for all variants and applied where needed
+  $tokens: theme.create-theme-vars(tokens.md-comp-tab-values(), '');
+
+  :host {
+    // apply primary-tokens by default
+    $primary-prefix: 'primary-tab-';
+    @each $token, $value in $tokens {
+      @if string-ext.has-prefix($token, $primary-prefix) {
+        $token: string-ext.trim-prefix(#{$token}, $primary-prefix);
+        --_#{$token}: #{$value};
+      }
+    }
+
+    display: inline-flex;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    vertical-align: middle;
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape': 8px,
+      )
+    );
+  }
+
+  :host([selected]) md-focus-ring {
+    margin-bottom: calc(var(--_active-indicator-height) + 1px);
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    user-select: none;
+    -webkit-appearance: none;
+    vertical-align: middle;
+    background: transparent;
+    text-decoration: none;
+    width: 100%;
+    position: relative;
+    padding: 0;
+    margin: 0;
+    z-index: 0; // Ensure this is a stacking context so the indicator displays
+    font: var(--_label-text-type);
+    background-color: var(--_container-color);
+    border-bottom: var(--_divider-thickness) solid var(--_divider-color);
+    color: var(--_label-text-color);
+
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+  }
+
+  .button,
+  md-ripple {
+    border-radius: var(--_container-shape);
+  }
+
+  .touch {
+    position: absolute;
+    top: 50%;
+    height: 48px;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+  }
+
+  .content {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    $_content-padding: 8px;
+    // tabs are naturally sized up to their max height.
+    max-height: calc(var(--_container-height) + 2 * $_content-padding);
+    // min-height of touch target
+    min-height: 48px;
+    padding: $_content-padding calc(2 * $_content-padding);
+    gap: 4px;
+  }
+
+  .content.inline-icon {
+    flex-direction: row;
+  }
+
+  .indicator {
+    position: absolute;
+    box-sizing: border-box;
+    z-index: -1;
+    transform-origin: bottom left;
+    background: var(--_active-indicator-color);
+    border-radius: var(--_active-indicator-shape);
+    height: var(--_active-indicator-height);
+    inset: auto 0 0 0;
+    // hidden unless the tab is selected
+    opacity: 0;
+  }
+
+  // unselected states
+  .button ::slotted([slot='icon']) {
+    display: inline-flex;
+    position: relative;
+    writing-mode: horizontal-tb;
+    fill: currentColor;
+    color: var(--_icon-color);
+    font-size: var(--_icon-size);
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+  }
+
+  .button:hover {
+    color: var(--_hover-label-text-color);
+    cursor: pointer;
+  }
+
+  .button:hover ::slotted([slot='icon']) {
+    color: var(--_hover-icon-color);
+  }
+
+  .button:focus {
+    color: var(--_focus-label-text-color);
+  }
+
+  .button:focus ::slotted([slot='icon']) {
+    color: var(--_focus-icon-color);
+  }
+
+  .button:active {
+    color: var(--_pressed-label-text-color);
+    outline: none;
+  }
+
+  .button:active ::slotted([slot='icon']) {
+    color: var(--_pressed-icon-color);
+  }
+
+  // selected styling
+  :host([selected]) .indicator {
+    opacity: 1;
+  }
+  :host([selected]) .button {
+    color: var(--_active-label-text-color);
+    @include elevation.theme(
+      (
+        level: var(--_container-elevation),
+      )
+    );
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_active-hover-state-layer-color),
+        hover-opacity: var(--_active-hover-state-layer-opacity),
+        pressed-color: var(--_active-pressed-state-layer-color),
+        pressed-opacity: var(--_active-pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  :host([selected]) .button ::slotted([slot='icon']) {
+    color: var(--_active-icon-color);
+  }
+
+  // selected states
+  :host([selected]) .button:hover {
+    color: var(--_active-hover-label-text-color);
+  }
+
+  :host([selected]) .button:hover ::slotted([slot='icon']) {
+    color: var(--_active-hover-icon-color);
+  }
+
+  :host([selected]) .button:focus {
+    color: var(--_active-focus-label-text-color);
+  }
+
+  :host([selected]) .button:focus ::slotted([slot='icon']) {
+    color: var(--_active-focus-icon-color);
+  }
+
+  :host([selected]) .button:active {
+    color: var(--_active-pressed-label-text-color);
+  }
+
+  :host([selected]) .button:active ::slotted([slot='icon']) {
+    color: var(--_active-pressed-icon-color);
+  }
+
+  // disabled state
+  :host([disabled]) {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  // secondary
+  :host([variant~='secondary']) {
+    // apply secondary-tab tokens
+    $secondary-prefix: 'secondary-tab-';
+    @each $token, $value in $tokens {
+      @if string-ext.has-prefix($token, $secondary-prefix) {
+        $token: string-ext.trim-prefix(#{$token}, $secondary-prefix);
+        --_#{$token}: #{$value};
+      }
+    }
+  }
+
+  :host([variant~='secondary']) .content {
+    width: 100%;
+  }
+
+  :host([variant~='secondary']) .indicator {
+    min-width: 100%;
+  }
+
+  // TODO(b/293506179): remove vertical styles
+  :host([variant~='vertical']) {
+    flex: 0;
+  }
+
+  :host([variant~='vertical']) .button {
+    width: 100%;
+    flex-direction: row;
+    border-bottom: none;
+    border-right: var(--_divider-thickness) solid var(--_divider-color);
+  }
+
+  :host([variant~='vertical']) .content {
+    width: 100%;
+  }
+
+  :host([variant~='vertical']) .indicator {
+    height: 100%;
+    min-width: var(--_active-indicator-height);
+    inset: 0 0 0 auto;
+  }
+
+  :host([variant~='vertical'][variant~='primary']) {
+    --_active-indicator-shape: 9999px 0 0 9999px;
+  }
+
+  :host,
+  ::slotted(*) {
+    white-space: nowrap;
+  }
+
+  @media (forced-colors: active) {
+    :host,
+    :host([variant]) {
+      --_active-indicator-color: CanvasText;
+    }
+  }
+}

package/tabs/internal/_tabs.scss

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Note, there are currently no tokens for tabs. Instead, tabs are entirely
+// themed via primary/secondary tab.
+@mixin styles() {
+  :host {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    overflow: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  // TODO(b/293506179): remove vertical styles
+  :host([variant~='vertical']:not([hidden])) {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0px;
+  }
+
+  :host::-webkit-scrollbar {
+    display: none;
+  }
+
+  ::slotted(*) {
+    flex: 1;
+  }
+
+  // draw selected on top so its indicator can be transitioned from the
+  // previously selected tab, on top of it
+  ::slotted([selected]) {
+    z-index: 1;
+  }
+}

package/tabs/internal/tab-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_active-indicator-color: var(--md-primary-tab-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-primary-tab-active-indicator-height, 3px);--_active-indicator-shape: var(--md-primary-tab-active-indicator-shape, 3px 3px 0px 0px);--_active-hover-state-layer-color: var(--md-primary-tab-active-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_active-hover-state-layer-opacity: var(--md-primary-tab-active-hover-state-layer-opacity, 0.08);--_active-pressed-state-layer-color: var(--md-primary-tab-active-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-state-layer-opacity: var(--md-primary-tab-active-pressed-state-layer-opacity, 0.12);--_container-color: var(--md-primary-tab-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-primary-tab-container-elevation, 0);--_container-height: var(--md-primary-tab-container-height, 48px);--_container-shape: var(--md-primary-tab-container-shape, 0px);--_divider-color: var(--md-primary-tab-divider-color, var(--md-sys-color-outline-variant, #cac4d0));--_divider-thickness: var(--md-primary-tab-divider-thickness, 1px);--_label-text-type: var(--md-primary-tab-label-text-type, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_hover-state-layer-color: var(--md-primary-tab-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-primary-tab-hover-state-layer-opacity, 0.08);--_pressed-state-layer-color: var(--md-primary-tab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-primary-tab-pressed-state-layer-opacity, 0.12);--_active-focus-icon-color: var(--md-primary-tab-active-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_active-hover-icon-color: var(--md-primary-tab-active-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_active-icon-color: var(--md-primary-tab-active-icon-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-icon-color: var(--md-primary-tab-active-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-primary-tab-icon-size, 24px);--_focus-icon-color: var(--md-primary-tab-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-primary-tab-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-color: var(--md-primary-tab-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-primary-tab-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-label-text-color: var(--md-primary-tab-active-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-hover-label-text-color: var(--md-primary-tab-active-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-label-text-color: var(--md-primary-tab-active-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-label-text-color: var(--md-primary-tab-active-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-primary-tab-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-primary-tab-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-color: var(--md-primary-tab-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-primary-tab-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}:host([selected]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;font:var(--_label-text-type);background-color:var(--_container-color);border-bottom:var(--_divider-thickness) solid var(--_divider-color);color:var(--_label-text-color)}.button::-moz-focus-inner{padding:0;border:0}.button,md-ripple{border-radius:var(--_container-shape)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;max-height:calc(var(--_container-height) + 16px);min-height:48px;padding:8px 16px;gap:4px}.content.inline-icon{flex-direction:row}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus{color:var(--_focus-label-text-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([selected]) .indicator{opacity:1}:host([selected]) .button{color:var(--_active-label-text-color);--md-elevation-level:var(--_container-elevation);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([selected]) .button ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([selected]) .button:hover{color:var(--_active-hover-label-text-color)}:host([selected]) .button:hover ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([selected]) .button:focus{color:var(--_active-focus-label-text-color)}:host([selected]) .button:focus ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([selected]) .button:active{color:var(--_active-pressed-label-text-color)}:host([selected]) .button:active ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host([disabled]){cursor:default;pointer-events:none;opacity:.38}:host([variant~=secondary]){--_active-indicator-color: var(--md-secondary-tab-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-secondary-tab-active-indicator-height, 2px);--_active-label-text-color: var(--md-secondary-tab-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-secondary-tab-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-secondary-tab-container-elevation, 0);--_container-height: var(--md-secondary-tab-container-height, 48px);--_container-shape: var(--md-secondary-tab-container-shape, 0px);--_focus-label-text-color: var(--md-secondary-tab-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-secondary-tab-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-secondary-tab-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-secondary-tab-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-secondary-tab-label-text-type, var(--md-sys-typescale-title-small, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-secondary-tab-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-secondary-tab-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-secondary-tab-pressed-state-layer-opacity, 0.12);--_divider-color: var(--md-secondary-tab-divider-color, var(--md-sys-color-outline-variant, #cac4d0));--_divider-thickness: var(--md-secondary-tab-divider-thickness, 1px);--_active-focus-icon-color: ;--_active-focus-label-text-color: var(--md-secondary-tab-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: ;--_active-hover-label-text-color: var(--md-secondary-tab-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-secondary-tab-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-opacity: var(--md-secondary-tab-active-hover-state-layer-opacity, 0.08);--_active-icon-color: var(--md-secondary-tab-active-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_active-indicator-shape: var(--md-secondary-tab-active-indicator-shape, 0);--_active-pressed-icon-color: ;--_active-pressed-label-text-color: var(--md-secondary-tab-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-secondary-tab-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-opacity: var(--md-secondary-tab-active-pressed-state-layer-opacity, 0.12);--_label-text-color: var(--md-secondary-tab-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-secondary-tab-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-secondary-tab-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-secondary-tab-icon-size, 24px);--_icon-color: var(--md-secondary-tab-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-secondary-tab-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([variant~=secondary]) .content{width:100%}:host([variant~=secondary]) .indicator{min-width:100%}:host([variant~=vertical]){flex:0}:host([variant~=vertical]) .button{width:100%;flex-direction:row;border-bottom:none;border-right:var(--_divider-thickness) solid var(--_divider-color)}:host([variant~=vertical]) .content{width:100%}:host([variant~=vertical]) .indicator{height:100%;min-width:var(--_active-indicator-height);inset:0 0 0 auto}:host([variant~=vertical][variant~=primary]){--_active-indicator-shape: 9999px 0 0 9999px}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){:host,:host([variant]){--_active-indicator-color: CanvasText}}/*# sourceMappingURL=tab-styles.css.map */
+`;
+//# sourceMappingURL=tab-styles.css.js.map

package/tabs/internal/tab-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-styles.css.js","sourceRoot":"","sources":["tab-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_active-indicator-color: var(--md-primary-tab-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-primary-tab-active-indicator-height, 3px);--_active-indicator-shape: var(--md-primary-tab-active-indicator-shape, 3px 3px 0px 0px);--_active-hover-state-layer-color: var(--md-primary-tab-active-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_active-hover-state-layer-opacity: var(--md-primary-tab-active-hover-state-layer-opacity, 0.08);--_active-pressed-state-layer-color: var(--md-primary-tab-active-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-state-layer-opacity: var(--md-primary-tab-active-pressed-state-layer-opacity, 0.12);--_container-color: var(--md-primary-tab-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-primary-tab-container-elevation, 0);--_container-height: var(--md-primary-tab-container-height, 48px);--_container-shape: var(--md-primary-tab-container-shape, 0px);--_divider-color: var(--md-primary-tab-divider-color, var(--md-sys-color-outline-variant, #cac4d0));--_divider-thickness: var(--md-primary-tab-divider-thickness, 1px);--_label-text-type: var(--md-primary-tab-label-text-type, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_hover-state-layer-color: var(--md-primary-tab-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-primary-tab-hover-state-layer-opacity, 0.08);--_pressed-state-layer-color: var(--md-primary-tab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-primary-tab-pressed-state-layer-opacity, 0.12);--_active-focus-icon-color: var(--md-primary-tab-active-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_active-hover-icon-color: var(--md-primary-tab-active-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_active-icon-color: var(--md-primary-tab-active-icon-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-icon-color: var(--md-primary-tab-active-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-primary-tab-icon-size, 24px);--_focus-icon-color: var(--md-primary-tab-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-primary-tab-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-color: var(--md-primary-tab-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-primary-tab-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-label-text-color: var(--md-primary-tab-active-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-hover-label-text-color: var(--md-primary-tab-active-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-label-text-color: var(--md-primary-tab-active-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-label-text-color: var(--md-primary-tab-active-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-primary-tab-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-primary-tab-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-color: var(--md-primary-tab-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-primary-tab-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}:host([selected]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;font:var(--_label-text-type);background-color:var(--_container-color);border-bottom:var(--_divider-thickness) solid var(--_divider-color);color:var(--_label-text-color)}.button::-moz-focus-inner{padding:0;border:0}.button,md-ripple{border-radius:var(--_container-shape)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;max-height:calc(var(--_container-height) + 16px);min-height:48px;padding:8px 16px;gap:4px}.content.inline-icon{flex-direction:row}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus{color:var(--_focus-label-text-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([selected]) .indicator{opacity:1}:host([selected]) .button{color:var(--_active-label-text-color);--md-elevation-level:var(--_container-elevation);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([selected]) .button ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([selected]) .button:hover{color:var(--_active-hover-label-text-color)}:host([selected]) .button:hover ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([selected]) .button:focus{color:var(--_active-focus-label-text-color)}:host([selected]) .button:focus ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([selected]) .button:active{color:var(--_active-pressed-label-text-color)}:host([selected]) .button:active ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host([disabled]){cursor:default;pointer-events:none;opacity:.38}:host([variant~=secondary]){--_active-indicator-color: var(--md-secondary-tab-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-secondary-tab-active-indicator-height, 2px);--_active-label-text-color: var(--md-secondary-tab-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-secondary-tab-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-secondary-tab-container-elevation, 0);--_container-height: var(--md-secondary-tab-container-height, 48px);--_container-shape: var(--md-secondary-tab-container-shape, 0px);--_focus-label-text-color: var(--md-secondary-tab-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-secondary-tab-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-secondary-tab-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-secondary-tab-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-secondary-tab-label-text-type, var(--md-sys-typescale-title-small, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-secondary-tab-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-secondary-tab-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-secondary-tab-pressed-state-layer-opacity, 0.12);--_divider-color: var(--md-secondary-tab-divider-color, var(--md-sys-color-outline-variant, #cac4d0));--_divider-thickness: var(--md-secondary-tab-divider-thickness, 1px);--_active-focus-icon-color: ;--_active-focus-label-text-color: var(--md-secondary-tab-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: ;--_active-hover-label-text-color: var(--md-secondary-tab-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-secondary-tab-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-opacity: var(--md-secondary-tab-active-hover-state-layer-opacity, 0.08);--_active-icon-color: var(--md-secondary-tab-active-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_active-indicator-shape: var(--md-secondary-tab-active-indicator-shape, 0);--_active-pressed-icon-color: ;--_active-pressed-label-text-color: var(--md-secondary-tab-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-secondary-tab-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-opacity: var(--md-secondary-tab-active-pressed-state-layer-opacity, 0.12);--_label-text-color: var(--md-secondary-tab-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-secondary-tab-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-secondary-tab-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-secondary-tab-icon-size, 24px);--_icon-color: var(--md-secondary-tab-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-secondary-tab-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([variant~=secondary]) .content{width:100%}:host([variant~=secondary]) .indicator{min-width:100%}:host([variant~=vertical]){flex:0}:host([variant~=vertical]) .button{width:100%;flex-direction:row;border-bottom:none;border-right:var(--_divider-thickness) solid var(--_divider-color)}:host([variant~=vertical]) .content{width:100%}:host([variant~=vertical]) .indicator{height:100%;min-width:var(--_active-indicator-height);inset:0 0 0 auto}:host([variant~=vertical][variant~=primary]){--_active-indicator-shape: 9999px 0 0 9999px}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){:host,:host([variant]){--_active-indicator-color: CanvasText}}/*# sourceMappingURL=tab-styles.css.map */\n`;\n "]}

package/tabs/internal/tab.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * An element that can select items.
+ */
+export interface Tabs extends HTMLElement {
+    selected?: number;
+    selectedItem?: Tab;
+    previousSelectedItem?: Tab;
+}
+/**
+ * Tab variant can be `primary` or `secondary`.
+ */
+export type TabVariant = 'primary' | 'secondary';
+/**
+ * Tab component.
+ */
+export declare class Tab extends LitElement {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * Styling variant to display, 'primary' (default) or 'secondary'.
+     */
+    variant: TabVariant;
+    /**
+     * Whether or not the tab is `disabled`.
+     */
+    disabled: boolean;
+    /**
+     * Whether or not the tab is `selected`.
+     **/
+    selected: boolean;
+    /**
+     * Whether or not the tab is `focusable`.
+     */
+    focusable: boolean;
+    /**
+     * Whether or not the icon renders inline with label or stacked vertically.
+     */
+    inlineIcon: boolean;
+    private readonly button;
+    /**
+     * Selection indicator element.
+     */
+    readonly indicator: HTMLElement;
+    constructor();
+    focus(): void;
+    blur(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected updated(changed: PropertyValues): void;
+    private readonly handleActivationClick;
+    private get tabs();
+    private animateSelected;
+    private getKeyframes;
+}

package/tabs/internal/tab.js

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { dispatchActivationClick, isActivationClick } from '../../internal/controller/events.js';
+/**
+ * Tab component.
+ */
+export class Tab extends LitElement {
+    constructor() {
+        super();
+        /**
+         * Styling variant to display, 'primary' (default) or 'secondary'.
+         */
+        this.variant = 'primary';
+        /**
+         * Whether or not the tab is `disabled`.
+         */
+        this.disabled = false;
+        /**
+         * Whether or not the tab is `selected`.
+         **/
+        this.selected = false;
+        /**
+         * Whether or not the tab is `focusable`.
+         */
+        this.focusable = false;
+        /**
+         * Whether or not the icon renders inline with label or stacked vertically.
+         */
+        this.inlineIcon = false;
+        this.handleActivationClick = (event) => {
+            if (!isActivationClick((event)) || !this.button) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.button);
+        };
+        if (!isServer) {
+            this.addEventListener('click', this.handleActivationClick);
+        }
+    }
+    focus() {
+        this.button?.focus();
+    }
+    blur() {
+        this.button?.blur();
+    }
+    render() {
+        const contentClasses = {
+            'inline-icon': this.inlineIcon,
+        };
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+      <button
+        class="button"
+        role="tab"
+        .tabIndex=${this.focusable && !this.disabled ? 0 : -1}
+        aria-selected=${this.selected ? 'true' : 'false'}
+        ?disabled=${this.disabled}
+        aria-label=${ariaLabel || nothing}
+      >
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
+        <md-elevation></md-elevation>
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <span class="touch"></span>
+        <div class="content ${classMap(contentClasses)}">
+          <slot name="icon"></slot>
+          <span class="label">
+            <slot></slot>
+          </span>
+          <div class="indicator"></div>
+        </div>
+      </button>`;
+    }
+    updated(changed) {
+        if (changed.has('selected') && !this.disabled) {
+            this.animateSelected();
+        }
+    }
+    get tabs() {
+        return this.parentElement;
+    }
+    animateSelected() {
+        this.indicator.getAnimations().forEach(a => {
+            a.cancel();
+        });
+        const frames = this.getKeyframes();
+        if (frames !== null) {
+            this.indicator.animate(frames, { duration: 400, easing: 'ease-out' });
+        }
+    }
+    getKeyframes() {
+        const reduceMotion = shouldReduceMotion();
+        if (!this.selected) {
+            return reduceMotion ? [{ 'opacity': 1 }, { 'transform': 'none' }] : null;
+        }
+        const from = {};
+        // TODO(b/293506179): remove vertical logic
+        const isVertical = false;
+        const fromRect = (this.tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
+            {});
+        const fromPos = isVertical ? fromRect.top : fromRect.left;
+        const fromExtent = isVertical ? fromRect.height : fromRect.width;
+        const toRect = this.indicator.getBoundingClientRect();
+        const toPos = isVertical ? toRect.top : toRect.left;
+        const toExtent = isVertical ? toRect.height : toRect.width;
+        const axis = isVertical ? 'Y' : 'X';
+        const scale = fromExtent / toExtent;
+        if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&
+            !isNaN(scale)) {
+            from['transform'] = `translate${axis}(${(fromPos - toPos).toFixed(4)}px) scale${axis}(${scale.toFixed(4)})`;
+        }
+        else {
+            from['opacity'] = 0;
+        }
+        // note, including `transform: none` avoids quirky Safari behavior
+        // that can hide the animation.
+        return [from, { 'transform': 'none' }];
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(Tab);
+})();
+/** @nocollapse */
+Tab.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+__decorate([
+    property({ reflect: true })
+], Tab.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tab.prototype, "focusable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'inline-icon' })
+], Tab.prototype, "inlineIcon", void 0);
+__decorate([
+    query('.button')
+], Tab.prototype, "button", void 0);
+__decorate([
+    query('.indicator')
+], Tab.prototype, "indicator", void 0);
+function shouldReduceMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+//# sourceMappingURL=tab.js.map

package/tabs/internal/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick} from '../../internal/controller/events.js';\n\n/**\n * An element that can select items.\n */\nexport interface Tabs extends HTMLElement {\n  selected?: number;\n  selectedItem?: Tab;\n  previousSelectedItem?: Tab;\n}\n\n/**\n * Tab variant can be `primary` or `secondary`.\n */\nexport type TabVariant = 'primary'|'secondary';\n\n/**\n * Tab component.\n */\nexport class Tab extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Tab);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /**\n   * Styling variant to display, 'primary' (default) or 'secondary'.\n   */\n  @property({reflect: true}) variant: TabVariant = 'primary';\n\n  /**\n   * Whether or not the tab is `disabled`.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Whether or not the tab is `selected`.\n   **/\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Whether or not the tab is `focusable`.\n   */\n  @property({type: Boolean}) focusable = false;\n\n  /**\n   * Whether or not the icon renders inline with label or stacked vertically.\n   */\n  @property({type: Boolean, attribute: 'inline-icon'}) inlineIcon = false;\n\n  @query('.button') private readonly button!: HTMLElement|null;\n\n  // note, this is public so it can participate in selection animation.\n  /**\n   * Selection indicator element.\n   */\n  @query('.indicator') readonly indicator!: HTMLElement;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n    }\n  }\n\n  override focus() {\n    this.button?.focus();\n  }\n\n  override blur() {\n    this.button?.blur();\n  }\n\n  protected override render() {\n    const contentClasses = {\n      'inline-icon': this.inlineIcon,\n    };\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"button\"\n        role=\"tab\"\n        .tabIndex=${this.focusable && !this.disabled ? 0 : -1}\n        aria-selected=${this.selected ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        aria-label=${ariaLabel || nothing}\n      >\n        <md-focus-ring part=\"focus-ring\" inward></md-focus-ring>\n        <md-elevation></md-elevation>\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <span class=\"touch\"></span>\n        <div class=\"content ${classMap(contentClasses)}\">\n          <slot name=\"icon\"></slot>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n          <div class=\"indicator\"></div>\n        </div>\n      </button>`;\n  }\n\n  protected override updated(changed: PropertyValues) {\n    if (changed.has('selected') && !this.disabled) {\n      this.animateSelected();\n    }\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick((event)) || !this.button) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.button);\n  };\n\n  private get tabs() {\n    return this.parentElement as Tabs;\n  }\n\n  private animateSelected() {\n    this.indicator.getAnimations().forEach(a => {\n      a.cancel();\n    });\n    const frames = this.getKeyframes();\n    if (frames !== null) {\n      this.indicator.animate(frames, {duration: 400, easing: 'ease-out'});\n    }\n  }\n\n  private getKeyframes() {\n    const reduceMotion = shouldReduceMotion();\n    if (!this.selected) {\n      return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;\n    }\n    const from: Keyframe = {};\n    // TODO(b/293506179): remove vertical logic\n    const isVertical = false;\n    const fromRect =\n        (this.tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??\n         ({} as DOMRect));\n    const fromPos = isVertical ? fromRect.top : fromRect.left;\n    const fromExtent = isVertical ? fromRect.height : fromRect.width;\n    const toRect = this.indicator.getBoundingClientRect();\n    const toPos = isVertical ? toRect.top : toRect.left;\n    const toExtent = isVertical ? toRect.height : toRect.width;\n    const axis = isVertical ? 'Y' : 'X';\n    const scale = fromExtent / toExtent;\n    if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&\n        !isNaN(scale)) {\n      from['transform'] = `translate${axis}(${\n          (fromPos - toPos).toFixed(4)}px) scale${axis}(${scale.toFixed(4)})`;\n    } else {\n      from['opacity'] = 0;\n    }\n    // note, including `transform: none` avoids quirky Safari behavior\n    // that can hide the animation.\n    return [from, {'transform': 'none'}];\n  }\n}\n\nfunction shouldReduceMotion() {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}