@adobe/spectrum-wc-core 0.4.0-snapshot-test.20260714143259

package/dist/components/tabs/TabPanel.base.d.ts

@@ -0,0 +1,49 @@
+import { PropertyValues } from 'lit';
+import { SpectrumElement } from '../../element/index.js';
+/**
+ * Base class for a tab panel that displays content associated with
+ * a tab.
+ *
+ * Manages visibility, ARIA hidden state, tabindex, and the
+ * focus-in/out behavior that prevents Tab-key trapping inside panel
+ * content.
+ *
+ * In 1st-gen, `slot="tab-panel"` was
+ * assigned programmatically in `firstUpdated` so consumers never
+ * wrote it in markup. This behavior is preserved in 2nd-gen.
+ *
+ * The panel removes its own
+ * `tabindex` on `focusin` so that Tab presses inside the panel
+ * move to the next interactive element rather than being trapped.
+ * On `focusout`, `tabindex` is restored so the panel remains
+ * focusable from the tablist.
+ *
+ * @slot - Content displayed when the associated tab is selected
+ */
+export declare abstract class TabPanelBase extends SpectrumElement {
+    /**
+     * Whether this panel is currently visible (its associated tab is
+     * selected). Managed by the parent `swc-tabs` — consumers should
+     * not set this directly.
+     */
+    selected: boolean;
+    /**
+     * Unique identifier linking this panel to its corresponding tab.
+     * Must match the `tab-id` attribute on the associated `swc-tab`.
+     */
+    tabId: string;
+    /**
+     * Removes the panel's `tabindex` while focus is inside the panel
+     * so that Tab presses navigate to the next interactive element
+     * rather than the panel container itself.
+     */
+    protected handleFocusin(): void;
+    /**
+     * Restores `tabindex` when focus leaves the panel so the panel
+     * remains directly focusable from the tablist via Tab key.
+     */
+    protected handleFocusout(): void;
+    protected firstUpdated(_changes: PropertyValues): void;
+    protected updated(changes: PropertyValues): void;
+    private syncVisibility;
+}

package/dist/components/tabs/TabPanel.base.js

@@ -0,0 +1,36 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { property as t } from "lit/decorators.js";
+import { SpectrumElement as n } from "@adobe/spectrum-wc-core/element/index.js";
+//#region components/tabs/TabPanel.base.ts
+var r = 0, i = class extends n {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.tabId = "";
+	}
+	handleFocusin() {
+		this.removeAttribute("tabindex");
+	}
+	handleFocusout() {
+		this.tabIndex = this.selected ? 0 : -1;
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.slot = "tab-panel", this.setAttribute("role", "tabpanel"), this.tabIndex = 0, this.hasAttribute("id") || (this.id = `swc-tab-panel-${r++}`);
+	}
+	updated(e) {
+		super.updated(e), e.has("selected") && this.syncVisibility();
+	}
+	syncVisibility() {
+		this.selected ? (this.removeAttribute("aria-hidden"), this.tabIndex = 0) : (this.setAttribute("aria-hidden", "true"), this.tabIndex = -1);
+	}
+};
+e([t({
+	type: Boolean,
+	reflect: !0
+})], i.prototype, "selected", void 0), e([t({
+	type: String,
+	reflect: !0,
+	attribute: "tab-id"
+})], i.prototype, "tabId", void 0);
+//#endregion
+export { i as TabPanelBase };
+
+//# sourceMappingURL=TabPanel.base.js.map

package/dist/components/tabs/TabPanel.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.base.js","names":[],"sources":["../../../components/tabs/TabPanel.base.ts"],"sourcesContent":["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';\n\nlet panelIdCounter = 0;\n\n/**\n * Base class for a tab panel that displays content associated with\n * a tab.\n *\n * Manages visibility, ARIA hidden state, tabindex, and the\n * focus-in/out behavior that prevents Tab-key trapping inside panel\n * content.\n *\n * In 1st-gen, `slot=\"tab-panel\"` was\n * assigned programmatically in `firstUpdated` so consumers never\n * wrote it in markup. This behavior is preserved in 2nd-gen.\n *\n * The panel removes its own\n * `tabindex` on `focusin` so that Tab presses inside the panel\n * move to the next interactive element rather than being trapped.\n * On `focusout`, `tabindex` is restored so the panel remains\n * focusable from the tablist.\n *\n * @slot - Content displayed when the associated tab is selected\n */\nexport abstract class TabPanelBase extends SpectrumElement {\n  // ──────────────────\n  //     SHARED API\n  // ──────────────────\n\n  /**\n   * Whether this panel is currently visible (its associated tab is\n   * selected). Managed by the parent `swc-tabs` — consumers should\n   * not set this directly.\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Unique identifier linking this panel to its corresponding tab.\n   * Must match the `tab-id` attribute on the associated `swc-tab`.\n   */\n  @property({ type: String, reflect: true, attribute: 'tab-id' })\n  public tabId = '';\n\n  // ──────────────────────\n  //     IMPLEMENTATION\n  // ──────────────────────\n\n  /**\n   * Removes the panel's `tabindex` while focus is inside the panel\n   * so that Tab presses navigate to the next interactive element\n   * rather than the panel container itself.\n   */\n  protected handleFocusin(): void {\n    this.removeAttribute('tabindex');\n  }\n\n  /**\n   * Restores `tabindex` when focus leaves the panel so the panel\n   * remains directly focusable from the tablist via Tab key.\n   */\n  protected handleFocusout(): void {\n    this.tabIndex = this.selected ? 0 : -1;\n  }\n\n  protected override firstUpdated(_changes: PropertyValues): void {\n    super.firstUpdated(_changes);\n\n    this.slot = 'tab-panel';\n    this.setAttribute('role', 'tabpanel');\n    this.tabIndex = 0;\n\n    if (!this.hasAttribute('id')) {\n      this.id = `swc-tab-panel-${panelIdCounter++}`;\n    }\n  }\n\n  protected override updated(changes: PropertyValues): void {\n    super.updated(changes);\n\n    if (changes.has('selected')) {\n      this.syncVisibility();\n    }\n  }\n\n  private syncVisibility(): void {\n    if (this.selected) {\n      this.removeAttribute('aria-hidden');\n      this.tabIndex = 0;\n    } else {\n      this.setAttribute('aria-hidden', 'true');\n      this.tabIndex = -1;\n    }\n  }\n}\n"],"mappings":";;;;AAgBA,IAAI,IAAiB,GAsBC,IAAtB,cAA2C,EAAgB;;+BAWvC,iBAOH;;CAWf,gBAAgC;AAC9B,OAAK,gBAAgB,WAAW;;CAOlC,iBAAiC;AAC/B,OAAK,WAAW,KAAK,WAAW,IAAI;;CAGtC,aAAgC,GAAgC;AAO9D,EANA,MAAM,aAAa,EAAS,EAE5B,KAAK,OAAO,aACZ,KAAK,aAAa,QAAQ,WAAW,EACrC,KAAK,WAAW,GAEX,KAAK,aAAa,KAAK,KAC1B,KAAK,KAAK,iBAAiB;;CAI/B,QAA2B,GAA+B;AAGxD,EAFA,MAAM,QAAQ,EAAQ,EAElB,EAAQ,IAAI,WAAW,IACzB,KAAK,gBAAgB;;CAIzB,iBAA+B;AAC7B,EAAI,KAAK,YACP,KAAK,gBAAgB,cAAc,EACnC,KAAK,WAAW,MAEhB,KAAK,aAAa,eAAe,OAAO,EACxC,KAAK,WAAW;;;GAzDnB,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAO1C,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAU,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA"}

package/dist/components/tabs/TabPanel.types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/**
+ * Reserved for future tab-panel-specific type definitions.
+ * The file is scaffolded now so imports are stable when implementation
+ * work begins.
+ */
+export {};

package/dist/components/tabs/Tabs.base.d.ts

@@ -0,0 +1,235 @@
+import { PropertyValues } from 'lit';
+import { SpectrumElement } from '../../element/index.js';
+import { KeyboardActivation, TabDensity, TabsDirection } from './Tabs.types.js';
+/**
+ * Base class for a tabbed interface container.
+ *
+ * Manages selection state, tab/panel association, ARIA wiring,
+ * keyboard navigation, and event dispatching. Concrete classes
+ * supply the stylesheet, render template, and visual behaviors
+ * such as the selection indicator.
+ *
+ * Public API follows the Spectrum 2 / Spectrum Design–aligned surface
+ * from the tabs migration plan: `keyboard-activation` and `density`
+ * instead of legacy `auto`, `compact`, `quiet`, `emphasized`, and
+ * t-shirt `size` attributes.
+ *
+ * @slot - Tab items (elements with `role="tab"`)
+ * @slot tab-panel - Tab panel content (elements with `role="tabpanel"`)
+ *
+ * @fires change - The selected tab has changed. Cancelable —
+ *   calling `preventDefault()` reverts the selection.
+ */
+export declare abstract class TabsBase extends SpectrumElement {
+    /**
+     * @internal
+     *
+     * Valid direction values for validation and CEM/stories.
+     */
+    static readonly VALID_DIRECTIONS: readonly TabsDirection[];
+    /**
+     * @internal
+     */
+    static readonly VALID_KEYBOARD_ACTIVATIONS: readonly KeyboardActivation[];
+    /**
+     * @internal
+     */
+    static readonly VALID_DENSITIES: readonly TabDensity[];
+    /**
+     * Whether selection follows keyboard focus (`automatic`, default) or the
+     * user must press Enter or Space to activate (`manual`). Prefer `manual`
+     * when tab panels are expensive to render or not fully present in the DOM.
+     *
+     * @see https://w3c.github.io/aria-practices/#kbd_selection_follows_focus
+     */
+    get keyboardActivation(): KeyboardActivation;
+    set keyboardActivation(value: string);
+    /** @internal */
+    private _keyboardActivation;
+    /**
+     * Layout density: `regular` (default) or `compact` (reduced tab spacing).
+     */
+    get density(): TabDensity;
+    set density(value: string);
+    /** @internal */
+    private _density;
+    /**
+     * The layout direction of the tab list.
+     *
+     * **Breaking change:** `'vertical-right'` is no longer supported.
+     * Use `'vertical'` instead.
+     *
+     * @default 'horizontal'
+     */
+    get direction(): TabsDirection;
+    set direction(value: TabsDirection);
+    /** @internal */
+    private _direction;
+    /**
+     * Whether the entire tab list is disabled. When `true`,
+     * `aria-disabled="true"` is applied to the tablist element and
+     * all interaction is suppressed.
+     */
+    disabled: boolean;
+    /**
+     * Accessible label for the tablist. Rendered as `aria-label` on the
+     * element with `role="tablist"` in the concrete template.
+     */
+    accessibleLabel: string;
+    /**
+     * The `tab-id` of the currently selected tab. Setting this property
+     * updates which tab appears selected and which panel is visible.
+     */
+    selected: string;
+    /** @internal */
+    private static readonly INDICATOR_BASE_SIZE;
+    /**
+     * @internal
+     *
+     * Inline style applied to the selection indicator element.
+     * Computed from the selected tab's position and dimensions.
+     */
+    protected selectionIndicatorStyle: string;
+    /**
+     * @internal
+     *
+     * Suppresses the transition on the very first indicator placement
+     * so it doesn't animate from the origin.
+     */
+    protected shouldAnimate: boolean;
+    /**
+     * @internal
+     *
+     * Cached list of tab elements managed by this container. Updated
+     * via `handleTabSlotChange`.
+     */
+    private _tabs;
+    /**
+     * Whether an assigned node is treated as a tab. `role="tab"` is set in
+     * each tab's `firstUpdated`, so `slotchange` may run before that — accept
+     * known tab host tag names so the tab list and selection indicator sync.
+     */
+    private static isTabSlotNode;
+    /**
+     * Called by the concrete class when the default slot's content
+     * changes. Rebuilds the internal tab list and syncs selection
+     * state.
+     */
+    protected handleTabSlotChange(event: Event): void;
+    /**
+     * Called by the concrete class when the `tab-panel` slot's content
+     * changes. Wires up `aria-controls` / `aria-labelledby` between
+     * each tab and its panel.
+     */
+    protected handlePanelSlotChange(event: Event): void;
+    /**
+     * Click handler bound to the tablist wrapper in the concrete
+     * template. Activates the clicked tab.
+     */
+    protected handleClick(event: Event): void;
+    /**
+     * Full keyboard handler per WAI-ARIA APG Tabs pattern.
+     *
+     * **Horizontal:** Left/Right navigate; Up/Down ignored.
+     * **Vertical:** Up/Down navigate; Left/Right ignored.
+     * **RTL:** Left/Right swap in `dir="rtl"`.
+     * **Wrapping:** Navigation wraps from last to first and vice versa.
+     * **Disabled tabs:** Disabled tabs receive focus via arrows but
+     * are not activatable by Enter/Space.
+     * **Automatic activation:** When `keyboard-activation` is `automatic`,
+     * selection follows focus on arrow key navigation.
+     * **Home/End:** Jump to first/last tab.
+     */
+    protected handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Maps a keyboard code to a navigation delta (+1 or -1) based
+     * on orientation and text direction. Returns `null` when the key
+     * does not apply to the current orientation.
+     */
+    private getNavigationDelta;
+    /**
+     * Moves focus by `delta` positions from the currently focused tab,
+     * wrapping around the list. All tabs (including disabled) receive
+     * focus per APG. In automatic activation mode, the newly focused tab
+     * is also selected.
+     */
+    private focusByDelta;
+    /**
+     * Focuses the tab at the given index and, when in automatic
+     * activation mode, also selects it. Selection runs before `focus()`
+     * so `change` listeners observe the updated value before focus moves.
+     */
+    private focusTabAtIndex;
+    /**
+     * Wraps an index into the valid range `[0, tabs.length)`.
+     */
+    private wrapIndex;
+    /**
+     * Updates roving tabindex so only the given tab has
+     * `tabindex="0"` and all others have `tabindex="-1"`.
+     */
+    private setRovingTabindex;
+    /**
+     * Attempts to select the given tab element. Dispatches a cancelable
+     * `change` event — if the consumer calls `preventDefault()`, the
+     * selection reverts to the previous value.
+     */
+    private selectTarget;
+    /**
+     * Synchronizes the `selected` attribute and roving tabindex on
+     * each child tab to match the container's `selected` value.
+     * Ensures at least one tab has `tabindex="0"` for Tab-key entry
+     * when the container is not disabled. When the container is
+     * disabled, all tabs get `tabindex="-1"` to prevent Tab-key
+     * entry into the tab list.
+     */
+    private updateCheckedState;
+    /**
+     * Wires up cross-element ARIA relationships between tabs and
+     * panels. Each tab gets `aria-controls` pointing at its panel's
+     * `id`, and each panel gets `aria-labelledby` pointing at its
+     * tab's `id`.
+     */
+    private managePanels;
+    /**
+     * @internal
+     *
+     * Recalculates the selection indicator's position and size based
+     * on the currently selected tab element. Uses CSS transforms for
+     * smooth animation between tab positions.
+     *
+     * The indicator is a fixed-size element (100px base) that gets
+     * `scaleX`/`scaleY` to match the selected tab's width/height,
+     * and `translateX`/`translateY` to match its offset position.
+     */
+    protected updateSelectionIndicator: () => Promise<void>;
+    /** @internal */
+    private _resizeObserver?;
+    /**
+     * @internal
+     *
+     * Watches for `dir` attribute changes so the indicator recalculates
+     * when writing direction flips at runtime. `getComputedStyle` in
+     * `updateSelectionIndicator` resolves inherited direction correctly,
+     * but nothing else observes it: a `dir` flip on the document root or
+     * an ancestor doesn't resize this element, so the `ResizeObserver`
+     * below won't catch it. Mirrors the `dir`-watching pattern in
+     * `placement-controller.ts`.
+     */
+    private _directionObserver?;
+    protected willUpdate(changes: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Focuses the selected tab, or the first tab when none is selected yet.
+     * Slotted tabs live in the light DOM; this is more reliable than relying
+     * only on shadow `delegatesFocus` across browsers and test harnesses.
+     */
+    focus(options?: FocusOptions): void;
+    protected firstUpdated(changes: PropertyValues): void;
+    /**
+     * Waits for all child tab elements to finish their update cycle
+     * before resolving so layout-dependent callers see stable geometry.
+     */
+    getUpdateComplete(): Promise<boolean>;
+}

package/dist/components/tabs/Tabs.base.js

@@ -0,0 +1,225 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { KEYBOARD_ACTIVATIONS as t, KEYBOARD_ACTIVATION_DEFAULT as n, TABS_DEFAULT_DIRECTION as r, TABS_DIRECTIONS as i, TAB_DENSITIES as a, TAB_DENSITY_DEFAULT as o } from "./Tabs.types.js";
+import { property as s, state as c } from "lit/decorators.js";
+import { SpectrumElement as l } from "@adobe/spectrum-wc-core/element/index.js";
+//#region components/tabs/Tabs.base.ts
+var u, d = class e extends l {
+	constructor(...t) {
+		super(...t), this._keyboardActivation = n, this._density = o, this._direction = r, this.disabled = !1, this.accessibleLabel = "", this.selected = "", this.selectionIndicatorStyle = "", this.shouldAnimate = !1, this._tabs = [], this.updateSelectionIndicator = async () => {
+			var t, n;
+			let r = this._tabs.find((e) => e.selected);
+			if (!r) {
+				this.selectionIndicatorStyle = "transform: translateX(0px) scaleX(0) scaleY(0)";
+				return;
+			}
+			let i = (t = this.renderRoot) == null ? void 0 : t.querySelector(".tablist");
+			if (!i) return;
+			await Promise.all([(n = r.updateComplete) == null ? Promise.resolve() : n, document.fonts ? document.fonts.ready : Promise.resolve()]);
+			let a = r.getBoundingClientRect(), o = i.getBoundingClientRect();
+			this._direction === "horizontal" ? this.selectionIndicatorStyle = `transform: translateX(${getComputedStyle(this).direction === "rtl" ? a.right - o.right : a.left - o.left}px) scaleX(${a.width / e.INDICATOR_BASE_SIZE})` : this.selectionIndicatorStyle = `transform: translateY(${a.top - o.top}px) scaleY(${a.height / e.INDICATOR_BASE_SIZE})`, this.shouldAnimate || (await this.updateComplete, this.shouldAnimate = !0);
+		};
+	}
+	get keyboardActivation() {
+		return this._keyboardActivation;
+	}
+	set keyboardActivation(e) {
+		var r;
+		let i = t.includes(e);
+		!i && (r = window.__swc) != null && r.DEBUG && window.__swc.warn(this, `<${this.localName}> expects "keyboard-activation" to be one of:`, "https://opensource.adobe.com/spectrum-web-components/components/tabs/", { issues: [...t] });
+		let a = i ? e : n;
+		if (this._keyboardActivation === a) return;
+		let o = this._keyboardActivation;
+		this._keyboardActivation = a, this.requestUpdate("keyboardActivation", o);
+	}
+	get density() {
+		return this._density;
+	}
+	set density(e) {
+		var t;
+		let n = a.includes(e);
+		!n && (t = window.__swc) != null && t.DEBUG && window.__swc.warn(this, `<${this.localName}> expects "density" to be one of:`, "https://opensource.adobe.com/spectrum-web-components/components/tabs/", { issues: [...a] });
+		let r = n ? e : o;
+		if (this._density === r) return;
+		let i = this._density;
+		this._density = r, this.requestUpdate("density", i);
+	}
+	get direction() {
+		return this._direction;
+	}
+	set direction(e) {
+		var t;
+		let n = i.includes(e);
+		!n && (t = window.__swc) != null && t.DEBUG && window.__swc.warn(this, `<${this.localName}> expects the "direction" attribute to be one of the following:`, "https://opensource.adobe.com/spectrum-web-components/components/tabs/", { issues: [...i] });
+		let a = n ? e : r;
+		if (this._direction === a) return;
+		let o = this._direction;
+		this._direction = a, this.requestUpdate("direction", o);
+	}
+	static isTabSlotNode(e) {
+		return e instanceof HTMLElement ? e.getAttribute("role") === "tab" ? !0 : e.localName === "swc-tab" : !1;
+	}
+	handleTabSlotChange(t) {
+		this._tabs = t.target.assignedElements().filter(e.isTabSlotNode), this.updateCheckedState(), this.updateSelectionIndicator();
+	}
+	handlePanelSlotChange(e) {
+		let t = e.target.assignedElements();
+		this.managePanels(t);
+	}
+	handleClick(e) {
+		if (this.disabled) return;
+		let t = e.composedPath().find((e) => e.parentElement === this);
+		!t || t.disabled || this.selectTarget(t);
+	}
+	handleKeyDown(e) {
+		if (this.disabled) return;
+		let { code: t } = e;
+		if (t === "Enter" || t === "Space") {
+			e.preventDefault();
+			let t = e.target;
+			t && !t.disabled && this.selectTarget(t);
+			return;
+		}
+		let n = this.getNavigationDelta(t);
+		if (n !== null) {
+			e.preventDefault(), this.focusByDelta(n);
+			return;
+		}
+		if (t === "Home") {
+			e.preventDefault(), this.focusTabAtIndex(0);
+			return;
+		}
+		if (t === "End") {
+			e.preventDefault(), this.focusTabAtIndex(this._tabs.length - 1);
+			return;
+		}
+	}
+	getNavigationDelta(e) {
+		let t = this.dir === "rtl";
+		return this._direction === "horizontal" ? e === "ArrowRight" ? t ? -1 : 1 : e === "ArrowLeft" ? t ? 1 : -1 : null : e === "ArrowDown" ? 1 : e === "ArrowUp" ? -1 : null;
+	}
+	focusByDelta(e) {
+		if (!this._tabs.length) return;
+		let t = this.getRootNode(), n = this._tabs.indexOf(t.activeElement), r = n === -1 ? 0 : n, i = this.wrapIndex(r + e);
+		this.focusTabAtIndex(i);
+	}
+	focusTabAtIndex(e) {
+		if (!this._tabs.length) return;
+		let t = this.wrapIndex(e), n = this._tabs[t];
+		n && (this._keyboardActivation === "automatic" && !n.disabled && this.selectTarget(n), this.setRovingTabindex(n), n.focus());
+	}
+	wrapIndex(e) {
+		let t = this._tabs.length;
+		return (e % t + t) % t;
+	}
+	setRovingTabindex(e) {
+		for (let t of this._tabs) t.tabIndex = t === e ? 0 : -1;
+	}
+	selectTarget(e) {
+		let t = e.tabId;
+		if (!t) return;
+		let n = this.selected;
+		this.selected = t, this.dispatchEvent(new Event("change", { cancelable: !0 })) || (this.selected = n);
+	}
+	updateCheckedState() {
+		let e = !1;
+		for (let e of this._tabs) e.selected = !1;
+		if (this.selected) {
+			let t = this._tabs.find((e) => e.tabId === this.selected);
+			t ? (t.selected = !0, this.disabled || (this.setRovingTabindex(t), e = !0)) : this.selected = "";
+		}
+		if (this.disabled) for (let e of this._tabs) e.tabIndex = -1;
+		else !e && this._tabs.length && (this._tabs[0].tabIndex = 0);
+	}
+	managePanels(e) {
+		for (let t of e) {
+			let { tabId: e, id: n } = t, r = this.querySelector(`[role="tab"][tab-id="${e}"]`);
+			r && (r.setAttribute("aria-controls", n), t.setAttribute("aria-labelledby", r.id)), t.selected = e === this.selected;
+		}
+	}
+	willUpdate(e) {
+		if (!this.hasUpdated) {
+			let e = this.querySelector(":scope > [selected]");
+			e && this.selectTarget(e);
+		}
+		if (super.willUpdate(e), e.has("selected")) {
+			this._tabs.length && this.updateCheckedState();
+			let t = e.get("selected");
+			if (t) {
+				let e = this.querySelector(`[role="tabpanel"][tab-id="${t}"]`);
+				e && (e.selected = !1);
+			}
+			let n = this.querySelector(`[role="tabpanel"][tab-id="${this.selected}"]`);
+			n && (n.selected = !0), this.updateSelectionIndicator();
+		}
+		e.has("disabled") && this._tabs.length && this.updateCheckedState(), e.has("direction") && this.updateSelectionIndicator();
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("resize", this.updateSelectionIndicator), "fonts" in document && document.fonts.addEventListener("loadingdone", this.updateSelectionIndicator), this._resizeObserver = new ResizeObserver(() => {
+			this.updateSelectionIndicator();
+		}), this._resizeObserver.observe(this), this._directionObserver = new MutationObserver(() => {
+			this.updateSelectionIndicator();
+		});
+		let e = (e) => {
+			if (e) {
+				var t;
+				(t = this._directionObserver) == null || t.observe(e, {
+					attributes: !0,
+					attributeFilter: ["dir"]
+				});
+			}
+		};
+		e(this.ownerDocument.documentElement), e(this.closest("[dir]"));
+	}
+	disconnectedCallback() {
+		var e, t;
+		window.removeEventListener("resize", this.updateSelectionIndicator), "fonts" in document && document.fonts.removeEventListener("loadingdone", this.updateSelectionIndicator), (e = this._resizeObserver) == null || e.disconnect(), this._resizeObserver = void 0, (t = this._directionObserver) == null || t.disconnect(), this._directionObserver = void 0, super.disconnectedCallback();
+	}
+	focus(e) {
+		if (this.disabled) return;
+		let t = this._tabs.find((e) => e.selected);
+		if (t) {
+			t.focus(e);
+			return;
+		}
+		if (this._tabs.length) {
+			this._tabs[0].focus(e);
+			return;
+		}
+		super.focus(e);
+	}
+	firstUpdated(e) {
+		var t;
+		super.firstUpdated(e), this.hasAttribute("direction") || this.setAttribute("direction", this.direction), (t = window.__swc) != null && t.DEBUG && !this.accessibleLabel && window.__swc.warn(this, `<${this.localName}> requires an "accessible-label" attribute to provide an accessible name for the tablist.`, "https://opensource.adobe.com/spectrum-web-components/components/tabs/", {
+			type: "accessibility",
+			level: "high"
+		});
+	}
+	async getUpdateComplete() {
+		let e = await super.getUpdateComplete(), t = [...this.children].map((e) => "updateComplete" in e ? e.updateComplete : Promise.resolve(!0));
+		return await Promise.all(t), e;
+	}
+};
+u = d, u.VALID_DIRECTIONS = i, u.VALID_KEYBOARD_ACTIVATIONS = t, u.VALID_DENSITIES = a, u.INDICATOR_BASE_SIZE = 100, e([s({
+	type: String,
+	reflect: !0,
+	attribute: "keyboard-activation"
+})], d.prototype, "keyboardActivation", null), e([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "density", null), e([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "direction", null), e([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([s({
+	type: String,
+	attribute: "accessible-label"
+})], d.prototype, "accessibleLabel", void 0), e([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "selected", void 0), e([c()], d.prototype, "selectionIndicatorStyle", void 0), e([c()], d.prototype, "shouldAnimate", void 0);
+//#endregion
+export { d as TabsBase };
+
+//# sourceMappingURL=Tabs.base.js.map

package/dist/components/tabs/Tabs.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.base.js","names":[],"sources":["../../../components/tabs/Tabs.base.ts"],"sourcesContent":["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';\n\nimport {\n  KEYBOARD_ACTIVATION_DEFAULT,\n  KEYBOARD_ACTIVATIONS,\n  type KeyboardActivation,\n  TAB_DENSITIES,\n  TAB_DENSITY_DEFAULT,\n  type TabDensity,\n  type TabLike,\n  type TabPanelLike,\n  TABS_DEFAULT_DIRECTION,\n  TABS_DIRECTIONS,\n  type TabsDirection,\n} from './Tabs.types.js';\n\n/**\n * Base class for a tabbed interface container.\n *\n * Manages selection state, tab/panel association, ARIA wiring,\n * keyboard navigation, and event dispatching. Concrete classes\n * supply the stylesheet, render template, and visual behaviors\n * such as the selection indicator.\n *\n * Public API follows the Spectrum 2 / Spectrum Design–aligned surface\n * from the tabs migration plan: `keyboard-activation` and `density`\n * instead of legacy `auto`, `compact`, `quiet`, `emphasized`, and\n * t-shirt `size` attributes.\n *\n * @slot - Tab items (elements with `role=\"tab\"`)\n * @slot tab-panel - Tab panel content (elements with `role=\"tabpanel\"`)\n *\n * @fires change - The selected tab has changed. Cancelable —\n *   calling `preventDefault()` reverts the selection.\n */\nexport abstract class TabsBase extends SpectrumElement {\n  // ─────────────────────────\n  //     SHARED API\n  // ─────────────────────────\n\n  /**\n   * @internal\n   *\n   * Valid direction values for validation and CEM/stories.\n   */\n  static readonly VALID_DIRECTIONS: readonly TabsDirection[] = TABS_DIRECTIONS;\n\n  /**\n   * @internal\n   */\n  static readonly VALID_KEYBOARD_ACTIVATIONS: readonly KeyboardActivation[] =\n    KEYBOARD_ACTIVATIONS;\n\n  /**\n   * @internal\n   */\n  static readonly VALID_DENSITIES: readonly TabDensity[] = TAB_DENSITIES;\n\n  /**\n   * Whether selection follows keyboard focus (`automatic`, default) or the\n   * user must press Enter or Space to activate (`manual`). Prefer `manual`\n   * when tab panels are expensive to render or not fully present in the DOM.\n   *\n   * @see https://w3c.github.io/aria-practices/#kbd_selection_follows_focus\n   */\n  @property({ type: String, reflect: true, attribute: 'keyboard-activation' })\n  public get keyboardActivation(): KeyboardActivation {\n    return this._keyboardActivation;\n  }\n\n  public set keyboardActivation(value: string) {\n    const isValid = (KEYBOARD_ACTIVATIONS as readonly string[]).includes(value);\n\n    if (!isValid && window.__swc?.DEBUG) {\n      window.__swc.warn(\n        this,\n        `<${this.localName}> expects \"keyboard-activation\" to be one of:`,\n        'https://opensource.adobe.com/spectrum-web-components/components/tabs/',\n        { issues: [...KEYBOARD_ACTIVATIONS] }\n      );\n    }\n\n    const valid = isValid\n      ? (value as KeyboardActivation)\n      : KEYBOARD_ACTIVATION_DEFAULT;\n\n    if (this._keyboardActivation === valid) {\n      return;\n    }\n\n    const old = this._keyboardActivation;\n    this._keyboardActivation = valid;\n    this.requestUpdate('keyboardActivation', old);\n  }\n\n  /** @internal */\n  private _keyboardActivation: KeyboardActivation = KEYBOARD_ACTIVATION_DEFAULT;\n\n  /**\n   * Layout density: `regular` (default) or `compact` (reduced tab spacing).\n   */\n  @property({ type: String, reflect: true })\n  public get density(): TabDensity {\n    return this._density;\n  }\n\n  public set density(value: string) {\n    const isValid = (TAB_DENSITIES as readonly string[]).includes(value);\n\n    if (!isValid && window.__swc?.DEBUG) {\n      window.__swc.warn(\n        this,\n        `<${this.localName}> expects \"density\" to be one of:`,\n        'https://opensource.adobe.com/spectrum-web-components/components/tabs/',\n        { issues: [...TAB_DENSITIES] }\n      );\n    }\n\n    const valid = isValid ? (value as TabDensity) : TAB_DENSITY_DEFAULT;\n\n    if (this._density === valid) {\n      return;\n    }\n\n    const old = this._density;\n    this._density = valid;\n    this.requestUpdate('density', old);\n  }\n\n  /** @internal */\n  private _density: TabDensity = TAB_DENSITY_DEFAULT;\n\n  /**\n   * The layout direction of the tab list.\n   *\n   * **Breaking change:** `'vertical-right'` is no longer supported.\n   * Use `'vertical'` instead.\n   *\n   * @default 'horizontal'\n   */\n  @property({ type: String, reflect: true })\n  public get direction(): TabsDirection {\n    return this._direction;\n  }\n\n  public set direction(value: TabsDirection) {\n    const isValid = (TABS_DIRECTIONS as readonly string[]).includes(value);\n\n    if (!isValid && window.__swc?.DEBUG) {\n      window.__swc.warn(\n        this,\n        `<${this.localName}> expects the \"direction\" attribute to be one of the following:`,\n        'https://opensource.adobe.com/spectrum-web-components/components/tabs/',\n        {\n          issues: [...TABS_DIRECTIONS],\n        }\n      );\n    }\n\n    const validDirection = isValid\n      ? (value as TabsDirection)\n      : TABS_DEFAULT_DIRECTION;\n\n    if (this._direction === validDirection) {\n      return;\n    }\n\n    const oldDirection = this._direction;\n    this._direction = validDirection;\n    this.requestUpdate('direction', oldDirection);\n  }\n\n  /** @internal */\n  private _direction: TabsDirection = TABS_DEFAULT_DIRECTION;\n\n  /**\n   * Whether the entire tab list is disabled. When `true`,\n   * `aria-disabled=\"true\"` is applied to the tablist element and\n   * all interaction is suppressed.\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Accessible label for the tablist. Rendered as `aria-label` on the\n   * element with `role=\"tablist\"` in the concrete template.\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  public accessibleLabel = '';\n\n  /**\n   * The `tab-id` of the currently selected tab. Setting this property\n   * updates which tab appears selected and which panel is visible.\n   */\n  @property({ type: String, reflect: true })\n  public selected = '';\n\n  // ──────────────────────\n  //     IMPLEMENTATION\n  // ──────────────────────\n\n  /** @internal */\n  private static readonly INDICATOR_BASE_SIZE = 100;\n\n  /**\n   * @internal\n   *\n   * Inline style applied to the selection indicator element.\n   * Computed from the selected tab's position and dimensions.\n   */\n  @state()\n  protected selectionIndicatorStyle = '';\n\n  /**\n   * @internal\n   *\n   * Suppresses the transition on the very first indicator placement\n   * so it doesn't animate from the origin.\n   */\n  @state()\n  protected shouldAnimate = false;\n\n  /**\n   * @internal\n   *\n   * Cached list of tab elements managed by this container. Updated\n   * via `handleTabSlotChange`.\n   */\n  private _tabs: TabLike[] = [];\n\n  /**\n   * Whether an assigned node is treated as a tab. `role=\"tab\"` is set in\n   * each tab's `firstUpdated`, so `slotchange` may run before that — accept\n   * known tab host tag names so the tab list and selection indicator sync.\n   */\n  private static isTabSlotNode(el: Element): el is TabLike {\n    if (!(el instanceof HTMLElement)) {\n      return false;\n    }\n    if (el.getAttribute('role') === 'tab') {\n      return true;\n    }\n    return el.localName === 'swc-tab';\n  }\n\n  /**\n   * Called by the concrete class when the default slot's content\n   * changes. Rebuilds the internal tab list and syncs selection\n   * state.\n   */\n  protected handleTabSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement;\n    this._tabs = slot\n      .assignedElements()\n      .filter(TabsBase.isTabSlotNode) as TabLike[];\n    this.updateCheckedState();\n    this.updateSelectionIndicator();\n  }\n\n  /**\n   * Called by the concrete class when the `tab-panel` slot's content\n   * changes. Wires up `aria-controls` / `aria-labelledby` between\n   * each tab and its panel.\n   */\n  protected handlePanelSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement;\n    const panels = slot.assignedElements() as TabPanelLike[];\n    this.managePanels(panels);\n  }\n\n  /**\n   * Click handler bound to the tablist wrapper in the concrete\n   * template. Activates the clicked tab.\n   */\n  protected handleClick(event: Event): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = event\n      .composedPath()\n      .find((el) => (el as TabLike).parentElement === this) as\n      | TabLike\n      | undefined;\n\n    if (!target || target.disabled) {\n      return;\n    }\n\n    this.selectTarget(target);\n  }\n\n  /**\n   * Full keyboard handler per WAI-ARIA APG Tabs pattern.\n   *\n   * **Horizontal:** Left/Right navigate; Up/Down ignored.\n   * **Vertical:** Up/Down navigate; Left/Right ignored.\n   * **RTL:** Left/Right swap in `dir=\"rtl\"`.\n   * **Wrapping:** Navigation wraps from last to first and vice versa.\n   * **Disabled tabs:** Disabled tabs receive focus via arrows but\n   * are not activatable by Enter/Space.\n   * **Automatic activation:** When `keyboard-activation` is `automatic`,\n   * selection follows focus on arrow key navigation.\n   * **Home/End:** Jump to first/last tab.\n   */\n  protected handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { code } = event;\n\n    if (code === 'Enter' || code === 'Space') {\n      event.preventDefault();\n      const target = event.target as TabLike | null;\n      if (target && !target.disabled) {\n        this.selectTarget(target);\n      }\n      return;\n    }\n\n    const delta = this.getNavigationDelta(code);\n    if (delta !== null) {\n      event.preventDefault();\n      this.focusByDelta(delta);\n      return;\n    }\n\n    if (code === 'Home') {\n      event.preventDefault();\n      this.focusTabAtIndex(0);\n      return;\n    }\n\n    if (code === 'End') {\n      event.preventDefault();\n      this.focusTabAtIndex(this._tabs.length - 1);\n      return;\n    }\n  }\n\n  /**\n   * Maps a keyboard code to a navigation delta (+1 or -1) based\n   * on orientation and text direction. Returns `null` when the key\n   * does not apply to the current orientation.\n   */\n  private getNavigationDelta(code: string): number | null {\n    const isRtl = this.dir === 'rtl';\n\n    if (this._direction === 'horizontal') {\n      if (code === 'ArrowRight') {\n        return isRtl ? -1 : 1;\n      }\n      if (code === 'ArrowLeft') {\n        return isRtl ? 1 : -1;\n      }\n      return null;\n    }\n\n    // Vertical: Up/Down navigate; Left/Right have no effect.\n    if (code === 'ArrowDown') {\n      return 1;\n    }\n    if (code === 'ArrowUp') {\n      return -1;\n    }\n    return null;\n  }\n\n  /**\n   * Moves focus by `delta` positions from the currently focused tab,\n   * wrapping around the list. All tabs (including disabled) receive\n   * focus per APG. In automatic activation mode, the newly focused tab\n   * is also selected.\n   */\n  private focusByDelta(delta: number): void {\n    if (!this._tabs.length) {\n      return;\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot;\n    const current = this._tabs.indexOf(root.activeElement as TabLike);\n    const start = current === -1 ? 0 : current;\n    const nextIndex = this.wrapIndex(start + delta);\n\n    this.focusTabAtIndex(nextIndex);\n  }\n\n  /**\n   * Focuses the tab at the given index and, when in automatic\n   * activation mode, also selects it. Selection runs before `focus()`\n   * so `change` listeners observe the updated value before focus moves.\n   */\n  private focusTabAtIndex(index: number): void {\n    if (!this._tabs.length) {\n      return;\n    }\n\n    const clamped = this.wrapIndex(index);\n    const tab = this._tabs[clamped];\n    if (!tab) {\n      return;\n    }\n\n    if (this._keyboardActivation === 'automatic' && !tab.disabled) {\n      this.selectTarget(tab);\n    }\n\n    this.setRovingTabindex(tab);\n    tab.focus();\n  }\n\n  /**\n   * Wraps an index into the valid range `[0, tabs.length)`.\n   */\n  private wrapIndex(index: number): number {\n    const len = this._tabs.length;\n    return ((index % len) + len) % len;\n  }\n\n  /**\n   * Updates roving tabindex so only the given tab has\n   * `tabindex=\"0\"` and all others have `tabindex=\"-1\"`.\n   */\n  private setRovingTabindex(activeTab: TabLike): void {\n    for (const tab of this._tabs) {\n      tab.tabIndex = tab === activeTab ? 0 : -1;\n    }\n  }\n\n  /**\n   * Attempts to select the given tab element. Dispatches a cancelable\n   * `change` event — if the consumer calls `preventDefault()`, the\n   * selection reverts to the previous value.\n   */\n  private selectTarget(target: TabLike): void {\n    const id = target.tabId;\n    if (!id) {\n      return;\n    }\n\n    const previous = this.selected;\n    this.selected = id;\n\n    const applyDefault = this.dispatchEvent(\n      new Event('change', {\n        cancelable: true,\n      })\n    );\n\n    if (!applyDefault) {\n      this.selected = previous;\n    }\n  }\n\n  /**\n   * Synchronizes the `selected` attribute and roving tabindex on\n   * each child tab to match the container's `selected` value.\n   * Ensures at least one tab has `tabindex=\"0\"` for Tab-key entry\n   * when the container is not disabled. When the container is\n   * disabled, all tabs get `tabindex=\"-1\"` to prevent Tab-key\n   * entry into the tab list.\n   */\n  private updateCheckedState(): void {\n    let hasTabStop = false;\n\n    for (const tab of this._tabs) {\n      tab.selected = false;\n    }\n\n    if (this.selected) {\n      const currentTab = this._tabs.find((el) => el.tabId === this.selected);\n\n      if (currentTab) {\n        currentTab.selected = true;\n        if (!this.disabled) {\n          this.setRovingTabindex(currentTab);\n          hasTabStop = true;\n        }\n      } else {\n        this.selected = '';\n      }\n    }\n\n    if (this.disabled) {\n      for (const tab of this._tabs) {\n        tab.tabIndex = -1;\n      }\n    } else if (!hasTabStop && this._tabs.length) {\n      this._tabs[0].tabIndex = 0;\n    }\n  }\n\n  /**\n   * Wires up cross-element ARIA relationships between tabs and\n   * panels. Each tab gets `aria-controls` pointing at its panel's\n   * `id`, and each panel gets `aria-labelledby` pointing at its\n   * tab's `id`.\n   */\n  private managePanels(panels: TabPanelLike[]): void {\n    for (const panel of panels) {\n      const { tabId, id } = panel;\n      const tab = this.querySelector(`[role=\"tab\"][tab-id=\"${tabId}\"]`);\n\n      if (tab) {\n        tab.setAttribute('aria-controls', id);\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n\n      panel.selected = tabId === this.selected;\n    }\n  }\n\n  // ───────────────────────────────────\n  //     SELECTION INDICATOR\n  // ───────────────────────────────────\n\n  /**\n   * @internal\n   *\n   * Recalculates the selection indicator's position and size based\n   * on the currently selected tab element. Uses CSS transforms for\n   * smooth animation between tab positions.\n   *\n   * The indicator is a fixed-size element (100px base) that gets\n   * `scaleX`/`scaleY` to match the selected tab's width/height,\n   * and `translateX`/`translateY` to match its offset position.\n   */\n  protected updateSelectionIndicator = async (): Promise<void> => {\n    const selectedElement = this._tabs.find((el) => el.selected);\n    if (!selectedElement) {\n      this.selectionIndicatorStyle =\n        'transform: translateX(0px) scaleX(0) scaleY(0)';\n      return;\n    }\n\n    const tablist = this.renderRoot?.querySelector('.tablist');\n    if (!tablist) {\n      return;\n    }\n\n    await Promise.all([\n      (selectedElement as HTMLElement & { updateComplete?: Promise<boolean> })\n        .updateComplete ?? Promise.resolve(),\n      document.fonts ? document.fonts.ready : Promise.resolve(),\n    ]);\n\n    const tabRect = selectedElement.getBoundingClientRect();\n    const listRect = tablist.getBoundingClientRect();\n\n    if (this._direction === 'horizontal') {\n      const isRtl = getComputedStyle(this).direction === 'rtl';\n      const offset = isRtl\n        ? tabRect.right - listRect.right\n        : tabRect.left - listRect.left;\n      const scale = tabRect.width / TabsBase.INDICATOR_BASE_SIZE;\n      this.selectionIndicatorStyle = `transform: translateX(${offset}px) scaleX(${scale})`;\n    } else {\n      const top = tabRect.top - listRect.top;\n      const scale = tabRect.height / TabsBase.INDICATOR_BASE_SIZE;\n      this.selectionIndicatorStyle = `transform: translateY(${top}px) scaleY(${scale})`;\n    }\n\n    if (!this.shouldAnimate) {\n      await this.updateComplete;\n      this.shouldAnimate = true;\n    }\n  };\n\n  /** @internal */\n  private _resizeObserver?: ResizeObserver;\n\n  /**\n   * @internal\n   *\n   * Watches for `dir` attribute changes so the indicator recalculates\n   * when writing direction flips at runtime. `getComputedStyle` in\n   * `updateSelectionIndicator` resolves inherited direction correctly,\n   * but nothing else observes it: a `dir` flip on the document root or\n   * an ancestor doesn't resize this element, so the `ResizeObserver`\n   * below won't catch it. Mirrors the `dir`-watching pattern in\n   * `placement-controller.ts`.\n   */\n  private _directionObserver?: MutationObserver;\n\n  // ───────────────────────────────────\n  //     LIFECYCLE\n  // ───────────────────────────────────\n\n  protected override willUpdate(changes: PropertyValues): void {\n    if (!this.hasUpdated) {\n      const selectedChild = this.querySelector(\n        ':scope > [selected]'\n      ) as TabLike | null;\n\n      if (selectedChild) {\n        this.selectTarget(selectedChild);\n      }\n    }\n\n    super.willUpdate(changes);\n\n    if (changes.has('selected')) {\n      if (this._tabs.length) {\n        this.updateCheckedState();\n      }\n\n      const previousValue = changes.get('selected') as string | undefined;\n      if (previousValue) {\n        const previous = this.querySelector(\n          `[role=\"tabpanel\"][tab-id=\"${previousValue}\"]`\n        ) as TabPanelLike | null;\n\n        if (previous) {\n          previous.selected = false;\n        }\n      }\n\n      const next = this.querySelector(\n        `[role=\"tabpanel\"][tab-id=\"${this.selected}\"]`\n      ) as TabPanelLike | null;\n\n      if (next) {\n        next.selected = true;\n      }\n\n      this.updateSelectionIndicator();\n    }\n\n    if (changes.has('disabled') && this._tabs.length) {\n      this.updateCheckedState();\n    }\n\n    if (changes.has('direction')) {\n      this.updateSelectionIndicator();\n    }\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('resize', this.updateSelectionIndicator);\n    if ('fonts' in document) {\n      document.fonts.addEventListener(\n        'loadingdone',\n        this.updateSelectionIndicator\n      );\n    }\n    this._resizeObserver = new ResizeObserver(() => {\n      this.updateSelectionIndicator();\n    });\n    this._resizeObserver.observe(this);\n\n    this._directionObserver = new MutationObserver(() => {\n      this.updateSelectionIndicator();\n    });\n    const observeDir = (node: Element | null | undefined) => {\n      if (node) {\n        this._directionObserver?.observe(node, {\n          attributes: true,\n          attributeFilter: ['dir'],\n        });\n      }\n    };\n    observeDir(this.ownerDocument.documentElement);\n    observeDir(this.closest('[dir]'));\n  }\n\n  public override disconnectedCallback(): void {\n    window.removeEventListener('resize', this.updateSelectionIndicator);\n    if ('fonts' in document) {\n      document.fonts.removeEventListener(\n        'loadingdone',\n        this.updateSelectionIndicator\n      );\n    }\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = undefined;\n    this._directionObserver?.disconnect();\n    this._directionObserver = undefined;\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Focuses the selected tab, or the first tab when none is selected yet.\n   * Slotted tabs live in the light DOM; this is more reliable than relying\n   * only on shadow `delegatesFocus` across browsers and test harnesses.\n   */\n  public override focus(options?: FocusOptions): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const selectedTab = this._tabs.find((tab) => tab.selected);\n    if (selectedTab) {\n      (selectedTab as HTMLElement).focus(options);\n      return;\n    }\n\n    if (this._tabs.length) {\n      (this._tabs[0] as HTMLElement).focus(options);\n      return;\n    }\n\n    super.focus(options);\n  }\n\n  protected override firstUpdated(changes: PropertyValues): void {\n    super.firstUpdated(changes);\n\n    if (!this.hasAttribute('direction')) {\n      this.setAttribute('direction', this.direction);\n    }\n\n    if (window.__swc?.DEBUG && !this.accessibleLabel) {\n      window.__swc.warn(\n        this,\n        `<${this.localName}> requires an \"accessible-label\" attribute to provide an accessible name for the tablist.`,\n        'https://opensource.adobe.com/spectrum-web-components/components/tabs/',\n        { type: 'accessibility', level: 'high' }\n      );\n    }\n  }\n\n  /**\n   * Waits for all child tab elements to finish their update cycle\n   * before resolving so layout-dependent callers see stable geometry.\n   */\n  public override async getUpdateComplete(): Promise<boolean> {\n    const complete = await super.getUpdateComplete();\n\n    const children = [...this.children] as HTMLElement[];\n    const childUpdates = children.map((child) => {\n      if ('updateComplete' in child) {\n        return (child as unknown as { updateComplete: Promise<boolean> })\n          .updateComplete;\n      }\n      return Promise.resolve(true);\n    });\n\n    await Promise.all(childUpdates);\n    return complete;\n  }\n}\n"],"mappings":"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"}