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

package/tabs/internal/tab.js

@@ -8,88 +8,75 @@ 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 { property, query, queryAssignedElements, queryAssignedNodes, state } 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';
+import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
+import { EASING } from '../../internal/motion/animation.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`.
+         * In SSR, set this to true when an icon is present.
          */
-        this.focusable = false;
+        this.hasIcon = false;
         /**
-         * Whether or not the icon renders inline with label or stacked vertically.
+         * In SSR, set this to true when there is no label and only an icon.
          */
-        this.inlineIcon = false;
-        this.handleActivationClick = (event) => {
-            if (!isActivationClick((event)) || !this.button) {
-                return;
-            }
-            this.focus();
-            dispatchActivationClick(this.button);
-        };
+        this.iconOnly = false;
+        this.fullWidthIndicator = false;
+        this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
         if (!isServer) {
-            this.addEventListener('click', this.handleActivationClick);
+            this.internals.role = 'tab';
+            this.addEventListener('keydown', this.handleKeydown.bind(this));
         }
     }
-    focus() {
-        this.button?.focus();
-    }
-    blur() {
-        this.button?.blur();
-    }
     render() {
-        const contentClasses = {
-            'inline-icon': this.inlineIcon,
-        };
-        // Needed for closure conformance
-        const { ariaLabel } = this;
+        const indicator = html `<div class="indicator"></div>`;
         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>
+      <div class="button" role="presentation">
+        <md-focus-ring part="focus-ring" inward
+            .control=${this}></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>
+        <md-ripple .control=${this}></md-ripple>
+        <div class="content ${classMap(this.getContentClasses())}"
+            role="presentation">
+          <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+          <slot @slotchange=${this.handleSlotChange}></slot>
+          ${this.fullWidthIndicator ? nothing : indicator}
         </div>
-      </button>`;
+        ${this.fullWidthIndicator ? indicator : nothing}
+      </div>`;
+    }
+    getContentClasses() {
+        return {
+            'has-icon': this.hasIcon,
+            'has-label': !this.iconOnly,
+        };
     }
     updated(changed) {
-        if (changed.has('selected') && !this.disabled) {
+        if (changed.has('selected')) {
+            this.internals.ariaSelected = String(this.selected);
             this.animateSelected();
         }
     }
-    get tabs() {
-        return this.parentElement;
+    async handleKeydown(event) {
+        // Allow event to bubble.
+        await 0;
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            // Prevent default behavior such as scrolling when pressing spacebar.
+            event.preventDefault();
+            this.click();
+        }
     }
     animateSelected() {
         this.indicator.getAnimations().forEach(a => {
@@ -97,7 +84,7 @@ export class Tab extends LitElement {
         });
         const frames = this.getKeyframes();
         if (frames !== null) {
-            this.indicator.animate(frames, { duration: 400, easing: 'ease-out' });
+            this.indicator.animate(frames, { duration: 250, easing: EASING.EMPHASIZED });
         }
     }
     getKeyframes() {
@@ -105,21 +92,20 @@ export class Tab extends LitElement {
         if (!this.selected) {
             return reduceMotion ? [{ 'opacity': 1 }, { 'transform': 'none' }] : null;
         }
+        // TODO(b/298105040): avoid hardcoding selector
+        const tabs = this.closest('md-tabs');
         const from = {};
-        // TODO(b/293506179): remove vertical logic
-        const isVertical = false;
-        const fromRect = (this.tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
+        const fromRect = (tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
             {});
-        const fromPos = isVertical ? fromRect.top : fromRect.left;
-        const fromExtent = isVertical ? fromRect.height : fromRect.width;
+        const fromPos = fromRect.left;
+        const fromExtent = 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 toPos = toRect.left;
+        const toExtent = toRect.width;
         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)})`;
+            from['transform'] = `translateX(${(fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
         }
         else {
             from['opacity'] = 0;
@@ -128,33 +114,47 @@ export class Tab extends LitElement {
         // that can hide the animation.
         return [from, { 'transform': 'none' }];
     }
+    handleSlotChange() {
+        this.iconOnly = false;
+        // Check if there's any label text or elements. If not, then there is only
+        // an icon.
+        for (const node of this.assignedDefaultNodes) {
+            const hasTextContent = node.nodeType === Node.TEXT_NODE &&
+                !!node.wholeText.match(/\S/);
+            if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
+                return;
+            }
+        }
+        this.iconOnly = true;
+    }
+    handleIconSlotChange() {
+        this.hasIcon = this.assignedIcons.length > 0;
+    }
 }
 (() => {
-    requestUpdateOnAriaChange(Tab);
+    setupHostAria(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);
+    property({ type: Boolean, attribute: 'has-icon' })
+], Tab.prototype, "hasIcon", void 0);
 __decorate([
-    query('.button')
-], Tab.prototype, "button", void 0);
+    property({ type: Boolean, attribute: 'icon-only' })
+], Tab.prototype, "iconOnly", void 0);
 __decorate([
     query('.indicator')
 ], Tab.prototype, "indicator", void 0);
+__decorate([
+    state()
+], Tab.prototype, "fullWidthIndicator", void 0);
+__decorate([
+    queryAssignedNodes({ flatten: true })
+], Tab.prototype, "assignedDefaultNodes", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], Tab.prototype, "assignedIcons", void 0);
 function shouldReduceMotion() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }

package/tabs/internal/tab.js.map

@@ -1 +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"]}
+{"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, queryAssignedElements, queryAssignedNodes, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';\nimport {EASING} from '../../internal/motion/animation.js';\n\ninterface Tabs extends HTMLElement {\n  selected?: number;\n  selectedItem?: Tab;\n  previousSelectedItem?: Tab;\n}\n\n/**\n * Tab component.\n */\nexport class Tab extends LitElement {\n  static {\n    setupHostAria(Tab);\n  }\n\n  /**\n   * Whether or not the tab is `selected`.\n   **/\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * In SSR, set this to true when an icon is present.\n   */\n  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n  /**\n   * In SSR, set this to true when there is no label and only an icon.\n   */\n  @property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;\n\n  // note, this is public so it can participate in selection animation.\n  /** @private */\n  @query('.indicator') readonly indicator!: HTMLElement;\n  @state() protected fullWidthIndicator = false;\n  @queryAssignedNodes({flatten: true})\n  private readonly assignedDefaultNodes!: Node[];\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n  private readonly internals = polyfillElementInternalsAria(\n      this, (this as HTMLElement /* needed for closure */).attachInternals());\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'tab';\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const indicator = html`<div class=\"indicator\"></div>`;\n    return html`\n      <div class=\"button\" role=\"presentation\">\n        <md-focus-ring part=\"focus-ring\" inward\n            .control=${this}></md-focus-ring>\n        <md-elevation></md-elevation>\n        <md-ripple .control=${this}></md-ripple>\n        <div class=\"content ${classMap(this.getContentClasses())}\"\n            role=\"presentation\">\n          <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n          <slot @slotchange=${this.handleSlotChange}></slot>\n          ${this.fullWidthIndicator ? nothing : indicator}\n        </div>\n        ${this.fullWidthIndicator ? indicator : nothing}\n      </div>`;\n  }\n\n  protected getContentClasses() {\n    return {\n      'has-icon': this.hasIcon,\n      'has-label': !this.iconOnly,\n    };\n  }\n\n  protected override updated(changed: PropertyValues) {\n    if (changed.has('selected')) {\n      this.internals.ariaSelected = String(this.selected);\n      this.animateSelected();\n    }\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      // Prevent default behavior such as scrolling when pressing spacebar.\n      event.preventDefault();\n      this.click();\n    }\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(\n          frames, {duration: 250, easing: EASING.EMPHASIZED});\n    }\n  }\n\n  private getKeyframes() {\n    const reduceMotion = shouldReduceMotion();\n    if (!this.selected) {\n      return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;\n    }\n\n    // TODO(b/298105040): avoid hardcoding selector\n    const tabs = this.closest<Tabs>('md-tabs');\n    const from: Keyframe = {};\n    const fromRect =\n        (tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??\n         ({} as DOMRect));\n    const fromPos = fromRect.left;\n    const fromExtent = fromRect.width;\n    const toRect = this.indicator.getBoundingClientRect();\n    const toPos = toRect.left;\n    const toExtent = toRect.width;\n    const scale = fromExtent / toExtent;\n    if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&\n        !isNaN(scale)) {\n      from['transform'] = `translateX(${\n          (fromPos - toPos).toFixed(4)}px) scaleX(${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  private handleSlotChange() {\n    this.iconOnly = false;\n    // Check if there's any label text or elements. If not, then there is only\n    // an icon.\n    for (const node of this.assignedDefaultNodes) {\n      const hasTextContent = node.nodeType === Node.TEXT_NODE &&\n          !!(node as Text).wholeText.match(/\\S/);\n      if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {\n        return;\n      }\n    }\n\n    this.iconOnly = true;\n  }\n\n  private handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\nfunction shouldReduceMotion() {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `: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}:host([variant~=vertical]:not([hidden])){display:inline-flex;flex-direction:column;align-items:stretch;gap:0px}:host::-webkit-scrollbar{display:none}::slotted(*){flex:1}::slotted([selected]){z-index:1}/*# sourceMappingURL=tabs-styles.css.map */
+export const styles = css `:host{box-sizing:border-box;display:flex;flex-direction:column;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;position:relative}:host([hidden]){display:none}:host::-webkit-scrollbar{display:none}.tabs{align-items:end;display:flex;height:100%;justify-content:space-between;width:100%}::slotted(*){flex:1}::slotted([selected]){z-index:1}/*# sourceMappingURL=tabs-styles.css.map */
 `;
 //# sourceMappingURL=tabs-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs-styles.css.js","sourceRoot":"","sources":["tabs-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{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}:host([variant~=vertical]:not([hidden])){display:inline-flex;flex-direction:column;align-items:stretch;gap:0px}:host::-webkit-scrollbar{display:none}::slotted(*){flex:1}::slotted([selected]){z-index:1}/*# sourceMappingURL=tabs-styles.css.map */\n`;\n "]}
+{"version":3,"file":"tabs-styles.css.js","sourceRoot":"","sources":["tabs-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{box-sizing:border-box;display:flex;flex-direction:column;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;position:relative}:host([hidden]){display:none}:host::-webkit-scrollbar{display:none}.tabs{align-items:end;display:flex;height:100%;justify-content:space-between;width:100%}::slotted(*){flex:1}::slotted([selected]){z-index:1}/*# sourceMappingURL=tabs-styles.css.map */\n`;\n "]}

package/tabs/internal/tabs.d.ts

@@ -3,8 +3,9 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import '../../divider/divider.js';
 import { LitElement, PropertyValues } from 'lit';
-import { Tab, TabVariant } from './tab.js';
+import { Tab } from './tab.js';
 /**
  * @fires change Fired when the selected tab changes. The target's selected or
  * selectedItem and previousSelected or previousSelectedItem provide information
@@ -30,20 +31,6 @@ import { Tab, TabVariant } from './tab.js';
  *
  */
 export declare class Tabs extends LitElement {
-    /** @nocollapse */
-    static readonly shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    /**
-     * Styling variant to display, 'primary' (default) or 'secondary'.
-     */
-    variant: TabVariant;
-    /**
-     * Whether or not the item is `disabled`.
-     */
-    disabled: boolean;
     /**
      * Index of the selected item.
      */
@@ -54,9 +41,9 @@ export declare class Tabs extends LitElement {
     selectOnFocus: boolean;
     private previousSelected;
     private readonly scrollMargin;
-    private readonly items;
+    private readonly maybeTabItems;
+    private get items();
     private itemsDirty;
-    private readonly selectedAttribute;
     /**
      * The item currently selected.
      */
@@ -68,13 +55,12 @@ export declare class Tabs extends LitElement {
     /**
      * The item currently focused.
      */
-    protected get focusedItem(): Tab;
+    private get focusedItem();
+    private readonly internals;
     constructor();
-    connectedCallback(): void;
     private readonly handleKeydown;
     private readonly handleKeyup;
     private readonly handleFocusout;
-    private findFocusableItem;
     private wasEventPrevented;
     private dispatchInteraction;
     protected willUpdate(changed: PropertyValues): void;

package/tabs/internal/tabs.js

@@ -4,13 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
+import '../../divider/divider.js';
 import { html, isServer, LitElement } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
-// TODO(b/293506179): remove vertical logic
+import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
+import { Tab } from './tab.js';
 const NAVIGATION_KEYS = new Map([
     ['default', new Set(['Home', 'End'])],
     ['horizontal', new Set(['ArrowLeft', 'ArrowRight'])],
-    ['vertical', new Set(['ArrowUp', 'ArrowDown'])]
 ]);
 /**
  * @fires change Fired when the selected tab changes. The target's selected or
@@ -37,6 +38,9 @@ const NAVIGATION_KEYS = new Map([
  *
  */
 export class Tabs extends LitElement {
+    get items() {
+        return this.maybeTabItems.filter(isTab);
+    }
     /**
      * The item currently selected.
      */
@@ -57,14 +61,6 @@ export class Tabs extends LitElement {
     }
     constructor() {
         super();
-        /**
-         * Styling variant to display, 'primary' (default) or 'secondary'.
-         */
-        this.variant = 'primary';
-        /**
-         * Whether or not the item is `disabled`.
-         */
-        this.disabled = false;
         /**
          * Index of the selected item.
          */
@@ -78,15 +74,14 @@ export class Tabs extends LitElement {
         // this tracks if items have changed, which triggers rendering so they can
         // be kept in sync
         this.itemsDirty = false;
-        this.selectedAttribute = `selected`;
+        this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
         // focus item on keydown and optionally select it
         this.handleKeydown = async (event) => {
             const { key } = event;
             const shouldHandleKey = NAVIGATION_KEYS.get('default').has(key) ||
                 NAVIGATION_KEYS.get('horizontal').has(key);
             // await to after user may cancel event.
-            if (!shouldHandleKey || (await this.wasEventPrevented(event, true)) ||
-                this.disabled) {
+            if (!shouldHandleKey || (await this.wasEventPrevented(event, true))) {
                 return;
             }
             let indexToFocus = -1;
@@ -105,8 +100,7 @@ export class Tabs extends LitElement {
                 indexToFocus =
                     indexToFocus < 0 ? itemCount - 1 : indexToFocus % itemCount;
             }
-            const itemToFocus = this.findFocusableItem(indexToFocus, key === 'End' || isPrevKey);
-            indexToFocus = this.items.indexOf(itemToFocus);
+            const itemToFocus = this.items[indexToFocus];
             if (itemToFocus !== null && itemToFocus !== focused) {
                 this.updateFocusableItem(itemToFocus);
                 itemToFocus.focus();
@@ -129,29 +123,12 @@ export class Tabs extends LitElement {
             }
         };
         if (!isServer) {
+            this.internals.role = 'tablist';
             this.addEventListener('keydown', this.handleKeydown);
             this.addEventListener('keyup', this.handleKeyup);
             this.addEventListener('focusout', this.handleFocusout);
         }
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('role', 'tablist');
-    }
-    findFocusableItem(i = -1, prev = false, tries = 0) {
-        const itemCount = this.items.length - 1;
-        while (this.items[i]?.disabled && tries <= itemCount) {
-            tries++;
-            i = (i + (prev ? -1 : 1));
-            if (i > itemCount) {
-                return this.findFocusableItem(0, false, tries);
-            }
-            else if (i < 0) {
-                return this.findFocusableItem(itemCount, true, tries);
-            }
-        }
-        return this.items[i] ?? null;
-    }
     // Note, this is async to allow the event to bubble to user code, which
     // may call `preventDefault`. If it does, avoid performing the tabs action
     // which is selecting a new tab. Sometimes, the native event must be
@@ -200,19 +177,17 @@ export class Tabs extends LitElement {
         }
     }
     async updated(changed) {
-        const itemsOrVariantChanged = changed.has('itemsDirty') || changed.has('variant');
+        const itemsChanged = changed.has('itemsDirty');
         // sync state with items.
-        if (itemsOrVariantChanged || changed.has('disabled')) {
+        if (itemsChanged) {
             this.items.forEach((item, i) => {
                 item.selected = this.selected === i;
-                item.variant = this.variant;
-                item.disabled = this.disabled;
             });
         }
-        if (itemsOrVariantChanged || changed.has('selected')) {
+        if (itemsChanged || changed.has('selected')) {
             if (this.previousSelectedItem !== this.selectedItem) {
-                this.previousSelectedItem?.removeAttribute(this.selectedAttribute);
-                this.selectedItem?.setAttribute(this.selectedAttribute, '');
+                this.previousSelectedItem?.removeAttribute('selected');
+                this.selectedItem?.setAttribute('selected', '');
             }
             if (this.selectedItem !== this.focusedItem) {
                 this.updateFocusableItem(this.selectedItem);
@@ -222,12 +197,15 @@ export class Tabs extends LitElement {
     }
     updateFocusableItem(focusableItem) {
         for (const item of this.items) {
-            item.focusable = item === focusableItem;
+            item.tabIndex = item === focusableItem ? 0 : -1;
         }
     }
     render() {
         return html `
-      <slot @slotchange=${this.handleSlotChange} @click=${this.handleItemClick}></slot>
+      <div class="tabs">
+        <slot @slotchange=${this.handleSlotChange} @click=${this.handleItemClick}></slot>
+      </div>
+      <md-divider part="divider"></md-divider>
     `;
     }
     async handleItemClick(event) {
@@ -262,36 +240,22 @@ export class Tabs extends LitElement {
         }
         // wait for items to render.
         await this.itemsUpdateComplete();
-        // TODO(b/293506179): remove vertical logic
-        const isVertical = false;
-        const offset = isVertical ? item.offsetTop : item.offsetLeft;
-        const extent = isVertical ? item.offsetHeight : item.offsetWidth;
-        const scroll = isVertical ? this.scrollTop : this.scrollLeft;
-        const hostExtent = isVertical ? this.offsetHeight : this.offsetWidth;
+        const offset = item.offsetLeft;
+        const extent = item.offsetWidth;
+        const scroll = this.scrollLeft;
+        const hostExtent = this.offsetWidth;
         const min = offset - this.scrollMargin;
         const max = offset + extent - hostExtent + this.scrollMargin;
         const to = Math.min(min, Math.max(max, scroll));
         const behavior = 
         // type annotation because `instant` is valid but not included in type.
         this.focusedItem !== undefined ? 'smooth' : 'instant';
-        this.scrollTo({
-            behavior,
-            [isVertical ? 'left' : 'top']: 0,
-            [isVertical ? 'top' : 'left']: to
-        });
+        this.scrollTo({ behavior, top: 0, left: to });
     }
 }
-/** @nocollapse */
-Tabs.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true
-};
-__decorate([
-    property({ reflect: true })
-], Tabs.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean })
-], Tabs.prototype, "disabled", void 0);
+(() => {
+    setupHostAria(Tabs, { focusable: false });
+})();
 __decorate([
     property({ type: Number })
 ], Tabs.prototype, "selected", void 0);
@@ -299,9 +263,12 @@ __decorate([
     property({ type: Boolean, attribute: 'select-on-focus' })
 ], Tabs.prototype, "selectOnFocus", void 0);
 __decorate([
-    queryAssignedElements({ selector: 'md-tab', flatten: true })
-], Tabs.prototype, "items", void 0);
+    queryAssignedElements({ flatten: true })
+], Tabs.prototype, "maybeTabItems", void 0);
 __decorate([
     state()
 ], Tabs.prototype, "itemsDirty", void 0);
+function isTab(element) {
+    return element instanceof Tab;
+}
 //# sourceMappingURL=tabs.js.map