@maicol07/material-web 2.3.0 → 2.5.1

package/labs/aria/query-associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-associated.js","sourceRoot":"","sources":["query-associated.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AACH,MAAM,UAAU,mBAAmB,CACjC,OAAgB,EAChB,EAAU;IAEV,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAC;IACrB,OACE,OAAO,CAAC,WAAW,EACpB,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC5B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB,CAAC,OAAgB,EAAE,GAAW;IAChE,MAAM,SAAS,GAAG,GAAG;SAClB,KAAK,CAAC,KAAK,CAAC;SACZ,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SACpB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACzB,IAAI,CAAC,SAAS,CAAC,MAAM;QAAE,OAAO,EAAE,CAAC;IACjC,OAAO,KAAK,CAAC,IAAI,CACd,OAAO,CAAC,WAAW,EAAsC,CAAC,gBAAgB,CACzE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CACpB,CACF,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Queries for an associated element with the given ID that is in the same root\n * as the given element.\n *\n * @param element The element to query from.\n * @param id The ID of the associated element to query for.\n * @return The associated element with the given ID, or null if not found.\n */\nexport function queryAssociatedById(\n  element: Element,\n  id: string,\n): Element | null {\n  if (!id) return null;\n  return (\n    element.getRootNode() as Document | ShadowRoot | Element\n  ).querySelector(`#${id}`);\n}\n\n/**\n * Queries for one or more associated elements that match the given\n * space-separated ID string that are in the same root as the given element.\n *\n * @param element The element to query from.\n * @param ids The space-separated IDs of the associated elements to query for.\n * @return An array of associated elements with the given IDs.\n */\nexport function queryAssociatedByIds(element: Element, ids: string): Element[] {\n  const selectors = ids\n    .split(/\\s+/)\n    .filter((id) => !!id)\n    .map((id) => `#${id}`);\n  if (!selectors.length) return [];\n  return Array.from(\n    (element.getRootNode() as Document | ShadowRoot | Element).querySelectorAll(\n      selectors.join(','),\n    ),\n  );\n}\n"]}

package/labs/aria/tabs/md-aria-tab.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AriaTabElement } from './tab.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-aria-tab': AriaTabElement;
+    }
+}

package/labs/aria/tabs/md-aria-tab.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AriaTabElement } from './tab.js';
+customElements.define('md-aria-tab', AriaTabElement);
+//# sourceMappingURL=md-aria-tab.js.map

package/labs/aria/tabs/md-aria-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-aria-tab.js","sourceRoot":"","sources":["md-aria-tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAQxC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AriaTabElement} from './tab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-aria-tab': AriaTabElement;\n  }\n}\n\ncustomElements.define('md-aria-tab', AriaTabElement);\n"]}

package/labs/aria/tabs/md-aria-tablist.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AriaTablistElement } from './tablist.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-aria-tablist': AriaTablistElement;
+    }
+}

package/labs/aria/tabs/md-aria-tablist.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AriaTablistElement } from './tablist.js';
+customElements.define('md-aria-tablist', AriaTablistElement);
+//# sourceMappingURL=md-aria-tablist.js.map

package/labs/aria/tabs/md-aria-tablist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-aria-tablist.js","sourceRoot":"","sources":["md-aria-tablist.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAC;AAQhD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AriaTablistElement} from './tablist.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-aria-tablist': AriaTablistElement;\n  }\n}\n\ncustomElements.define('md-aria-tablist', AriaTablistElement);\n"]}

package/labs/aria/tabs/md-aria-tabpanel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AriaTabpanelElement } from './tabpanel.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-aria-tabpanel': AriaTabpanelElement;
+    }
+}

package/labs/aria/tabs/md-aria-tabpanel.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AriaTabpanelElement } from './tabpanel.js';
+customElements.define('md-aria-tabpanel', AriaTabpanelElement);
+//# sourceMappingURL=md-aria-tabpanel.js.map

package/labs/aria/tabs/md-aria-tabpanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-aria-tabpanel.js","sourceRoot":"","sources":["md-aria-tabpanel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAC;AAQlD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AriaTabpanelElement} from './tabpanel.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-aria-tabpanel': AriaTabpanelElement;\n  }\n}\n\ncustomElements.define('md-aria-tabpanel', AriaTabpanelElement);\n"]}

package/labs/aria/tabs/tab.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultGroup, LitElement } from 'lit';
+declare const baseClass: import("../../behaviors/mixin.js").MixinReturn<import("../../behaviors/mixin.js").MixinReturn<import("../../behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../behaviors/element-internals.js").WithElementInternals>, import("../../behaviors/custom-state-set.js").WithCustomStateSet>, import("../../behaviors/focusable.js").Focusable>;
+/**
+ * An ARIA tab element.
+ *
+ * @cssstate selected - Whether the tab is selected.
+ */
+export declare class AriaTabElement extends baseClass {
+    static styles: CSSResultGroup;
+    /**
+     * ID of the associated `md-aria-tabpanel` element.
+     */
+    get tabpanel(): string;
+    set tabpanel(value: string);
+    /**
+     * The tabpanel element that is controlled by this tab.
+     */
+    get tabpanelElement(): Element | null;
+    set tabpanelElement(value: Element | null);
+    /**
+     * Whether the tab is selected.
+     */
+    get selected(): boolean;
+    set selected(value: boolean);
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/labs/aria/tabs/tab.js

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, isServer, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { afterDispatch, setupDispatchHooks, } from '../../../internal/events/dispatch-hooks.js';
+import { queryAssociatedById } from '../../aria/query-associated.js';
+import { mixinCustomStateSet, toggleState, } from '../../behaviors/custom-state-set.js';
+import { internals, mixinElementInternals, } from '../../behaviors/element-internals.js';
+import { mixinFocusable } from '../../behaviors/focusable.js';
+const baseClass = mixinFocusable(mixinCustomStateSet(mixinElementInternals(LitElement)));
+/**
+ * An ARIA tab element.
+ *
+ * @cssstate selected - Whether the tab is selected.
+ */
+export class AriaTabElement extends baseClass {
+    /**
+     * ID of the associated `md-aria-tabpanel` element.
+     */
+    get tabpanel() {
+        return this.tabpanelElement?.id || '';
+    }
+    set tabpanel(value) {
+        this.tabpanelElement = queryAssociatedById(this, value);
+    }
+    /**
+     * The tabpanel element that is controlled by this tab.
+     */
+    get tabpanelElement() {
+        return this[internals].ariaControlsElements?.[0] || null;
+    }
+    set tabpanelElement(value) {
+        const previousValue = this.tabpanelElement;
+        if (value === previousValue)
+            return;
+        this[internals].ariaControlsElements = value ? [value] : [];
+    }
+    /**
+     * Whether the tab is selected.
+     */
+    get selected() {
+        return this[internals].ariaSelected === 'true';
+    }
+    set selected(value) {
+        value = Boolean(value); // coerce for safety
+        this[internals].ariaSelected = String(value);
+        this[toggleState]('selected', value);
+    }
+    constructor() {
+        super();
+        if (isServer)
+            return;
+        this[internals].role = 'tab';
+        setupDispatchHooks(this, 'keydown');
+        this.addEventListener('keydown', (event) => {
+            afterDispatch(event, () => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                if (event.key === 'Enter' || event.key === ' ') {
+                    // Prevent default behavior such as scrolling when pressing spacebar.
+                    event.preventDefault();
+                    this.click();
+                }
+            });
+        });
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+AriaTabElement.styles = css `
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+  `;
+__decorate([
+    property({ type: String, reflect: true, noAccessor: true })
+], AriaTabElement.prototype, "tabpanel", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AriaTabElement.prototype, "selected", null);
+//# sourceMappingURL=tab.js.map

package/labs/aria/tabs/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 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultGroup, html, isServer, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../internal/events/dispatch-hooks.js';\nimport {queryAssociatedById} from '../../aria/query-associated.js';\nimport {\n  mixinCustomStateSet,\n  toggleState,\n} from '../../behaviors/custom-state-set.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../behaviors/focusable.js';\n\nconst baseClass = mixinFocusable(\n  mixinCustomStateSet(mixinElementInternals(LitElement)),\n);\n\n/**\n * An ARIA tab element.\n *\n * @cssstate selected - Whether the tab is selected.\n */\nexport class AriaTabElement extends baseClass {\n  static override styles: CSSResultGroup = css`\n    :host {\n      display: inline-block;\n      cursor: pointer;\n    }\n  `;\n\n  /**\n   * ID of the associated `md-aria-tabpanel` element.\n   */\n  @property({type: String, reflect: true, noAccessor: true})\n  get tabpanel(): string {\n    return this.tabpanelElement?.id || '';\n  }\n  set tabpanel(value: string) {\n    this.tabpanelElement = queryAssociatedById(this, value);\n  }\n\n  /**\n   * The tabpanel element that is controlled by this tab.\n   */\n  get tabpanelElement(): Element | null {\n    return this[internals].ariaControlsElements?.[0] || null;\n  }\n  set tabpanelElement(value: Element | null) {\n    const previousValue = this.tabpanelElement;\n    if (value === previousValue) return;\n    this[internals].ariaControlsElements = value ? [value] : [];\n  }\n\n  /**\n   * Whether the tab is selected.\n   */\n  @property({type: Boolean, reflect: true})\n  get selected(): boolean {\n    return this[internals].ariaSelected === 'true';\n  }\n  set selected(value: boolean) {\n    value = Boolean(value); // coerce for safety\n    this[internals].ariaSelected = String(value);\n    this[toggleState]('selected', value);\n  }\n\n  constructor() {\n    super();\n    if (isServer) return;\n    this[internals].role = 'tab';\n    setupDispatchHooks(this, 'keydown');\n    this.addEventListener('keydown', (event: KeyboardEvent) => {\n      afterDispatch(event, () => {\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  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

package/labs/aria/tabs/tablist.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultGroup, LitElement } from 'lit';
+declare const baseClass: import("../../behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../behaviors/element-internals.js").WithElementInternals>;
+/**
+ * An ARIA tablist element.
+ */
+export declare class AriaTablistElement extends baseClass {
+    static styles: CSSResultGroup;
+    /**
+     * The tabs of this tablist.
+     */
+    get tabs(): HTMLElement[];
+    /**
+     * The currently selected tab, `null` only when there are no tab children.
+     *
+     * @export
+     */
+    get selectedTab(): HTMLElement | null;
+    set selectedTab(tab: HTMLElement | null);
+    /**
+     * The index of the currently selected tab.
+     *
+     * @export
+     */
+    get selectedTabIndex(): number;
+    set selectedTabIndex(index: number);
+    /**
+     * Whether or not to automatically select a tab when it is focused.
+     */
+    autoSelect: boolean;
+    /**
+     * Orientation of the tablist ('horizontal' or 'vertical').
+     */
+    orientation: 'horizontal' | 'vertical';
+    private readonly slotElement;
+    protected get focusedTab(): HTMLElement;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Returns true if the element is a valid tab component or role. Subclasses
+     * may override this method to determine if an element is a supported tab.
+     */
+    protected isTab(element: HTMLElement): boolean;
+    /**
+     * Returns true if the tab is currently selected. Subclasses may override this
+     * method to support custom tab selection implementations.
+     */
+    protected isTabSelected(tab: HTMLElement): boolean;
+    /**
+     * Updates the selection state of the tab element and visibility of its
+     * tabpanel. Subclasses may override this method to support custom tab
+     * selection implementations.
+     */
+    protected setTabSelected(tab: HTMLElement, isSelected: boolean): void;
+    protected onTabChange(previousTab: HTMLElement | null): void;
+    protected updateSelectedTab(tabToSelect: HTMLElement): void;
+    protected updateFocusableTab(focusableTab: HTMLElement): void;
+    private handleClick;
+    protected handleSlotChange(): void;
+    private handleKeydown;
+    private handleFocusout;
+}
+export {};

package/labs/aria/tabs/tablist.js

@@ -0,0 +1,271 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, isServer, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { afterDispatch, setupDispatchHooks, } from '../../../internal/events/dispatch-hooks.js';
+import { internals, mixinElementInternals, } from '../../behaviors/element-internals.js';
+const baseClass = mixinElementInternals(LitElement);
+/**
+ * An ARIA tablist element.
+ */
+export class AriaTablistElement extends baseClass {
+    /**
+     * The tabs of this tablist.
+     */
+    get tabs() {
+        return (this.slotElement
+            ?.assignedElements({ flatten: true })
+            .filter((el) => this.isTab(el)) ?? []);
+    }
+    /**
+     * The currently selected tab, `null` only when there are no tab children.
+     *
+     * @export
+     */
+    get selectedTab() {
+        return this.tabs.find((tab) => this.isTabSelected(tab)) ?? null;
+    }
+    set selectedTab(tab) {
+        // Ignore setting selectedTab to null. As long as there are children, one
+        // tab must be selected.
+        if (tab) {
+            this.updateSelectedTab(tab);
+        }
+    }
+    /**
+     * The index of the currently selected tab.
+     *
+     * @export
+     */
+    get selectedTabIndex() {
+        return this.tabs.findIndex((tab) => this.isTabSelected(tab));
+    }
+    set selectedTabIndex(index) {
+        const selectTabAtIndex = () => {
+            const tab = this.tabs[index];
+            // Ignore out-of-bound indices.
+            if (tab) {
+                this.updateSelectedTab(tab);
+            }
+        };
+        if (!this.slotElement) {
+            // This is needed to support setting the selectedTabIndex via a lit
+            // property binding.
+            //
+            // ```ts
+            // html`
+            //   <md-aria-tablist .selectedTabIndex=${1}>
+            //     <md-aria-tab>First</md-aria-tab>
+            //     <md-aria-tab>Second</md-aria-tab>
+            //   </md-aria-tablist>
+            // `;
+            // ```
+            //
+            // It's needed since lit's rendering lifecycle is asynchronous, and the
+            // `<slot>` element hasn't rendered, so `tabs` is empty.
+            this.updateComplete.then(selectTabAtIndex);
+            return;
+        }
+        selectTabAtIndex();
+    }
+    get focusedTab() {
+        return this.tabs.find((tab) => tab.matches(':focus-within'));
+    }
+    constructor() {
+        super();
+        /**
+         * Whether or not to automatically select a tab when it is focused.
+         */
+        this.autoSelect = false;
+        /**
+         * Orientation of the tablist ('horizontal' or 'vertical').
+         */
+        this.orientation = 'horizontal';
+        if (isServer)
+            return;
+        this[internals].role = 'tablist';
+        setupDispatchHooks(this, 'click', 'keydown');
+        this.addEventListener('click', this.handleClick.bind(this));
+        this.addEventListener('keydown', this.handleKeydown.bind(this));
+        this.addEventListener('focusout', this.handleFocusout.bind(this));
+    }
+    render() {
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+    /**
+     * Returns true if the element is a valid tab component or role. Subclasses
+     * may override this method to determine if an element is a supported tab.
+     */
+    isTab(element) {
+        return isAriaTabLike(element);
+    }
+    /**
+     * Returns true if the tab is currently selected. Subclasses may override this
+     * method to support custom tab selection implementations.
+     */
+    isTabSelected(tab) {
+        if (!isAriaTabLike(tab))
+            return false;
+        return tab.selected;
+    }
+    /**
+     * Updates the selection state of the tab element and visibility of its
+     * tabpanel. Subclasses may override this method to support custom tab
+     * selection implementations.
+     */
+    setTabSelected(tab, isSelected) {
+        if (!isAriaTabLike(tab))
+            return;
+        tab.selected = isSelected;
+        const panel = tab.tabpanelElement;
+        if (panel) {
+            panel.hidden = !isSelected;
+        }
+    }
+    onTabChange(previousTab) {
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    updateSelectedTab(tabToSelect) {
+        const { tabs } = this;
+        const tabToSelectIndex = tabs.indexOf(tabToSelect);
+        if (tabToSelectIndex === -1) {
+            // Ignore setting selectedTab to a tab element that is not a child.
+            return;
+        }
+        for (const tab of tabs) {
+            this.setTabSelected(tab, tab === tabToSelect);
+        }
+        this.updateFocusableTab(tabToSelect);
+    }
+    updateFocusableTab(focusableTab) {
+        for (const tab of this.tabs) {
+            tab.tabIndex = tab === focusableTab ? 0 : -1;
+        }
+    }
+    async handleClick(event) {
+        // event.composedPath() needs to be called before dispatch completes.
+        const tab = event
+            .composedPath()
+            .find((el) => this.isTab(el));
+        // Allow event to bubble
+        afterDispatch(event, () => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (tab && !this.isTabSelected(tab)) {
+                const previousTab = this.selectedTab;
+                this.updateSelectedTab(tab);
+                this.onTabChange(previousTab);
+            }
+        });
+    }
+    handleSlotChange() {
+        const tabToSelect = this.selectedTab ?? this.tabs[0];
+        if (tabToSelect) {
+            // Sync tab selection state when slotted content changes. If the active
+            // tab was removed or none selected, auto-select the first tab. There
+            // should always be a single selected tab while the tablist has children.
+            this.updateSelectedTab(tabToSelect);
+        }
+    }
+    // focus item on keydown and optionally select it
+    handleKeydown(event) {
+        // Allow event to bubble.
+        afterDispatch(event, () => {
+            const isLeft = event.key === 'ArrowLeft';
+            const isRight = event.key === 'ArrowRight';
+            const isUp = event.key === 'ArrowUp';
+            const isDown = event.key === 'ArrowDown';
+            const isHome = event.key === 'Home';
+            const isEnd = event.key === 'End';
+            const isVertical = this.orientation === 'vertical';
+            const isDirectionKey = isVertical ? isUp || isDown : isLeft || isRight;
+            // Ignore non-navigation keys
+            if (event.defaultPrevented || (!isDirectionKey && !isHome && !isEnd)) {
+                return;
+            }
+            const { tabs } = this;
+            // Don't try to select another tab if there aren't any.
+            if (tabs.length < 2) {
+                return;
+            }
+            // 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 = isVertical ? isDown : 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.autoSelect) {
+                const previousTab = this.selectedTab;
+                this.updateSelectedTab(tabToFocus);
+                this.onTabChange(previousTab);
+            }
+            else {
+                this.updateFocusableTab(tabToFocus);
+            }
+        });
+    }
+    handleFocusout() {
+        // restore focus to selected item when blurring the tab bar.
+        if (this.matches(':focus-within')) {
+            return;
+        }
+        const { selectedTab } = this;
+        if (selectedTab) {
+            this.updateFocusableTab(selectedTab);
+        }
+    }
+}
+AriaTablistElement.styles = css `
+    :host {
+      display: flex;
+    }
+    :host([orientation='vertical']) {
+      flex-direction: column;
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], AriaTablistElement.prototype, "selectedTabIndex", null);
+__decorate([
+    property({ type: Boolean })
+], AriaTablistElement.prototype, "autoSelect", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AriaTablistElement.prototype, "orientation", void 0);
+__decorate([
+    query('slot:not([name])')
+], AriaTablistElement.prototype, "slotElement", void 0);
+function isAriaTabLike(element) {
+    return 'selected' in element && 'tabpanelElement' in element;
+}
+//# sourceMappingURL=tablist.js.map

package/labs/aria/tabs/tablist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.js","sourceRoot":"","sources":["tablist.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 {css, CSSResultGroup, html, isServer, LitElement} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../internal/events/dispatch-hooks.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\n\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * An ARIA tablist element.\n */\nexport class AriaTablistElement extends baseClass {\n  static override styles: CSSResultGroup = css`\n    :host {\n      display: flex;\n    }\n    :host([orientation='vertical']) {\n      flex-direction: column;\n    }\n  `;\n\n  /**\n   * The tabs of this tablist.\n   */\n  get tabs(): HTMLElement[] {\n    return (\n      this.slotElement\n        ?.assignedElements({flatten: true})\n        .filter((el): el is HTMLElement => this.isTab(el as HTMLElement)) ?? []\n    );\n  }\n\n  /**\n   * The currently selected tab, `null` only when there are no tab children.\n   *\n   * @export\n   */\n  get selectedTab() {\n    return this.tabs.find((tab) => this.isTabSelected(tab)) ?? null;\n  }\n  set selectedTab(tab: HTMLElement | null) {\n    // Ignore setting selectedTab to null. As long as there are children, one\n    // tab must be selected.\n    if (tab) {\n      this.updateSelectedTab(tab);\n    }\n  }\n\n  /**\n   * The index of the currently selected tab.\n   *\n   * @export\n   */\n  @property({type: Number})\n  get selectedTabIndex() {\n    return this.tabs.findIndex((tab) => this.isTabSelected(tab));\n  }\n  set selectedTabIndex(index: number) {\n    const selectTabAtIndex = () => {\n      const tab = this.tabs[index];\n      // Ignore out-of-bound indices.\n      if (tab) {\n        this.updateSelectedTab(tab);\n      }\n    };\n\n    if (!this.slotElement) {\n      // This is needed to support setting the selectedTabIndex via a lit\n      // property binding.\n      //\n      // ```ts\n      // html`\n      //   <md-aria-tablist .selectedTabIndex=${1}>\n      //     <md-aria-tab>First</md-aria-tab>\n      //     <md-aria-tab>Second</md-aria-tab>\n      //   </md-aria-tablist>\n      // `;\n      // ```\n      //\n      // It's needed since lit's rendering lifecycle is asynchronous, and the\n      // `<slot>` element hasn't rendered, so `tabs` is empty.\n      this.updateComplete.then(selectTabAtIndex);\n      return;\n    }\n\n    selectTabAtIndex();\n  }\n\n  /**\n   * Whether or not to automatically select a tab when it is focused.\n   */\n  @property({type: Boolean}) autoSelect = false;\n\n  /**\n   * Orientation of the tablist ('horizontal' or 'vertical').\n   */\n  @property({type: String, reflect: true})\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @query('slot:not([name])')\n  private readonly slotElement!: HTMLSlotElement | null;\n\n  protected get focusedTab() {\n    return this.tabs.find((tab) => tab.matches(':focus-within'));\n  }\n\n  constructor() {\n    super();\n    if (isServer) return;\n    this[internals].role = 'tablist';\n    setupDispatchHooks(this, 'click', 'keydown');\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('keydown', this.handleKeydown.bind(this));\n    this.addEventListener('focusout', this.handleFocusout.bind(this));\n  }\n\n  protected override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n\n  /**\n   * Returns true if the element is a valid tab component or role. Subclasses\n   * may override this method to determine if an element is a supported tab.\n   */\n  protected isTab(element: HTMLElement): boolean {\n    return isAriaTabLike(element);\n  }\n\n  /**\n   * Returns true if the tab is currently selected. Subclasses may override this\n   * method to support custom tab selection implementations.\n   */\n  protected isTabSelected(tab: HTMLElement): boolean {\n    if (!isAriaTabLike(tab)) return false;\n    return tab.selected;\n  }\n\n  /**\n   * Updates the selection state of the tab element and visibility of its\n   * tabpanel. Subclasses may override this method to support custom tab\n   * selection implementations.\n   */\n  protected setTabSelected(tab: HTMLElement, isSelected: boolean): void {\n    if (!isAriaTabLike(tab)) return;\n    tab.selected = isSelected;\n    const panel = tab.tabpanelElement as HTMLElement | null;\n    if (panel) {\n      panel.hidden = !isSelected;\n    }\n  }\n\n  protected onTabChange(previousTab: HTMLElement | null): void {\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  protected updateSelectedTab(tabToSelect: HTMLElement) {\n    const {tabs} = this;\n    const tabToSelectIndex = tabs.indexOf(tabToSelect);\n    if (tabToSelectIndex === -1) {\n      // Ignore setting selectedTab to a tab element that is not a child.\n      return;\n    }\n\n    for (const tab of tabs) {\n      this.setTabSelected(tab, tab === tabToSelect);\n    }\n\n    this.updateFocusableTab(tabToSelect);\n  }\n\n  protected updateFocusableTab(focusableTab: HTMLElement) {\n    for (const tab of this.tabs) {\n      tab.tabIndex = tab === focusableTab ? 0 : -1;\n    }\n  }\n\n  private async handleClick(event: Event) {\n    // event.composedPath() needs to be called before dispatch completes.\n    const tab = event\n      .composedPath()\n      .find((el): el is HTMLElement => this.isTab(el as HTMLElement));\n\n    // Allow event to bubble\n    afterDispatch(event, () => {\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      if (tab && !this.isTabSelected(tab)) {\n        const previousTab = this.selectedTab;\n        this.updateSelectedTab(tab);\n        this.onTabChange(previousTab);\n      }\n    });\n  }\n\n  protected handleSlotChange() {\n    const tabToSelect = this.selectedTab ?? this.tabs[0];\n    if (tabToSelect) {\n      // Sync tab selection state when slotted content changes. If the active\n      // tab was removed or none selected, auto-select the first tab. There\n      // should always be a single selected tab while the tablist has children.\n      this.updateSelectedTab(tabToSelect);\n    }\n  }\n\n  // focus item on keydown and optionally select it\n  private handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    afterDispatch(event, () => {\n      const isLeft = event.key === 'ArrowLeft';\n      const isRight = event.key === 'ArrowRight';\n      const isUp = event.key === 'ArrowUp';\n      const isDown = event.key === 'ArrowDown';\n      const isHome = event.key === 'Home';\n      const isEnd = event.key === 'End';\n      const isVertical = this.orientation === 'vertical';\n      const isDirectionKey = isVertical ? isUp || isDown : isLeft || isRight;\n      // Ignore non-navigation keys\n      if (event.defaultPrevented || (!isDirectionKey && !isHome && !isEnd)) {\n        return;\n      }\n\n      const {tabs} = this;\n      // Don't try to select another tab if there aren't any.\n      if (tabs.length < 2) {\n        return;\n      }\n\n      // Prevent default interactions, such as scrolling.\n      event.preventDefault();\n\n      let indexToFocus: number;\n      if (isHome || isEnd) {\n        indexToFocus = isHome ? 0 : tabs.length - 1;\n      } else {\n        // Check if moving forwards or backwards\n        const isRtl = getComputedStyle(this).direction === 'rtl';\n        const forwards = isVertical ? isDown : isRtl ? isLeft : isRight;\n        const {focusedTab} = this;\n        if (!focusedTab) {\n          // If there is not already a tab focused, select the first or last tab\n          // based on the direction we're traveling.\n          indexToFocus = forwards ? 0 : tabs.length - 1;\n        } else {\n          const focusedIndex = this.tabs.indexOf(focusedTab);\n          indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1;\n          if (indexToFocus >= tabs.length) {\n            // Return to start if moving past the last item.\n            indexToFocus = 0;\n          } else if (indexToFocus < 0) {\n            // Go to end if moving before the first item.\n            indexToFocus = tabs.length - 1;\n          }\n        }\n      }\n\n      const tabToFocus = tabs[indexToFocus];\n      tabToFocus.focus();\n      if (this.autoSelect) {\n        const previousTab = this.selectedTab;\n        this.updateSelectedTab(tabToFocus);\n        this.onTabChange(previousTab);\n      } else {\n        this.updateFocusableTab(tabToFocus);\n      }\n    });\n  }\n\n  private handleFocusout() {\n    // restore focus to selected item when blurring the tab bar.\n    if (this.matches(':focus-within')) {\n      return;\n    }\n\n    const {selectedTab} = this;\n    if (selectedTab) {\n      this.updateFocusableTab(selectedTab);\n    }\n  }\n}\n\ninterface AriaTabLike extends HTMLElement {\n  selected: boolean;\n  tabpanelElement: Element | null;\n}\n\nfunction isAriaTabLike(element: Element): element is AriaTabLike {\n  return 'selected' in element && 'tabpanelElement' in element;\n}\n"]}

package/labs/aria/tabs/tabpanel.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+declare const baseClass: import("../../behaviors/mixin.js").MixinReturn<import("../../behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../behaviors/element-internals.js").WithElementInternals>, import("../../behaviors/focusable.js").Focusable>;
+/**
+ * An ARIA tabpanel element.
+ */
+export declare class AriaTabpanelElement extends baseClass {
+    static styles: import("lit").CSSResult;
+    /**
+     * ID of the tab element that controls this tabpanel.
+     */
+    get tab(): string;
+    set tab(value: string);
+    /**
+     * The tab element that controls this tabpanel.
+     */
+    get tabElement(): Element | null;
+    set tabElement(value: Element | null);
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};