@api-client/ui 0.3.1 → 0.3.3

package/build/src/md/tabs/internals/Tabs.js

@@ -1,9 +1,10 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { html, LitElement, nothing } from 'lit';
+import { html, LitElement } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { Easing } from '../../motion/animation.js';
+import UiTab from './Tab.js';
 import '../../icon-button/ui-icon-button.js';
 import '../../divider/ui-divider.js';
 import '../../icons/ui-icon.js';
@@ -18,27 +19,21 @@ export function calcPercent(w, w0) {
 }
 let UiTabs = (() => {
     let _classSuper = LitElement;
-    let _assignedElements_decorators;
-    let _assignedElements_initializers = [];
-    let _assignedElements_extraInitializers = [];
+    let _tabs_decorators;
+    let _tabs_initializers = [];
+    let _tabs_extraInitializers = [];
+    let _tabsScrollerElement_decorators;
+    let _tabsScrollerElement_initializers = [];
+    let _tabsScrollerElement_extraInitializers = [];
+    let _slotElement_decorators;
+    let _slotElement_initializers = [];
+    let _slotElement_extraInitializers = [];
     let _pointer_decorators;
     let _pointer_initializers = [];
     let _pointer_extraInitializers = [];
-    let _content_decorators;
-    let _content_initializers = [];
-    let _content_extraInitializers = [];
     let _priority_decorators;
     let _priority_initializers = [];
     let _priority_extraInitializers = [];
-    let _scrollable_decorators;
-    let _scrollable_initializers = [];
-    let _scrollable_extraInitializers = [];
-    let _selected_decorators;
-    let _selected_initializers = [];
-    let _selected_extraInitializers = [];
-    let _selectedAttribute_decorators;
-    let _selectedAttribute_initializers = [];
-    let _selectedAttribute_extraInitializers = [];
     let _pointerStyles_decorators;
     let _pointerStyles_initializers = [];
     let _pointerStyles_extraInitializers = [];
@@ -48,87 +43,112 @@ let UiTabs = (() => {
     let _isVisible_decorators;
     let _isVisible_initializers = [];
     let _isVisible_extraInitializers = [];
+    let _autoActivate_decorators;
+    let _autoActivate_initializers = [];
+    let _autoActivate_extraInitializers = [];
     return class UiTabs extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _assignedElements_decorators = [queryAssignedElements({ flatten: true })];
+            _tabs_decorators = [queryAssignedElements({ flatten: true, selector: 'ui-tab' })];
+            _tabsScrollerElement_decorators = [query('.tabs')];
+            _slotElement_decorators = [query('slot')];
             _pointer_decorators = [query('.pointer')];
-            _content_decorators = [query('.content')];
             _priority_decorators = [property({ type: String, reflect: true })];
-            _scrollable_decorators = [property({ type: Boolean })];
-            _selected_decorators = [property({ type: String })];
-            _selectedAttribute_decorators = [property({ type: String })];
             _pointerStyles_decorators = [state()];
             _indicated_decorators = [state()];
             _isVisible_decorators = [state()];
-            __esDecorate(this, null, _assignedElements_decorators, { kind: "accessor", name: "assignedElements", static: false, private: false, access: { has: obj => "assignedElements" in obj, get: obj => obj.assignedElements, set: (obj, value) => { obj.assignedElements = value; } }, metadata: _metadata }, _assignedElements_initializers, _assignedElements_extraInitializers);
+            _autoActivate_decorators = [property({ type: Boolean })];
+            __esDecorate(this, null, _tabs_decorators, { kind: "accessor", name: "tabs", static: false, private: false, access: { has: obj => "tabs" in obj, get: obj => obj.tabs, set: (obj, value) => { obj.tabs = value; } }, metadata: _metadata }, _tabs_initializers, _tabs_extraInitializers);
+            __esDecorate(this, null, _tabsScrollerElement_decorators, { kind: "accessor", name: "tabsScrollerElement", static: false, private: false, access: { has: obj => "tabsScrollerElement" in obj, get: obj => obj.tabsScrollerElement, set: (obj, value) => { obj.tabsScrollerElement = value; } }, metadata: _metadata }, _tabsScrollerElement_initializers, _tabsScrollerElement_extraInitializers);
+            __esDecorate(this, null, _slotElement_decorators, { kind: "accessor", name: "slotElement", static: false, private: false, access: { has: obj => "slotElement" in obj, get: obj => obj.slotElement, set: (obj, value) => { obj.slotElement = value; } }, metadata: _metadata }, _slotElement_initializers, _slotElement_extraInitializers);
             __esDecorate(this, null, _pointer_decorators, { kind: "accessor", name: "pointer", static: false, private: false, access: { has: obj => "pointer" in obj, get: obj => obj.pointer, set: (obj, value) => { obj.pointer = value; } }, metadata: _metadata }, _pointer_initializers, _pointer_extraInitializers);
-            __esDecorate(this, null, _content_decorators, { kind: "accessor", name: "content", static: false, private: false, access: { has: obj => "content" in obj, get: obj => obj.content, set: (obj, value) => { obj.content = value; } }, metadata: _metadata }, _content_initializers, _content_extraInitializers);
             __esDecorate(this, null, _priority_decorators, { kind: "accessor", name: "priority", static: false, private: false, access: { has: obj => "priority" in obj, get: obj => obj.priority, set: (obj, value) => { obj.priority = value; } }, metadata: _metadata }, _priority_initializers, _priority_extraInitializers);
-            __esDecorate(this, null, _scrollable_decorators, { kind: "accessor", name: "scrollable", static: false, private: false, access: { has: obj => "scrollable" in obj, get: obj => obj.scrollable, set: (obj, value) => { obj.scrollable = value; } }, metadata: _metadata }, _scrollable_initializers, _scrollable_extraInitializers);
-            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
-            __esDecorate(this, null, _selectedAttribute_decorators, { kind: "accessor", name: "selectedAttribute", static: false, private: false, access: { has: obj => "selectedAttribute" in obj, get: obj => obj.selectedAttribute, set: (obj, value) => { obj.selectedAttribute = value; } }, metadata: _metadata }, _selectedAttribute_initializers, _selectedAttribute_extraInitializers);
             __esDecorate(this, null, _pointerStyles_decorators, { kind: "accessor", name: "pointerStyles", static: false, private: false, access: { has: obj => "pointerStyles" in obj, get: obj => obj.pointerStyles, set: (obj, value) => { obj.pointerStyles = value; } }, metadata: _metadata }, _pointerStyles_initializers, _pointerStyles_extraInitializers);
             __esDecorate(this, null, _indicated_decorators, { kind: "accessor", name: "indicated", static: false, private: false, access: { has: obj => "indicated" in obj, get: obj => obj.indicated, set: (obj, value) => { obj.indicated = value; } }, metadata: _metadata }, _indicated_initializers, _indicated_extraInitializers);
             __esDecorate(this, null, _isVisible_decorators, { kind: "accessor", name: "isVisible", static: false, private: false, access: { has: obj => "isVisible" in obj, get: obj => obj.isVisible, set: (obj, value) => { obj.isVisible = value; } }, metadata: _metadata }, _isVisible_initializers, _isVisible_extraInitializers);
+            __esDecorate(this, null, _autoActivate_decorators, { kind: "accessor", name: "autoActivate", static: false, private: false, access: { has: obj => "autoActivate" in obj, get: obj => obj.autoActivate, set: (obj, value) => { obj.autoActivate = value; } }, metadata: _metadata }, _autoActivate_initializers, _autoActivate_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        items = [];
         activeItem = null;
         previousItem = null;
-        #assignedElements_accessor_storage = __runInitializers(this, _assignedElements_initializers, void 0);
-        get assignedElements() { return this.#assignedElements_accessor_storage; }
-        set assignedElements(value) { this.#assignedElements_accessor_storage = value; }
-        #pointer_accessor_storage = (__runInitializers(this, _assignedElements_extraInitializers), __runInitializers(this, _pointer_initializers, void 0));
-        get pointer() { return this.#pointer_accessor_storage; }
-        set pointer(value) { this.#pointer_accessor_storage = value; }
-        #content_accessor_storage = (__runInitializers(this, _pointer_extraInitializers), __runInitializers(this, _content_initializers, void 0));
-        get content() { return this.#content_accessor_storage; }
-        set content(value) { this.#content_accessor_storage = value; }
-        #priority_accessor_storage = (__runInitializers(this, _content_extraInitializers), __runInitializers(this, _priority_initializers, 'primary'
         /**
-         * If true, tabs are scrollable and the tab width is based on the label width.
-         * @attribute
+         * The currently selected tab, `null` only when there are no tab children.
          */
-        ));
-        /**
-         * The priority of the tabs.
-         *
-         * @default primary
-         * @attribute
-         */
-        get priority() { return this.#priority_accessor_storage; }
-        set priority(value) { this.#priority_accessor_storage = value; }
-        #scrollable_accessor_storage = (__runInitializers(this, _priority_extraInitializers), __runInitializers(this, _scrollable_initializers, void 0));
+        get activeTab() {
+            return this.tabs.find((tab) => tab.selected) ?? null;
+        }
+        set activeTab(tab) {
+            // Ignore setting activeTab to null. As long as there are children, one tab
+            // must be selected.
+            if (tab) {
+                this.activateTab(tab);
+            }
+        }
         /**
-         * If true, tabs are scrollable and the tab width is based on the label width.
-         * @attribute
+         * The index of the currently selected tab.
          */
-        get scrollable() { return this.#scrollable_accessor_storage; }
-        set scrollable(value) { this.#scrollable_accessor_storage = value; }
-        #selected_accessor_storage = (__runInitializers(this, _scrollable_extraInitializers), __runInitializers(this, _selected_initializers, void 0));
+        get activeTabIndex() {
+            return this.tabs.findIndex((tab) => tab.selected);
+        }
         /**
-         * The value of the selected tab.
-         * This is matched with the `aria-controls` of the tab.
-         * @attribute
+         * Sets the active tab by index.
          */
-        get selected() { return this.#selected_accessor_storage; }
-        set selected(value) { this.#selected_accessor_storage = value; }
-        #selectedAttribute_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _selectedAttribute_initializers, `aria-controls`));
+        set activeTabIndex(index) {
+            const activateTabAtIndex = () => {
+                const tab = this.tabs[index];
+                // Ignore out-of-bound indices.
+                if (tab) {
+                    this.activateTab(tab);
+                }
+            };
+            if (!this.slotElement) {
+                // This is needed to support setting the activeTabIndex via a lit property
+                // binding.
+                //
+                // ```ts
+                // html`
+                //   <md-tabs .activeTabIndex=${1}>
+                //     <md-tab>First</md-tab>
+                //     <md-tab>Second</md-tab>
+                //   </md-tabs>
+                // `;
+                // ```
+                //
+                // It's needed since lit's rendering lifecycle is asynchronous, and the
+                // `<slot>` element hasn't rendered, so `tabs` is empty.
+                this.updateComplete.then(activateTabAtIndex);
+                return;
+            }
+            activateTabAtIndex();
+        }
+        get focusedTab() {
+            return this.tabs.find((tab) => tab.matches(':focus-within'));
+        }
+        #tabs_accessor_storage = __runInitializers(this, _tabs_initializers, void 0);
+        get tabs() { return this.#tabs_accessor_storage; }
+        set tabs(value) { this.#tabs_accessor_storage = value; }
+        #tabsScrollerElement_accessor_storage = (__runInitializers(this, _tabs_extraInitializers), __runInitializers(this, _tabsScrollerElement_initializers, void 0));
+        get tabsScrollerElement() { return this.#tabsScrollerElement_accessor_storage; }
+        set tabsScrollerElement(value) { this.#tabsScrollerElement_accessor_storage = value; }
+        #slotElement_accessor_storage = (__runInitializers(this, _tabsScrollerElement_extraInitializers), __runInitializers(this, _slotElement_initializers, void 0));
+        get slotElement() { return this.#slotElement_accessor_storage; }
+        set slotElement(value) { this.#slotElement_accessor_storage = value; }
+        #pointer_accessor_storage = (__runInitializers(this, _slotElement_extraInitializers), __runInitializers(this, _pointer_initializers, void 0));
+        get pointer() { return this.#pointer_accessor_storage; }
+        set pointer(value) { this.#pointer_accessor_storage = value; }
+        #priority_accessor_storage = (__runInitializers(this, _pointer_extraInitializers), __runInitializers(this, _priority_initializers, 'primary'));
         /**
-         * The attribute on the `ui-tab` that indicates which value for `selected`
-         * corresponds to which tab.
+         * The priority of the tabs.
          *
-         * @default aria-controls
+         * @default primary
          * @attribute
          */
-        get selectedAttribute() { return this.#selectedAttribute_accessor_storage; }
-        set selectedAttribute(value) { this.#selectedAttribute_accessor_storage = value; }
-        #pointerStyles_accessor_storage = (__runInitializers(this, _selectedAttribute_extraInitializers), __runInitializers(this, _pointerStyles_initializers, void 0));
+        get priority() { return this.#priority_accessor_storage; }
+        set priority(value) { this.#priority_accessor_storage = value; }
+        #pointerStyles_accessor_storage = (__runInitializers(this, _priority_extraInitializers), __runInitializers(this, _pointerStyles_initializers, void 0));
         get pointerStyles() { return this.#pointerStyles_accessor_storage; }
         set pointerStyles(value) { this.#pointerStyles_accessor_storage = value; }
-        contentScroll = __runInitializers(this, _pointerStyles_extraInitializers);
-        #indicated_accessor_storage = __runInitializers(this, _indicated_initializers, false);
+        #indicated_accessor_storage = (__runInitializers(this, _pointerStyles_extraInitializers), __runInitializers(this, _indicated_initializers, false));
         get indicated() { return this.#indicated_accessor_storage; }
         set indicated(value) { this.#indicated_accessor_storage = value; }
         observer = __runInitializers(this, _indicated_extraInitializers);
@@ -139,12 +159,23 @@ let UiTabs = (() => {
          */
         get isVisible() { return this.#isVisible_accessor_storage; }
         set isVisible(value) { this.#isVisible_accessor_storage = value; }
+        #autoActivate_accessor_storage = (__runInitializers(this, _isVisible_extraInitializers), __runInitializers(this, _autoActivate_initializers, false));
+        /**
+         * Whether or not to automatically select a tab when it is focused.
+         */
+        get autoActivate() { return this.#autoActivate_accessor_storage; }
+        set autoActivate(value) { this.#autoActivate_accessor_storage = value; }
+        internals = (__runInitializers(this, _autoActivate_extraInitializers), this.attachInternals());
         constructor() {
             super();
+            this.internals.role = 'tablist';
             this.observer = new IntersectionObserver(this.intersectionCallback.bind(this), {
                 threshold: 1.0,
                 rootMargin: '0px',
             });
+            this.addEventListener('keydown', this.handleKeydown.bind(this));
+            this.addEventListener('keyup', this.handleKeyup.bind(this));
+            this.addEventListener('focusout', this.handleFocusout.bind(this));
         }
         willUpdate(cp) {
             if (cp.has('isVisible')) {
@@ -154,10 +185,10 @@ let UiTabs = (() => {
         }
         connectedCallback() {
             super.connectedCallback();
+            this.observer.observe(this);
             if (!this.hasAttribute('role')) {
                 this.setAttribute('role', 'tablist');
             }
-            this.observer.observe(this);
         }
         disconnectedCallback() {
             super.disconnectedCallback();
@@ -167,97 +198,28 @@ let UiTabs = (() => {
             const [entry] = entries;
             this.isVisible = entry.isIntersecting;
         }
-        async updateItems() {
-            const elements = this.assignedElements || [];
-            const items = elements.filter(this.isTabItem, this);
-            this.items = items;
-            if (this.activeItem && !items.includes(this.activeItem)) {
-                this.activeItem = null;
-            }
-            await this.updateComplete;
-            this.ensureSelection();
-        }
         /**
-         * @return Whether the given element is a list item element.
+         * Scrolls the toolbar, if overflowing, to the active tab, or the provided
+         * tab.
+         *
+         * @param tabToScrollTo The tab that should be scrolled to. Defaults to the
+         *     active tab.
+         * @return A Promise that resolves after the tab has been scrolled to.
          */
-        isTabItem(element) {
-            if (element.nodeType !== Node.ELEMENT_NODE) {
-                return false;
-            }
-            return element.localName === 'ui-tab';
-        }
-        isSelectable(element) {
-            if (element.disabled) {
-                return false;
-            }
-            if (element.hidden && element.hasAttribute('hidden')) {
-                return false;
-            }
-            return true;
-        }
-        ensureSelection() {
-            const { selected, selectedAttribute, activeItem, items } = this;
-            if (!selectedAttribute) {
-                return;
-            }
-            const item = items.find((i) => i.getAttribute(selectedAttribute) === selected);
-            if (item && item === activeItem) {
-                return;
-            }
-            this.makeSelection(item);
-        }
-        makeSelection(tab, focus = false) {
-            const { activeItem } = this;
-            if (activeItem === tab) {
-                tab.highlight();
-                return;
-            }
-            this.previousItem = activeItem;
-            if (activeItem) {
-                this.deselectItem(activeItem);
-            }
-            if (tab) {
-                this.selectItem(tab, focus);
-                this.positionPointer(tab, activeItem);
-                if (this.activeItem) {
-                    // we set this here so we won't notify selection when initializing.
-                    this.notifySelect(tab);
-                }
-            }
-        }
-        notifySelect(item) {
-            const index = this.items.indexOf(item);
-            if (index === -1) {
+        async scrollToTab(tabToScrollTo) {
+            await this.updateComplete;
+            const { tabs } = this;
+            tabToScrollTo ??= this.activeTab;
+            if (!tabToScrollTo || !tabs.includes(tabToScrollTo) || !this.tabsScrollerElement) {
                 return;
             }
-            const attrValue = item.getAttribute(this.selectedAttribute);
-            this.dispatchEvent(new CustomEvent('select', {
-                detail: {
-                    item,
-                    index,
-                    select: attrValue,
-                },
-            }));
-        }
-        selectItem(tab, focus = false) {
-            this.activeItem = tab;
-            if (this.hasAttribute('tabindex')) {
-                this.removeAttribute('tabindex');
-            }
-            tab.setAttribute('aria-selected', 'true');
-            tab.setAttribute('tabindex', '0');
-            tab.selected = true;
-            tab.priority = this.priority;
-            tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' });
-            if (focus) {
-                tab.focus();
-            }
-        }
-        deselectItem(tab) {
-            tab.setAttribute('aria-selected', 'false');
-            tab.setAttribute('tabindex', '-1');
-            tab.selected = false;
-            tab.indicated = false;
+            // wait for tabs to render.
+            await Promise.all(tabs.map((tab) => tab.updateComplete));
+            tabToScrollTo.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+                behavior: !this.focusedTab ? 'instant' : 'auto',
+            });
         }
         handleVisibility() {
             const { previousItem, activeItem } = this;
@@ -267,11 +229,12 @@ let UiTabs = (() => {
             this.positionPointer(activeItem, previousItem);
         }
         async positionPointer(tab, old) {
-            const { items, pointer, isVisible } = this;
+            const { pointer, isVisible } = this;
             if (!isVisible) {
+                tab.indicated = true;
                 return;
             }
-            const index = items.indexOf(tab);
+            const index = this.tabs.indexOf(tab);
             if (index < 0 || !pointer) {
                 this.pointerStyles = undefined;
                 return;
@@ -282,27 +245,29 @@ let UiTabs = (() => {
                 return;
             }
             const isPrimary = this.priority === 'primary';
-            const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);
-            if (this.pointerStyles && this.pointerStyles.left === `${final}px`) {
+            const final = this.getTabSizing(tab);
+            if (this.pointerStyles && this.pointerStyles.left === `${final.left}px`) {
+                tab.indicated = true;
                 return;
             }
             // first position this indicator in the place of the old one.
             // update the view and then run the animation.
             this.indicated = true;
-            const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old);
-            this.pointerStyles = { left };
+            const starting = this.getTabSizing(old);
+            this.pointerStyles = { left: `${starting.left}px`, width: `${starting.width}px` };
             await this.updateComplete;
-            const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final);
+            const frames = isPrimary ? this.getPrimaryKeyframes(starting, final) : this.getSecondaryKeyframes(starting, final);
             if (this.moveAnimation) {
                 this.moveAnimation.cancel();
             }
             const moveAnimation = pointer.animate(frames, {
-                duration: 360,
+                duration: 200,
                 iterations: 1,
-                easing: Easing.DECELERATION,
+                easing: Easing.EMPHASIZED_DECELERATE,
             });
             const finalStyles = {
-                left: `${final}px`,
+                left: `${final.left}px`,
+                width: `${final.width}px`,
             };
             moveAnimation.addEventListener('finish', () => {
                 this.pointerStyles = finalStyles;
@@ -315,186 +280,180 @@ let UiTabs = (() => {
             });
             this.moveAnimation = moveAnimation;
         }
-        moveAnimation = __runInitializers(this, _isVisible_extraInitializers);
-        getPrimaryLeft(tab) {
-            const contentBox = this.content.getBoundingClientRect();
-            const tabRect = tab.getBoundingClientRect();
-            const leftFromParent = tabRect.x - contentBox.x;
-            const offset = this.scrollable ? 48 : 0; // left button
-            const left = leftFromParent + tabRect.width / 2 - 20 + offset;
-            return `${left}px`;
-        }
-        getSecondaryLeft(tab) {
-            const contentBox = this.content.getBoundingClientRect();
-            const tabRect = tab.getBoundingClientRect();
-            const offset = this.scrollable ? 48 : 0; // left button
-            const leftFromParent = tabRect.x - contentBox.x + offset;
-            return `${leftFromParent}px`;
+        moveAnimation;
+        getTabSizing(tab) {
+            const contentBox = this.tabsScrollerElement.getBoundingClientRect();
+            const sizing = tab.getIndicatorSizing();
+            sizing.left = sizing.left - contentBox.x;
+            return sizing;
         }
         getPrimaryKeyframes(start, final) {
             return [
                 {
-                    left: start,
-                    width: `40px`,
-                },
-                {
-                    width: `80px`,
+                    left: `${start.left}px`,
+                    width: `${start.width}px`,
                 },
                 {
-                    left: final,
-                    width: `40px`,
+                    left: `${final.left}px`,
+                    width: `${final.width}px`,
                 },
             ];
         }
         getSecondaryKeyframes(start, final) {
             return [
                 {
-                    left: start,
+                    left: `${start.left}px`,
+                    width: `${start.width}px`,
                 },
                 {
-                    left: final,
+                    left: `${final.left}px`,
+                    width: `${final.width}px`,
                 },
             ];
         }
-        contentClickHandler(e) {
-            this.activateFromEvent(e);
-        }
-        contentKeyDownHandler(e) {
-            if (['Enter', 'Space'].includes(e.code)) {
-                this.activateFromEvent(e);
+        async handleTabClick(e) {
+            const tab = e.composedPath().find((el) => isTab(el));
+            // Allow event to bubble
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            if (e.defaultPrevented || !tab || tab.selected) {
+                return;
             }
+            this.activateTab(tab);
         }
-        activateFromEvent(e) {
-            const { items } = this;
-            const path = e.composedPath();
-            let item;
-            while (!item) {
-                const next = path.shift();
-                if (!next) {
-                    break;
-                }
-                if (items.includes(next)) {
-                    item = next;
-                }
+        activateTab(activeTab) {
+            const { tabs } = this;
+            const previousTab = this.activeTab;
+            if (!tabs.includes(activeTab) || previousTab === activeTab) {
+                // Ignore setting activeTab to a tab element that is not a child.
+                return;
             }
-            if (!item) {
+            for (const tab of tabs) {
+                tab.selected = tab === activeTab;
+            }
+            if (previousTab) {
+                // Don't dispatch a change event if activating a tab when no previous tabs
+                // were selected, such as when md-tabs auto-selects the first tab.
+                const detail = {
+                    item: activeTab,
+                    index: this.tabs.indexOf(activeTab),
+                };
+                const defaultPrevented = !this.dispatchEvent(new CustomEvent('change', { detail, bubbles: false, cancelable: true }));
+                if (defaultPrevented) {
+                    for (const tab of tabs) {
+                        tab.selected = tab === previousTab;
+                    }
+                    return;
+                }
+                previousTab.indicated = false;
+            }
+            activeTab.indicated = false;
+            this.positionPointer(activeTab, previousTab);
+            this.updateFocusableTab(activeTab);
+            this.scrollToTab(activeTab);
+        }
+        updateFocusableTab(focusableTab) {
+            for (const tab of this.tabs) {
+                tab.tabIndex = tab === focusableTab ? 0 : -1;
+            }
+        }
+        async handleKeydown(event) {
+            // Allow event to bubble.
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            const isLeft = event.key === 'ArrowLeft';
+            const isRight = event.key === 'ArrowRight';
+            const isHome = event.key === 'Home';
+            const isEnd = event.key === 'End';
+            // Ignore non-navigation keys
+            if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {
                 return;
             }
-            this.makeSelection(item, true);
-        }
-        handleScrollLeft() {
-            const { contentScroll = 0, content } = this;
-            if (contentScroll === 0) {
+            const { tabs } = this;
+            // Don't try to select another tab if there aren't any.
+            if (tabs.length < 2) {
                 return;
             }
-            let left = contentScroll - 80;
-            if (left < 0) {
-                left = 0;
+            // Prevent default interactions, such as scrolling.
+            event.preventDefault();
+            let indexToFocus;
+            if (isHome || isEnd) {
+                indexToFocus = isHome ? 0 : tabs.length - 1;
+            }
+            else {
+                // Check if moving forwards or backwards
+                const isRtl = getComputedStyle(this).direction === 'rtl';
+                const forwards = isRtl ? isLeft : isRight;
+                const { focusedTab } = this;
+                if (!focusedTab) {
+                    // If there is not already a tab focused, select the first or last tab
+                    // based on the direction we're traveling.
+                    indexToFocus = forwards ? 0 : tabs.length - 1;
+                }
+                else {
+                    const focusedIndex = this.tabs.indexOf(focusedTab);
+                    indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1;
+                    if (indexToFocus >= tabs.length) {
+                        // Return to start if moving past the last item.
+                        indexToFocus = 0;
+                    }
+                    else if (indexToFocus < 0) {
+                        // Go to end if moving before the first item.
+                        indexToFocus = tabs.length - 1;
+                    }
+                }
+            }
+            const tabToFocus = tabs[indexToFocus];
+            tabToFocus.focus();
+            if (this.autoActivate) {
+                this.activateTab(tabToFocus);
             }
-            this.contentScroll = left;
-            content.scrollTo({
-                behavior: 'smooth',
-                left,
-            });
-        }
-        handleScrollRight() {
-            const { contentScroll = 0, content } = this;
-            let left = contentScroll + 80;
-            if (left + content.clientWidth > content.scrollWidth) {
-                left = content.scrollWidth - content.clientWidth;
+            else {
+                this.updateFocusableTab(tabToFocus);
             }
-            this.contentScroll = left;
-            content.scrollTo({
-                behavior: 'smooth',
-                left,
-            });
         }
-        handleScroll(e) {
-            const div = e.target;
-            this.contentScroll = div.scrollLeft;
+        // scroll to item on keyup.
+        handleKeyup() {
+            this.scrollToTab(this.focusedTab ?? this.activeTab);
         }
-        handleKeyDown(e) {
-            if (e.code === 'ArrowRight') {
-                e.preventDefault();
-                const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0];
-                this.makeSelection(tab, true);
+        handleFocusout() {
+            // restore focus to selected item when blurring the tab bar.
+            if (this.matches(':focus-within')) {
+                return;
             }
-            else if (e.code === 'ArrowLeft') {
-                e.preventDefault();
-                const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0];
-                this.makeSelection(tab, true);
+            const { activeTab } = this;
+            if (activeTab) {
+                this.updateFocusableTab(activeTab);
             }
         }
-        getPreviousItem(item) {
-            const { items } = this;
-            const curIndex = items.indexOf(item);
-            if (curIndex < 0) {
-                return item;
-            }
-            let i = curIndex;
-            let result;
-            do {
-                i--;
-                if (i === curIndex) {
-                    // looped back from the end, no active element to find.
-                    return item;
-                }
-                const tmp = items[i];
-                if (!tmp) {
-                    i = items.length;
-                    continue;
-                }
-                if (this.isSelectable(tmp)) {
-                    result = tmp;
+        handleSlotChange() {
+            for (const tab of this.tabs) {
+                tab.priority = this.priority;
+                if (tab.selected) {
+                    tab.indicated = true;
                 }
-            } while (!result);
-            return result || item;
-        }
-        getNextItem(item) {
-            const { items } = this;
-            const curIndex = items.indexOf(item);
-            if (curIndex < 0) {
-                return item;
             }
-            let i = curIndex;
-            let next;
-            do {
-                i++;
-                if (i === curIndex) {
-                    // looped back from the start, no active element to find.
-                    return item;
-                }
-                const tmp = items[i];
-                if (!tmp) {
-                    i = -1;
-                    continue;
-                }
-                if (this.isSelectable(tmp)) {
-                    next = tmp;
-                }
-            } while (!next);
-            return next || item;
+            const firstTab = this.tabs[0];
+            if (!this.activeTab && firstTab) {
+                // If the active tab was removed, auto-select the first one. There should
+                // always be a selected tab while the bar has children.
+                this.activateTab(firstTab);
+            }
+            // When children shift, ensure the active tab is visible. For example, if
+            // many children are added before the active tab, it'd be pushed off screen.
+            // This ensures it stays visible.
+            this.scrollToTab(this.activeTab);
+            if (this.activeTab) {
+                this.updateFocusableTab(this.activeTab);
+            }
         }
         render() {
-            const classes = {
-                surface: true,
-                scrollable: !!this.scrollable,
-            };
             return html `
-      <div class="${classMap(classes)}">
-        ${this.renderLeftScrollControl()}
-        <div class="content" @scroll="${this.handleScroll}" @keydown="${this.handleKeyDown}">${this.renderSlot()}</div>
-        ${this.rightScrollControl()} ${this.renderIndicator()}
-        <div class="divider"></div>
-      </div>
+      <div class="tabs">${this.renderSlot()}</div>
+      ${this.renderIndicator()}
+      <ui-divider class="divider"></ui-divider>
     `;
         }
         renderSlot() {
-            return html `<slot
-      @slotchange="${this.updateItems}"
-      @click="${this.contentClickHandler}"
-      @keydown="${this.contentKeyDownHandler}"
-    ></slot>`;
+            return html `<slot @slotchange="${this.handleSlotChange}" @click="${this.handleTabClick}"></slot>`;
         }
         renderIndicator() {
             const classes = {
@@ -509,34 +468,15 @@ let UiTabs = (() => {
       </div>
     `;
         }
-        renderLeftScrollControl() {
-            if (!this.scrollable) {
-                return nothing;
-            }
-            return html ` <div class="scroll-control left">
-      <ui-icon-button aria-label="Scroll tabs left" title="Scroll tabs left" @click="${this.handleScrollLeft}">
-        <ui-icon icon="chevronLeft"></ui-icon>
-      </ui-icon-button>
-    </div>`;
-        }
-        rightScrollControl() {
-            if (!this.scrollable) {
-                return nothing;
-            }
-            return html `<div class="scroll-control right">
-      <ui-icon-button aria-label="Scroll tabs right" title="Scroll tabs right" @click="${this.handleScrollRight}">
-        <ui-icon icon="chevronRight"></ui-icon>
-      </ui-icon-button>
-    </div>`;
-        }
     };
 })();
 /**
  * A container for tabs.
  *
- * @fires select - A non bubbling event when selection change through user interaction.
- *                The `event.detail` object contains the `item` and `index` properties.
- *                It also has the `select` property with the value of the `selectedAttribute` on the tab.
+ * @fires change - A non bubbling event when selection change through user interaction.
  */
 export default UiTabs;
+function isTab(element) {
+    return element instanceof UiTab;
+}
 //# sourceMappingURL=Tabs.js.map