@material/web 2.5.1-nightly.b4de401.0 → 2.5.1-nightly.bd360db.0

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,93 @@
+/**
+ * @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) {
+        const oldValue = this.selected;
+        value = Boolean(value); // coerce for safety
+        this[internals].ariaSelected = String(value);
+        this[toggleState]('selected', value);
+        // Request update manually for Lit 2 compatibility, where user-defined
+        // accessors are not automatically wrapped by createProperty().
+        // May be removed once Lit 2 is no longer supported.
+        this.requestUpdate('selected', oldValue);
+    }
+    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    const oldValue = this.selected;\n    value = Boolean(value); // coerce for safety\n    this[internals].ariaSelected = String(value);\n    this[toggleState]('selected', value);\n    // Request update manually for Lit 2 compatibility, where user-defined\n    // accessors are not automatically wrapped by createProperty().\n    // May be removed once Lit 2 is no longer supported.\n    this.requestUpdate('selected', oldValue);\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,65 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultGroup, LitElement, PropertyValues } 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;
+    constructor();
+    protected updated(changedProperties: PropertyValues<this>): void;
+    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;
+    private handleClick;
+    private handleFocusin;
+    protected handleSlotChange(): void;
+}
+export {};

package/labs/aria/tabs/tablist.js

@@ -0,0 +1,206 @@
+/**
+ * @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();
+    }
+    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', 'focusin');
+        this.addEventListener('click', this.handleClick.bind(this));
+        this.addEventListener('focusin', this.handleFocusin.bind(this));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('orientation') ||
+            !this.hasAttribute('focusgroup')) {
+            const isVertical = this.orientation === 'vertical';
+            this[internals].ariaOrientation = isVertical ? 'vertical' : 'horizontal';
+            this.setAttribute('focusgroup', `tablist ${isVertical ? 'block' : 'inline'}`);
+        }
+    }
+    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);
+        }
+    }
+    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);
+            }
+        });
+    }
+    handleFocusin(event) {
+        if (this.autoSelect) {
+            this.handleClick(event);
+        }
+    }
+    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);
+        }
+    }
+}
+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({ reflect: true })
+], AriaTablistElement.prototype, "orientation", void 0);
+__decorate([
+    query('slot:not([name])')
+], AriaTablistElement.prototype, "slotElement", void 0);
+function isAriaTabLike(element) {
+    return Boolean(element &&
+        typeof element === 'object' &&
+        '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 {\n  css,\n  CSSResultGroup,\n  html,\n  isServer,\n  LitElement,\n  PropertyValues,\n} 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({reflect: true}) orientation: 'horizontal' | 'vertical' =\n    'horizontal';\n\n  @query('slot:not([name])')\n  private readonly slotElement!: HTMLSlotElement | null;\n\n  constructor() {\n    super();\n    if (isServer) return;\n    this[internals].role = 'tablist';\n    setupDispatchHooks(this, 'click', 'focusin');\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('focusin', this.handleFocusin.bind(this));\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.has('orientation') ||\n      !this.hasAttribute('focusgroup')\n    ) {\n      const isVertical = this.orientation === 'vertical';\n      this[internals].ariaOrientation = isVertical ? 'vertical' : 'horizontal';\n      this.setAttribute(\n        'focusgroup',\n        `tablist ${isVertical ? 'block' : 'inline'}`,\n      );\n    }\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\n  private 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  private handleFocusin(event: FocusEvent) {\n    if (this.autoSelect) {\n      this.handleClick(event);\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\ninterface AriaTabLike extends HTMLElement {\n  selected: boolean;\n  tabpanelElement: Element | null;\n}\n\nfunction isAriaTabLike(element: unknown): element is AriaTabLike {\n  return Boolean(\n    element &&\n      typeof element === 'object' &&\n      'selected' in element &&\n      'tabpanelElement' in element,\n  );\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 {};

package/labs/aria/tabs/tabpanel.js

@@ -0,0 +1,53 @@
+/**
+ * @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 { queryAssociatedById } from '../../aria/query-associated.js';
+import { internals, mixinElementInternals, } from '../../behaviors/element-internals.js';
+import { mixinFocusable } from '../../behaviors/focusable.js';
+const baseClass = mixinFocusable(mixinElementInternals(LitElement));
+/**
+ * An ARIA tabpanel element.
+ */
+export class AriaTabpanelElement extends baseClass {
+    /**
+     * ID of the tab element that controls this tabpanel.
+     */
+    get tab() {
+        return this.tabElement?.id || '';
+    }
+    set tab(value) {
+        this.tabElement = queryAssociatedById(this, value);
+    }
+    /**
+     * The tab element that controls this tabpanel.
+     */
+    get tabElement() {
+        return this[internals].ariaLabelledByElements?.[0] || null;
+    }
+    set tabElement(value) {
+        this[internals].ariaLabelledByElements = value ? [value] : [];
+    }
+    constructor() {
+        super();
+        if (isServer)
+            return;
+        this[internals].role = 'tabpanel';
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+AriaTabpanelElement.styles = css `
+    :host(:not([hidden])) {
+      display: block;
+    }
+  `;
+__decorate([
+    property({ type: String, reflect: true, noAccessor: true })
+], AriaTabpanelElement.prototype, "tab", null);
+//# sourceMappingURL=tabpanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabpanel.js","sourceRoot":"","sources":["tabpanel.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACpD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,mBAAmB,EAAC,MAAM,gCAAgC,CAAC;AACnE,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAC;AAE5D,MAAM,SAAS,GAAG,cAAc,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,SAAS;IAOhD;;OAEG;IAEH,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC;IACnC,CAAC;IACD,IAAI,GAAG,CAAC,KAAa;QACnB,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,sBAAsB,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IAC7D,CAAC;IACD,IAAI,UAAU,CAAC,KAAqB;QAClC,IAAI,CAAC,SAAS,CAAC,CAAC,sBAAsB,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;IACpC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAnCe,0BAAM,GAAG,GAAG,CAAA;;;;GAI3B,CAAC;AAMF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;8CAGzD","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, html, isServer, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {queryAssociatedById} from '../../aria/query-associated.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../behaviors/focusable.js';\n\nconst baseClass = mixinFocusable(mixinElementInternals(LitElement));\n\n/**\n * An ARIA tabpanel element.\n */\nexport class AriaTabpanelElement extends baseClass {\n  static override styles = css`\n    :host(:not([hidden])) {\n      display: block;\n    }\n  `;\n\n  /**\n   * ID of the tab element that controls this tabpanel.\n   */\n  @property({type: String, reflect: true, noAccessor: true})\n  get tab(): string {\n    return this.tabElement?.id || '';\n  }\n  set tab(value: string) {\n    this.tabElement = queryAssociatedById(this, value);\n  }\n\n  /**\n   * The tab element that controls this tabpanel.\n   */\n  get tabElement(): Element | null {\n    return this[internals].ariaLabelledByElements?.[0] || null;\n  }\n  set tabElement(value: Element | null) {\n    this[internals].ariaLabelledByElements = value ? [value] : [];\n  }\n\n  constructor() {\n    super();\n    if (isServer) return;\n    this[internals].role = 'tabpanel';\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}