@adobe/spectrum-wc-core 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/components/progress-circle/ProgressCircle.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.base.js","names":[],"sources":["../../../components/progress-circle/ProgressCircle.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 */\n\nimport { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport {\n  LanguageResolutionController,\n  languageResolverUpdatedSymbol,\n} from '@adobe/spectrum-wc-core/controllers/language-resolution.js';\nimport { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';\nimport { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';\n\nimport {\n  PROGRESS_CIRCLE_VALID_SIZES,\n  ProgressCircleStaticColor,\n} from './ProgressCircle.types.js';\n\n/**\n * A progress circle component that visually represents the completion progress of a task.\n * Can be used in both determinate (with specific progress value) and indeterminate (loading) states.\n *\n * @attribute {ElementSize} size - The size of the progress circle.\n */\nexport abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {\n  validSizes: PROGRESS_CIRCLE_VALID_SIZES,\n}) {\n  /**\n   * The size of the progress circle.\n   *\n   * @default m\n   */\n  declare public size: (typeof PROGRESS_CIRCLE_VALID_SIZES)[number];\n\n  // ─────────────────────────\n  //     API TO OVERRIDE\n  // ─────────────────────────\n\n  /**\n   * @internal\n   *\n   * A readonly array of the valid static colors for the progress circle.\n   *\n   * This is an actual internal property, intended not for customer use\n   * but for use in internal validation logic, stories, tests, etc.\n   *\n   * Because S1 and S2 support different static colors, the value of this\n   * property must be set in each subclass.\n   */\n  static readonly STATIC_COLORS: readonly string[];\n\n  /**\n   * @internal\n   *\n   * Static color variant for use on different backgrounds.\n   *\n   * This is a public property, but its valid values vary between S1 and S2,\n   * so the property (and its docs) need to be redefined in each subclass.\n   *\n   * The type declared here is a union of the valid values for S1 and S2,\n   * and should be narrowed in each subclass.\n   */\n  @property({ type: String, reflect: true, attribute: 'static-color' })\n  public staticColor?: ProgressCircleStaticColor;\n\n  // ──────────────────\n  //     SHARED API\n  // ──────────────────\n\n  /**\n   * Accessible label for the progress circle.\n   *\n   * Used to provide context about what is loading or progressing.\n   * When no accessible name is provided (no label, aria-label, or\n   * aria-labelledby), a default \"Loading\" label is applied.\n   *\n   * @todo Localize the default \"Loading\" fallback via LanguageResolutionController\n   * once a runtime i18n system for static strings is available.\n   */\n  @property({ type: String })\n  public label = '';\n\n  /**\n   * Progress value from 0 to 100.\n   *\n   * When `null` (indeterminate), the component shows a loading animation.\n   * Setting a number switches to determinate mode. Removing the `progress`\n   * attribute or setting this property to `null` returns to indeterminate.\n   * Values outside 0–100 or non-finite numbers are clamped (non-finite becomes 0).\n   *\n   * Reflected to the `progress` attribute when set; the attribute is omitted when indeterminate.\n   */\n  @property({ type: Number, reflect: true })\n  public progress: number | null = null;\n\n  private languageResolver = new LanguageResolutionController(this);\n\n  // ──────────────────────\n  //     IMPLEMENTATION\n  // ──────────────────────\n\n  /**\n   * @todo Localize via LanguageResolutionController once a runtime i18n\n   * system for static strings is available.\n   */\n  private static readonly DEFAULT_LABEL = 'Loading';\n\n  /** True when light DOM has element nodes or non-whitespace text (no default slot). */\n  private static hasMeaningfulLightDomChildren(host: HTMLElement): boolean {\n    for (const node of host.childNodes) {\n      if (\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())\n      ) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  private hasAccessibleName(): boolean {\n    return Boolean(\n      this.label ||\n      this.getAttribute('aria-label') ||\n      this.getAttribute('aria-labelledby')\n    );\n  }\n\n  private static clampProgress(value: number): number {\n    if (!Number.isFinite(value)) {\n      return 0;\n    }\n    return Math.min(100, Math.max(0, value));\n  }\n\n  private formatProgress(): string {\n    return new Intl.NumberFormat(this.languageResolver.language, {\n      style: 'percent',\n      unitDisplay: 'narrow',\n    }).format((this.progress ?? 0) / 100);\n  }\n\n  private warnDeprecatedLightDomChildren(): void {\n    if (!window.__swc?.DEBUG) {\n      return;\n    }\n    if (!ProgressCircleBase.hasMeaningfulLightDomChildren(this)) {\n      return;\n    }\n    window.__swc.warn(\n      this,\n      `<${this.localName}> no longer has a default slot. Light DOM children are not rendered and are not used for an accessible name. Use the \"label\" attribute or property, or \"aria-label\" / \"aria-labelledby\" on the host instead.`,\n      'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/components-progress-circle--docs',\n      { level: 'deprecation' }\n    );\n  }\n\n  private warnMissingAccessibleName(): void {\n    if (!window.__swc?.DEBUG) {\n      return;\n    }\n    window.__swc?.warn(\n      this,\n      `<${this.localName}> requires an accessible name. A default label of \"${ProgressCircleBase.DEFAULT_LABEL}\" has been applied, but a more specific label should be provided via:`,\n      'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/components-progress-circle--docs',\n      {\n        type: 'accessibility',\n        issues: [\n          'value supplied to the \"label\" attribute, which will be displayed visually as part of the element, or',\n          'value supplied to the \"aria-label\" attribute, which will only be provided to screen readers, or',\n          'an element ID reference supplied to the \"aria-labelledby\" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.',\n        ],\n      }\n    );\n  }\n\n  protected override willUpdate(changes: PropertyValues): void {\n    if (changes.has('progress') && this.progress !== null) {\n      const clamped = ProgressCircleBase.clampProgress(this.progress);\n      if (clamped !== this.progress) {\n        this.progress = clamped;\n      }\n    }\n    super.willUpdate(changes);\n  }\n\n  protected override firstUpdated(changes: PropertyValues): void {\n    super.firstUpdated(changes);\n    this.setAttribute('role', 'progressbar');\n  }\n\n  protected override updated(changes: PropertyValues): void {\n    super.updated(changes);\n\n    if (changes.has('progress')) {\n      if (this.progress !== null && this.progress >= 0) {\n        this.setAttribute('aria-valuemin', '0');\n        this.setAttribute('aria-valuemax', '100');\n        this.setAttribute('aria-valuenow', String(this.progress));\n        this.setAttribute('aria-valuetext', this.formatProgress());\n      } else {\n        this.removeAttribute('aria-valuemin');\n        this.removeAttribute('aria-valuemax');\n        this.removeAttribute('aria-valuenow');\n        this.removeAttribute('aria-valuetext');\n      }\n    }\n\n    if (this.progress !== null && changes.has(languageResolverUpdatedSymbol)) {\n      this.setAttribute('aria-valuetext', this.formatProgress());\n    }\n\n    if (changes.has('label')) {\n      if (this.label.length) {\n        this.setAttribute('aria-label', this.label);\n      } else if (changes.get('label') === this.getAttribute('aria-label')) {\n        this.removeAttribute('aria-label');\n      }\n    }\n\n    // Apply default accessible name fallback after handling explicit label changes.\n    if (changes.has('label') && !this.hasAccessibleName()) {\n      this.setAttribute('aria-label', ProgressCircleBase.DEFAULT_LABEL);\n      this.warnMissingAccessibleName();\n    }\n\n    if (window.__swc?.DEBUG) {\n      this.warnDeprecatedLightDomChildren();\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProgressCircle.base.js","names":[],"sources":["../../../components/progress-circle/ProgressCircle.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 */\n\nimport { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport {\n  LanguageResolutionController,\n  languageResolverUpdatedSymbol,\n} from '@adobe/spectrum-wc-core/controllers/language-resolution.js';\nimport { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';\nimport { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';\nimport {\n  isDebug,\n  validateEnum,\n  warnIf,\n} from '@adobe/spectrum-wc-core/utils/index.js';\n\nimport {\n  PROGRESS_CIRCLE_VALID_SIZES,\n  ProgressCircleStaticColor,\n} from './ProgressCircle.types.js';\n\n/**\n * A progress circle component that visually represents the completion progress of a task.\n * Can be used in both determinate (with specific progress value) and indeterminate (loading) states.\n *\n * @attribute {ElementSize} size - The size of the progress circle.\n */\nexport abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {\n  validSizes: PROGRESS_CIRCLE_VALID_SIZES,\n}) {\n  /**\n   * The size of the progress circle.\n   *\n   * @default m\n   */\n  declare public size: (typeof PROGRESS_CIRCLE_VALID_SIZES)[number];\n\n  // ─────────────────────────\n  //     API TO OVERRIDE\n  // ─────────────────────────\n\n  /**\n   * @internal\n   *\n   * A readonly array of the valid static colors for the progress circle.\n   *\n   * This is an actual internal property, intended not for customer use\n   * but for use in internal validation logic, stories, tests, etc.\n   *\n   * Because S1 and S2 support different static colors, the value of this\n   * property must be set in each subclass.\n   */\n  static readonly STATIC_COLORS: readonly string[];\n\n  /**\n   * @internal\n   *\n   * Static color variant for use on different backgrounds.\n   *\n   * This is a public property, but its valid values vary between S1 and S2,\n   * so the property (and its docs) need to be redefined in each subclass.\n   *\n   * The type declared here is a union of the valid values for S1 and S2,\n   * and should be narrowed in each subclass.\n   */\n  @property({ type: String, reflect: true, attribute: 'static-color' })\n  public staticColor?: ProgressCircleStaticColor;\n\n  // ──────────────────\n  //     SHARED API\n  // ──────────────────\n\n  /**\n   * Accessible label for the progress circle.\n   *\n   * Used to provide context about what is loading or progressing.\n   * When no accessible name is provided (no label, aria-label, or\n   * aria-labelledby), a default \"Loading\" label is applied.\n   *\n   * @todo Localize the default \"Loading\" fallback via LanguageResolutionController\n   * once a runtime i18n system for static strings is available.\n   */\n  @property({ type: String })\n  public label = '';\n\n  /**\n   * Progress value from 0 to 100.\n   *\n   * When `null` (indeterminate), the component shows a loading animation.\n   * Setting a number switches to determinate mode. Removing the `progress`\n   * attribute or setting this property to `null` returns to indeterminate.\n   * Values outside 0–100 or non-finite numbers are clamped (non-finite becomes 0).\n   *\n   * Reflected to the `progress` attribute when set; the attribute is omitted when indeterminate.\n   */\n  @property({ type: Number, reflect: true })\n  public progress: number | null = null;\n\n  private languageResolver = new LanguageResolutionController(this);\n\n  // ──────────────────────\n  //     IMPLEMENTATION\n  // ──────────────────────\n\n  /**\n   * @todo Localize via LanguageResolutionController once a runtime i18n\n   * system for static strings is available.\n   */\n  private static readonly DEFAULT_LABEL = 'Loading';\n\n  /** True when light DOM has element nodes or non-whitespace text (no default slot). */\n  private static hasMeaningfulLightDomChildren(host: HTMLElement): boolean {\n    for (const node of host.childNodes) {\n      if (\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())\n      ) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  private hasAccessibleName(): boolean {\n    return Boolean(\n      this.label ||\n      this.getAttribute('aria-label') ||\n      this.getAttribute('aria-labelledby')\n    );\n  }\n\n  private static clampProgress(value: number): number {\n    if (!Number.isFinite(value)) {\n      return 0;\n    }\n    return Math.min(100, Math.max(0, value));\n  }\n\n  private formatProgress(): string {\n    return new Intl.NumberFormat(this.languageResolver.language, {\n      style: 'percent',\n      unitDisplay: 'narrow',\n    }).format((this.progress ?? 0) / 100);\n  }\n\n  private warnDeprecatedLightDomChildren(): void {\n    warnIf(\n      this,\n      ProgressCircleBase.hasMeaningfulLightDomChildren(this),\n      `<${this.localName}> no longer has a default slot. Light DOM children are not rendered and are not used for an accessible name. Use the \"label\" attribute or property, or \"aria-label\" / \"aria-labelledby\" on the host instead.`,\n      'https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs',\n      { level: 'deprecation' }\n    );\n  }\n\n  protected override willUpdate(changes: PropertyValues): void {\n    if (changes.has('progress') && this.progress !== null) {\n      const clamped = ProgressCircleBase.clampProgress(this.progress);\n      if (clamped !== this.progress) {\n        this.progress = clamped;\n      }\n    }\n\n    super.willUpdate(changes);\n  }\n\n  protected override firstUpdated(changes: PropertyValues): void {\n    super.firstUpdated(changes);\n    this.setAttribute('role', 'progressbar');\n  }\n\n  protected override updated(changes: PropertyValues): void {\n    super.updated(changes);\n\n    if (changes.has('progress')) {\n      if (this.progress !== null && this.progress >= 0) {\n        this.setAttribute('aria-valuemin', '0');\n        this.setAttribute('aria-valuemax', '100');\n        this.setAttribute('aria-valuenow', String(this.progress));\n        this.setAttribute('aria-valuetext', this.formatProgress());\n      } else {\n        this.removeAttribute('aria-valuemin');\n        this.removeAttribute('aria-valuemax');\n        this.removeAttribute('aria-valuenow');\n        this.removeAttribute('aria-valuetext');\n      }\n    }\n\n    if (this.progress !== null && changes.has(languageResolverUpdatedSymbol)) {\n      this.setAttribute('aria-valuetext', this.formatProgress());\n    }\n\n    if (changes.has('label')) {\n      if (this.label.length) {\n        this.setAttribute('aria-label', this.label);\n      } else if (changes.get('label') === this.getAttribute('aria-label')) {\n        this.removeAttribute('aria-label');\n      }\n    }\n\n    // Apply default accessible name fallback after handling explicit label changes.\n    if (changes.has('label') && !this.hasAccessibleName()) {\n      this.setAttribute('aria-label', ProgressCircleBase.DEFAULT_LABEL);\n      warnIf(\n        this,\n        true,\n        `<${this.localName}> requires an accessible name. A default label of \"${ProgressCircleBase.DEFAULT_LABEL}\" has been applied, but a more specific label should be provided via:`,\n        'https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs',\n        {\n          type: 'accessibility',\n          issues: [\n            'value supplied to the \"label\" attribute, which will be displayed visually as part of the element, or',\n            'value supplied to the \"aria-label\" attribute, which will only be provided to screen readers, or',\n            'an element ID reference supplied to the \"aria-labelledby\" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.',\n          ],\n        }\n      );\n    }\n\n    if (changes.has('staticColor') && this.staticColor !== undefined) {\n      const constructor = this.constructor as typeof ProgressCircleBase;\n      validateEnum(this, {\n        prop: 'static-color',\n        value: this.staticColor,\n        valid: constructor.STATIC_COLORS,\n        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs',\n      });\n    }\n\n    // Guard the call site: `hasMeaningfulLightDomChildren` traverses the light\n    // DOM and the message is built eagerly as an argument, so both would run on\n    // every `updated()` (including production) if passed straight to `warnIf`.\n    // `isDebug()` skips that work entirely when validation is off.\n    if (isDebug()) {\n      this.warnDeprecatedLightDomChildren();\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/components/status-light/StatusLight.base.d.ts

@@ -64,6 +64,6 @@ export declare abstract class StatusLightBase extends StatusLightBase_base {
      * and should be narrowed in each subclass.
      */
     variant: StatusLightVariant;
-    protected updated(changes: PropertyValues): void;
+    protected update(changes: PropertyValues): void;
 }
 export {};

package/dist/components/status-light/StatusLight.base.js

@@ -3,27 +3,30 @@ import { STATUS_LIGHT_VALID_SIZES as t } from "./StatusLight.types.js";
 import { property as n } from "lit/decorators.js";
 import { SpectrumElement as r } from "@adobe/spectrum-wc-core/element/index.js";
 import { SizedMixin as i } from "@adobe/spectrum-wc-core/mixins/index.js";
+import { validateEnum as a, warnIf as o } from "@adobe/spectrum-wc-core/utils/index.js";
 //#region components/status-light/StatusLight.base.ts
-var a = class extends i(r, {
+var s = class extends i(r, {
 	validSizes: t,
 	noDefaultSize: !0
 }) {
 	constructor(...e) {
 		super(...e), this.variant = "neutral";
 	}
-	updated(e) {
-		var t;
-		if (super.updated(e), (t = window.__swc) != null && t.DEBUG) {
-			let e = this.constructor;
-			this.variant === "accent" ? window.__swc.warn(this, `<${this.localName}> does not support the "accent" variant in Spectrum 2. Use "neutral" or "info" depending on intent.`, "https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs", { level: "deprecation" }) : e.VARIANTS.includes(this.variant) || window.__swc.warn(this, `<${this.localName}> element expects the "variant" attribute to be one of the following:`, "https://opensource.adobe.com/spectrum-web-components/components/status-light/#variants", { issues: [...e.VARIANTS] }), this.hasAttribute("disabled") && window.__swc.warn(this, `<${this.localName}> does not support the "disabled" attribute. It was deprecated in Spectrum 1 and has been removed in Spectrum 2.`, "https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs", { level: "deprecation" });
-		}
+	update(e) {
+		let t = this.constructor;
+		this.variant === "accent" ? o(this, !0, `<${this.localName}> does not support the "accent" variant in Spectrum 2. Use "neutral" or "info" depending on intent.`, "https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs", { level: "deprecation" }) : a(this, {
+			prop: "variant",
+			value: this.variant,
+			valid: t.VARIANTS,
+			url: "https://spectrum-web-components.adobe.com/?path=/docs/components-status-light--docs"
+		}), o(this, this.hasAttribute("disabled"), `<${this.localName}> does not support the "disabled" attribute. It was deprecated in Spectrum 1 and has been removed in Spectrum 2.`, "https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs", { level: "deprecation" }), super.update(e);
 	}
 };
 e([n({
 	type: String,
 	reflect: !0
-})], a.prototype, "variant", void 0);
+})], s.prototype, "variant", void 0);
 //#endregion
-export { a as StatusLightBase };
+export { s as StatusLightBase };
 
 //# sourceMappingURL=StatusLight.base.js.map

package/dist/components/status-light/StatusLight.base.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusLight.base.js","names":[],"sources":["../../../components/status-light/StatusLight.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';\nimport { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';\n\nimport {\n  STATUS_LIGHT_VALID_SIZES,\n  type StatusLightSize,\n  type StatusLightVariant,\n} from './StatusLight.types.js';\n\n/**\n * A status light is a great way to convey semantic meaning and the condition of an entity, such as statuses and categories. It provides visual indicators through colored dots accompanied by descriptive text.\n *\n * @slot - The text label of the status light.\n * @attribute {ElementSize} size - The size of the status light.\n */\nexport abstract class StatusLightBase extends SizedMixin(SpectrumElement, {\n  validSizes: STATUS_LIGHT_VALID_SIZES,\n  noDefaultSize: true,\n}) {\n  /**\n   * The size of the status light.\n   */\n  declare public size: StatusLightSize;\n\n  // ─────────────────────────\n  //     API TO OVERRIDE\n  // ─────────────────────────\n\n  /**\n   * @internal\n   *\n   * A readonly array of the valid color variants for the status light.\n   *\n   * This is an actual internal property, intended not for customer use\n   * but for use in internal validation logic, stories, tests, etc.\n   *\n   * Because S1 and S2 support different color variants, the value of this\n   * property must be set in each subclass.\n   */\n  static readonly VARIANTS_COLOR: readonly string[];\n\n  /**\n   * @internal\n   *\n   * A readonly array of the valid semantic variants for the status light.\n   *\n   * This is an actual internal property, intended not for customer use\n   * but for use in internal validation logic, stories, tests, etc.\n   *\n   * Because S1 and S2 support different semantic variants, the value of this\n   * property must be set in each subclass.\n   */\n  static readonly VARIANTS_SEMANTIC: readonly string[];\n\n  /**\n   * @internal\n   *\n   * A readonly array of all valid variants for the status light.\n   *\n   * This is an actual internal property, intended not for customer use\n   * but for use in internal validation logic, stories, tests, etc.\n   *\n   * Because S1 and S2 support different variants, the value of this\n   * property must be set in each subclass.\n   */\n  static readonly VARIANTS: readonly string[];\n\n  /**\n   * @internal\n   *\n   * The variant of the status light.\n   *\n   * This is a public property, but its valid values vary between S1 and S2,\n   * so the property (and its docs) need to be redefined in each subclass.\n   *\n   * The type declared here is a union of the valid values for S1 and S2,\n   * and should be narrowed in each subclass.\n   */\n  @property({ type: String, reflect: true })\n  public variant: StatusLightVariant = 'neutral';\n\n  // ──────────────────────\n  //     IMPLEMENTATION\n  // ──────────────────────\n\n  protected override updated(changes: PropertyValues): void {\n    super.updated(changes);\n    if (window.__swc?.DEBUG) {\n      const constructor = this.constructor as typeof StatusLightBase;\n      // @ts-expect-error -- intentional runtime guard: 1st-gen consumers may pass 'accent'\n      if (this.variant === 'accent') {\n        window.__swc.warn(\n          this,\n          `<${this.localName}> does not support the \"accent\" variant in Spectrum 2. Use \"neutral\" or \"info\" depending on intent.`,\n          'https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs',\n          { level: 'deprecation' }\n        );\n      } else if (!constructor.VARIANTS.includes(this.variant)) {\n        window.__swc.warn(\n          this,\n          `<${this.localName}> element expects the \"variant\" attribute to be one of the following:`,\n          'https://opensource.adobe.com/spectrum-web-components/components/status-light/#variants',\n          {\n            issues: [...constructor.VARIANTS],\n          }\n        );\n      }\n      if (this.hasAttribute('disabled')) {\n        window.__swc.warn(\n          this,\n          `<${this.localName}> does not support the \"disabled\" attribute. It was deprecated in Spectrum 1 and has been removed in Spectrum 2.`,\n          'https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs',\n          { level: 'deprecation' }\n        );\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AA6BA,IAAsB,IAAtB,cAA8C,EAAW,GAAiB;CACxE,YAAY;CACZ,eAAe;CAChB,CAAC,CAAC;;8BA6DoC;;CAMrC,QAA2B,GAA+B;;AAExD,MADA,MAAM,QAAQ,EAAQ,GACtB,IAAI,OAAO,UAAA,QAAA,EAAO,OAAO;GACvB,IAAM,IAAc,KAAK;AAmBzB,GAjBI,KAAK,YAAY,WACnB,OAAO,MAAM,KACX,MACA,IAAI,KAAK,UAAU,sGACnB,4FACA,EAAE,OAAO,eAAe,CACzB,GACS,EAAY,SAAS,SAAS,KAAK,QAAQ,IACrD,OAAO,MAAM,KACX,MACA,IAAI,KAAK,UAAU,wEACnB,0FACA,EACE,QAAQ,CAAC,GAAG,EAAY,SAAS,EAClC,CACF,EAEC,KAAK,aAAa,WAAW,IAC/B,OAAO,MAAM,KACX,MACA,IAAI,KAAK,UAAU,mHACnB,4FACA,EAAE,OAAO,eAAe,CACzB;;;;GAnCN,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA"}
+{"version":3,"file":"StatusLight.base.js","names":[],"sources":["../../../components/status-light/StatusLight.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';\nimport { SizedMixin } from '@adobe/spectrum-wc-core/mixins/index.js';\nimport { validateEnum, warnIf } from '@adobe/spectrum-wc-core/utils/index.js';\n\nimport {\n  STATUS_LIGHT_VALID_SIZES,\n  type StatusLightSize,\n  type StatusLightVariant,\n} from './StatusLight.types.js';\n\n/**\n * A status light is a great way to convey semantic meaning and the condition of an entity, such as statuses and categories. It provides visual indicators through colored dots accompanied by descriptive text.\n *\n * @slot - The text label of the status light.\n * @attribute {ElementSize} size - The size of the status light.\n */\nexport abstract class StatusLightBase extends SizedMixin(SpectrumElement, {\n  validSizes: STATUS_LIGHT_VALID_SIZES,\n  noDefaultSize: true,\n}) {\n  /**\n   * The size of the status light.\n   */\n  declare public size: StatusLightSize;\n\n  // ─────────────────────────\n  //     API TO OVERRIDE\n  // ─────────────────────────\n\n  /**\n   * @internal\n   *\n   * A readonly array of the valid color variants for the status light.\n   *\n   * This is an actual internal property, intended not for customer use\n   * but for use in internal validation logic, stories, tests, etc.\n   *\n   * Because S1 and S2 support different color variants, the value of this\n   * property must be set in each subclass.\n   */\n  static readonly VARIANTS_COLOR: readonly string[];\n\n  /**\n   * @internal\n   *\n   * A readonly array of the valid semantic variants for the status light.\n   *\n   * This is an actual internal property, intended not for customer use\n   * but for use in internal validation logic, stories, tests, etc.\n   *\n   * Because S1 and S2 support different semantic variants, the value of this\n   * property must be set in each subclass.\n   */\n  static readonly VARIANTS_SEMANTIC: readonly string[];\n\n  /**\n   * @internal\n   *\n   * A readonly array of all valid variants for the status light.\n   *\n   * This is an actual internal property, intended not for customer use\n   * but for use in internal validation logic, stories, tests, etc.\n   *\n   * Because S1 and S2 support different variants, the value of this\n   * property must be set in each subclass.\n   */\n  static readonly VARIANTS: readonly string[];\n\n  /**\n   * @internal\n   *\n   * The variant of the status light.\n   *\n   * This is a public property, but its valid values vary between S1 and S2,\n   * so the property (and its docs) need to be redefined in each subclass.\n   *\n   * The type declared here is a union of the valid values for S1 and S2,\n   * and should be narrowed in each subclass.\n   */\n  @property({ type: String, reflect: true })\n  public variant: StatusLightVariant = 'neutral';\n\n  // ──────────────────────\n  //     IMPLEMENTATION\n  // ──────────────────────\n\n  protected override update(changes: PropertyValues): void {\n    const constructor = this.constructor as typeof StatusLightBase;\n    // @ts-expect-error -- intentional runtime guard: 1st-gen consumers may pass 'accent'\n    if (this.variant === 'accent') {\n      warnIf(\n        this,\n        true,\n        `<${this.localName}> does not support the \"accent\" variant in Spectrum 2. Use \"neutral\" or \"info\" depending on intent.`,\n        'https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs',\n        { level: 'deprecation' }\n      );\n    } else {\n      validateEnum(this, {\n        prop: 'variant',\n        value: this.variant,\n        valid: constructor.VARIANTS,\n        url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-status-light--docs',\n      });\n    }\n    warnIf(\n      this,\n      this.hasAttribute('disabled'),\n      `<${this.localName}> does not support the \"disabled\" attribute. It was deprecated in Spectrum 1 and has been removed in Spectrum 2.`,\n      'https://spectrum-web-components.adobe.com/?path=/docs/status-light-migration-guide--docs',\n      { level: 'deprecation' }\n    );\n\n    super.update(changes);\n  }\n}\n"],"mappings":";;;;;;;AA8BA,IAAsB,IAAtB,cAA8C,EAAW,GAAiB;CACxE,YAAY;CACZ,eAAe;CAChB,CAAC,CAAC;;8BA6DoC;;CAMrC,OAA0B,GAA+B;EACvD,IAAM,IAAc,KAAK;AA0BzB,EAxBI,KAAK,YAAY,WACnB,EACE,MACA,IACA,IAAI,KAAK,UAAU,sGACnB,4FACA,EAAE,OAAO,eAAe,CACzB,GAED,EAAa,MAAM;GACjB,MAAM;GACN,OAAO,KAAK;GACZ,OAAO,EAAY;GACnB,KAAK;GACN,CAAC,EAEJ,EACE,MACA,KAAK,aAAa,WAAW,EAC7B,IAAI,KAAK,UAAU,mHACnB,4FACA,EAAE,OAAO,eAAe,CACzB,EAED,MAAM,OAAO,EAAQ;;;GAlCtB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA"}

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

@@ -10,7 +10,7 @@ import { SpectrumElement } from '../../element/index.js';
  *
  * 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.
+ * wrote it in markup. This behavior is preserved in gen2.
  *
  * The panel removes its own
  * `tabindex` on `focusin` so that Tab presses inside the panel

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

@@ -1 +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"}
+{"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 gen2.\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/Tabs.base.js

@@ -3,8 +3,9 @@ import { KEYBOARD_ACTIVATIONS as t, KEYBOARD_ACTIVATION_DEFAULT as n, TABS_DEFAU
 import { property as s, state as c } from "lit/decorators.js";
 import { FocusgroupNavigationController as l, focusgroupNavigationActiveChange as u } from "@adobe/spectrum-wc-core/controllers/index.js";
 import { SpectrumElement as d } from "@adobe/spectrum-wc-core/element/index.js";
+import { validateEnum as f, warnIf as p } from "@adobe/spectrum-wc-core/utils/index.js";
 //#region components/tabs/Tabs.base.ts
-var f, p = class e extends d {
+var m, h = class e extends d {
 	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._navigation = new l(this, {
 			direction: this._direction,
@@ -35,37 +36,49 @@ var f, p = class e extends d {
 		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);
+		let r = t.includes(e);
+		f(this, {
+			prop: "keyboard-activation",
+			value: e,
+			valid: t,
+			url: "https://spectrum-web-components.adobe.com/?path=/docs/components-tabs--docs"
+		});
+		let i = r ? e : n;
+		if (this._keyboardActivation === i) return;
+		let a = this._keyboardActivation;
+		this._keyboardActivation = i, this.requestUpdate("keyboardActivation", a);
 	}
 	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);
+		let t = a.includes(e);
+		f(this, {
+			prop: "density",
+			value: e,
+			valid: a,
+			url: "https://spectrum-web-components.adobe.com/?path=/docs/components-tabs--docs"
+		});
+		let n = t ? e : o;
+		if (this._density === n) return;
+		let r = this._density;
+		this._density = n, this.requestUpdate("density", r);
 	}
 	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);
+		let t = i.includes(e);
+		f(this, {
+			prop: "direction",
+			value: e,
+			valid: i,
+			url: "https://spectrum-web-components.adobe.com/?path=/docs/components-tabs--docs"
+		});
+		let n = t ? e : r;
+		if (this._direction === n) return;
+		let a = this._direction;
+		this._direction = n, this.requestUpdate("direction", a);
 	}
 	static isTabSlotNode(e) {
 		return e instanceof HTMLElement ? e.getAttribute("role") === "tab" ? !0 : e.localName === "swc-tab" : !1;
@@ -164,8 +177,7 @@ var f, p = class e extends d {
 		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/", {
+		super.firstUpdated(e), this.hasAttribute("direction") || this.setAttribute("direction", this.direction), p(this, !this.accessibleLabel, `<${this.localName}> requires an "accessible-label" attribute to provide an accessible name for the tablist.`, "https://spectrum-web-components.adobe.com/?path=/docs/components-tabs--docs", {
 			type: "accessibility",
 			level: "high"
 		});
@@ -175,27 +187,27 @@ var f, p = class e extends d {
 		return await Promise.all(t), e;
 	}
 };
-f = p, f.VALID_DIRECTIONS = i, f.VALID_KEYBOARD_ACTIVATIONS = t, f.VALID_DENSITIES = a, f.INDICATOR_BASE_SIZE = 100, e([s({
+m = h, m.VALID_DIRECTIONS = i, m.VALID_KEYBOARD_ACTIVATIONS = t, m.VALID_DENSITIES = a, m.INDICATOR_BASE_SIZE = 100, e([s({
 	type: String,
 	reflect: !0,
 	attribute: "keyboard-activation"
-})], p.prototype, "keyboardActivation", null), e([s({
+})], h.prototype, "keyboardActivation", null), e([s({
 	type: String,
 	reflect: !0
-})], p.prototype, "density", null), e([s({
+})], h.prototype, "density", null), e([s({
 	type: String,
 	reflect: !0
-})], p.prototype, "direction", null), e([s({
+})], h.prototype, "direction", null), e([s({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "disabled", void 0), e([s({
+})], h.prototype, "disabled", void 0), e([s({
 	type: String,
 	attribute: "accessible-label"
-})], p.prototype, "accessibleLabel", void 0), e([s({
+})], h.prototype, "accessibleLabel", void 0), e([s({
 	type: String,
 	reflect: !0
-})], p.prototype, "selected", void 0), e([c()], p.prototype, "selectionIndicatorStyle", void 0), e([c()], p.prototype, "shouldAnimate", void 0);
+})], h.prototype, "selected", void 0), e([c()], h.prototype, "selectionIndicatorStyle", void 0), e([c()], h.prototype, "shouldAnimate", void 0);
 //#endregion
-export { p as TabsBase };
+export { h as TabsBase };
 
 //# sourceMappingURL=Tabs.base.js.map

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

@@ -1 +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 {\n  focusgroupNavigationActiveChange,\n  type FocusgroupNavigationActiveChangeDetail,\n  FocusgroupNavigationController,\n} from '@adobe/spectrum-wc-core/controllers/index.js';\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: `horizontal` (default) or `vertical`.\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   * @internal\n   *\n   * Manages roving tabindex and arrow-key / Home / End focus movement within\n   * the tab list. Direction is kept in sync with `this.direction` via\n   * `setOptions` in `willUpdate`. Disabled tabs remain in the navigation\n   * sequence (per APG) but are not activatable.\n   *\n   * `getItems` returns an empty array when the container is disabled so all\n   * tabs lose their tab stop, matching the `aria-disabled` tablist behavior.\n   */\n  private readonly _navigation = new FocusgroupNavigationController(this, {\n    direction: this._direction,\n    wrap: true,\n    memory: true,\n    getItems: () => (this.disabled ? [] : (this._tabs as HTMLElement[])),\n  });\n\n  /**\n   * Handles `focusgroupNavigationActiveChange` events dispatched by\n   * `_navigation`. In automatic activation mode, selects the newly focused\n   * tab (unless it is disabled).\n   *\n   * Only `source: 'keyboard'` (arrow keys, Home/End) and `source: 'focus'`\n   * (pointer click, Tab-key entry) represent a real focus move that\n   * \"selection follows focus\" should react to. `'refresh'` and\n   * `'programmatic'` fire when `_navigation` re-parks the roving tab stop\n   * without anyone actually moving focus there — for example on mount or when\n   * re-enabling after `disabled` — and must not trigger a spurious selection\n   * or `change` event.\n   */\n  private readonly _handleNavigationActiveChange = (event: Event): void => {\n    if (this._keyboardActivation !== 'automatic') {\n      return;\n    }\n    const { activeElement, source } = (\n      event as CustomEvent<FocusgroupNavigationActiveChangeDetail>\n    ).detail;\n    if (source !== 'keyboard' && source !== 'focus') {\n      return;\n    }\n    if (!activeElement) {\n      return;\n    }\n    const tab = activeElement as TabLike;\n    if (tab.disabled) {\n      return;\n    }\n    this.selectTarget(tab);\n  };\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\n    this._navigation.refresh();\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   * Keyboard handler for Enter and Space activation. Arrow-key, Home, and\n   * End navigation is handled by `FocusgroupNavigationController` in capture\n   * phase on the host element.\n   */\n  protected handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { code } = event;\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    }\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 || id === this.selected) {\n      return;\n    }\n\n    const previous = this.selected;\n    this.selected = id;\n\n    // Sync child tab.selected eagerly so that change-event handlers read the\n    // correct state on individual tab elements without waiting for the next\n    // Lit render cycle (tabs.selected is already updated synchronously above).\n    this.updateCheckedState();\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` property on each child tab to match\n   * `this.selected`, then parks the roving tab stop on the selected tab via\n   * `_navigation.setActiveItem`. Tabindex management is otherwise owned by\n   * `FocusgroupNavigationController` — for example, `_navigation.refresh()`\n   * resets all tabindex values when the tab list or `disabled` state changes.\n   */\n  private updateCheckedState(): void {\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        this._navigation.setActiveItem(currentTab as HTMLElement);\n      } else {\n        this.selected = '';\n      }\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._navigation.refresh();\n      if (this.disabled) {\n        // When disabled, getItems() returns [] so the controller's cleanup\n        // loop in refresh() iterates nothing. Explicitly remove all tabs from\n        // the tab order so the tablist is fully inert.\n        for (const tab of this._tabs) {\n          (tab as HTMLElement).tabIndex = -1;\n        }\n      } else {\n        // After re-enabling, restore the roving tab stop to the selected tab.\n        this.updateCheckedState();\n      }\n    }\n\n    if (changes.has('direction')) {\n      this._navigation.setOptions({ direction: this.direction });\n      this.updateSelectionIndicator();\n    }\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\n      focusgroupNavigationActiveChange,\n      this._handleNavigationActiveChange\n    );\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    this.removeEventListener(\n      focusgroupNavigationActiveChange,\n      this._handleNavigationActiveChange\n    );\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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"}
+{"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 {\n  focusgroupNavigationActiveChange,\n  type FocusgroupNavigationActiveChangeDetail,\n  FocusgroupNavigationController,\n} from '@adobe/spectrum-wc-core/controllers/index.js';\nimport { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';\nimport { validateEnum, warnIf } from '@adobe/spectrum-wc-core/utils/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    validateEnum(this, {\n      prop: 'keyboard-activation',\n      value,\n      valid: KEYBOARD_ACTIVATIONS,\n      url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-tabs--docs',\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    validateEnum(this, {\n      prop: 'density',\n      value,\n      valid: TAB_DENSITIES,\n      url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-tabs--docs',\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: `horizontal` (default) or `vertical`.\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    validateEnum(this, {\n      prop: 'direction',\n      value,\n      valid: TABS_DIRECTIONS,\n      url: 'https://spectrum-web-components.adobe.com/?path=/docs/components-tabs--docs',\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   * @internal\n   *\n   * Manages roving tabindex and arrow-key / Home / End focus movement within\n   * the tab list. Direction is kept in sync with `this.direction` via\n   * `setOptions` in `willUpdate`. Disabled tabs remain in the navigation\n   * sequence (per APG) but are not activatable.\n   *\n   * `getItems` returns an empty array when the container is disabled so all\n   * tabs lose their tab stop, matching the `aria-disabled` tablist behavior.\n   */\n  private readonly _navigation = new FocusgroupNavigationController(this, {\n    direction: this._direction,\n    wrap: true,\n    memory: true,\n    getItems: () => (this.disabled ? [] : (this._tabs as HTMLElement[])),\n  });\n\n  /**\n   * Handles `focusgroupNavigationActiveChange` events dispatched by\n   * `_navigation`. In automatic activation mode, selects the newly focused\n   * tab (unless it is disabled).\n   *\n   * Only `source: 'keyboard'` (arrow keys, Home/End) and `source: 'focus'`\n   * (pointer click, Tab-key entry) represent a real focus move that\n   * \"selection follows focus\" should react to. `'refresh'` and\n   * `'programmatic'` fire when `_navigation` re-parks the roving tab stop\n   * without anyone actually moving focus there — for example on mount or when\n   * re-enabling after `disabled` — and must not trigger a spurious selection\n   * or `change` event.\n   */\n  private readonly _handleNavigationActiveChange = (event: Event): void => {\n    if (this._keyboardActivation !== 'automatic') {\n      return;\n    }\n    const { activeElement, source } = (\n      event as CustomEvent<FocusgroupNavigationActiveChangeDetail>\n    ).detail;\n    if (source !== 'keyboard' && source !== 'focus') {\n      return;\n    }\n    if (!activeElement) {\n      return;\n    }\n    const tab = activeElement as TabLike;\n    if (tab.disabled) {\n      return;\n    }\n    this.selectTarget(tab);\n  };\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\n    this._navigation.refresh();\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   * Keyboard handler for Enter and Space activation. Arrow-key, Home, and\n   * End navigation is handled by `FocusgroupNavigationController` in capture\n   * phase on the host element.\n   */\n  protected handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { code } = event;\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    }\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 || id === this.selected) {\n      return;\n    }\n\n    const previous = this.selected;\n    this.selected = id;\n\n    // Sync child tab.selected eagerly so that change-event handlers read the\n    // correct state on individual tab elements without waiting for the next\n    // Lit render cycle (tabs.selected is already updated synchronously above).\n    this.updateCheckedState();\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` property on each child tab to match\n   * `this.selected`, then parks the roving tab stop on the selected tab via\n   * `_navigation.setActiveItem`. Tabindex management is otherwise owned by\n   * `FocusgroupNavigationController` — for example, `_navigation.refresh()`\n   * resets all tabindex values when the tab list or `disabled` state changes.\n   */\n  private updateCheckedState(): void {\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        this._navigation.setActiveItem(currentTab as HTMLElement);\n      } else {\n        this.selected = '';\n      }\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._navigation.refresh();\n      if (this.disabled) {\n        // When disabled, getItems() returns [] so the controller's cleanup\n        // loop in refresh() iterates nothing. Explicitly remove all tabs from\n        // the tab order so the tablist is fully inert.\n        for (const tab of this._tabs) {\n          (tab as HTMLElement).tabIndex = -1;\n        }\n      } else {\n        // After re-enabling, restore the roving tab stop to the selected tab.\n        this.updateCheckedState();\n      }\n    }\n\n    if (changes.has('direction')) {\n      this._navigation.setOptions({ direction: this.direction });\n      this.updateSelectionIndicator();\n    }\n  }\n\n  public override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\n      focusgroupNavigationActiveChange,\n      this._handleNavigationActiveChange\n    );\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    this.removeEventListener(\n      focusgroupNavigationActiveChange,\n      this._handleNavigationActiveChange\n    );\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    warnIf(\n      this,\n      !this.accessibleLabel,\n      `<${this.localName}> requires an \"accessible-label\" attribute to provide an accessible name for the tablist.`,\n      'https://spectrum-web-components.adobe.com/?path=/docs/components-tabs--docs',\n      { type: 'accessibility', level: 'high' }\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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"}

package/dist/components/tooltip/Tooltip.base.js

@@ -6,8 +6,9 @@ import "../../controllers/placement-controller/index.js";
 import { TOOLTIP_PLACEMENTS as a, TOOLTIP_VARIANTS as o } from "./Tooltip.types.js";
 import { property as s } from "lit/decorators.js";
 import { SpectrumElement as c } from "@adobe/spectrum-wc-core/element/index.js";
+import { isTopDismissible as l, registerDismissible as u, unregisterDismissible as d, validateEnum as f, warnIf as p } from "@adobe/spectrum-wc-core/utils/index.js";
 //#region components/tooltip/Tooltip.base.ts
-var l, u = class extends c {
+var m, h = null, g = class extends c {
 	constructor(...e) {
 		super(...e), this.variant = "neutral", this.placement = "top", this.open = !1, this.triggerElement = null, this.delay = 1500, this.disabled = !1, this.manual = !1, this.offset = 4, this.crossOffset = 0, this.containerPadding = 12, this.shouldFlip = !0, this.labeling = !1, this.hoverController = new t(this, { warmStateKey: "swc-tooltip" }), this.placementController = new i(this), this.afterEventPending = !1, this.afterEventFallbackTimer = null, this._lastWiredTrigger = null, this.handleBeforeToggle = (e) => {
 			let { newState: t } = e, n = t === "open" ? "swc-open" : "swc-close";
@@ -33,7 +34,7 @@ var l, u = class extends c {
 		}, this.handleTransitionEnd = (e) => {
 			e.target !== this || !this.afterEventPending || (this.afterEventFallbackTimer !== null && (clearTimeout(this.afterEventFallbackTimer), this.afterEventFallbackTimer = null), this.afterEventPending = !1, this.dispatchAfterEvent(this.open));
 		}, this.handleKeyDown = (e) => {
-			e.key === "Escape" && this.open && (this.open = !1);
+			e.key !== "Escape" || !this.open || l(this) && (e.preventDefault(), this.open = !1);
 		};
 	}
 	get tipElement() {
@@ -70,9 +71,8 @@ var l, u = class extends c {
 	resolveTrigger() {
 		if (this.triggerElement) return this.triggerElement;
 		if (this.for) {
-			var e;
-			let t = this.getRootNode().getElementById(this.for);
-			return !t && (e = window.__swc) != null && e.DEBUG && window.__swc.warn(this, `<${this.localName}> for="${this.for}" did not resolve to an element in the current tree root. Check that the referenced id exists in the same document tree root.`, "https://opensource.adobe.com/spectrum-web-components/components/tooltip/", { level: "high" }), t;
+			let e = this.getRootNode().getElementById(this.for);
+			return p(this, !e, `<${this.localName}> for="${this.for}" did not resolve to an element in the current tree root. Check that the referenced id exists in the same document tree root.`, "https://spectrum-web-components.adobe.com/?path=/docs/components-tooltip--docs", { level: "high" }), e;
 		}
 		return null;
 	}
@@ -111,53 +111,88 @@ var l, u = class extends c {
 		})), e || this.clearPositioningState();
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this.disabled && this.open && (this.open = !1);
+		if (super.willUpdate(e), this.disabled && this.open && (this.open = !1), e.has("variant")) {
+			let e = this.constructor;
+			f(this, {
+				prop: "variant",
+				value: this.variant,
+				valid: e.VARIANTS,
+				url: "https://spectrum-web-components.adobe.com/?path=/docs/components-tooltip--docs"
+			});
+		}
+		if (e.has("placement")) {
+			let e = this.constructor;
+			f(this, {
+				prop: "placement",
+				value: this.placement,
+				valid: e.PLACEMENTS,
+				url: "https://spectrum-web-components.adobe.com/?path=/docs/components-tooltip--docs"
+			});
+		}
 	}
 	updated(e) {
-		super.updated(e), e.has("offset") && this.style.setProperty("--_swc-tooltip-animation-distance", `${this.offset}px`), (e.has("open") || e.has("labeling") || e.has("for") || e.has("triggerElement")) && this.syncAriaRelationship(), (e.has("for") || e.has("triggerElement")) && this.hoverController.setTarget(this.resolveTrigger()), e.has("open") ? this.open ? (document.addEventListener("keydown", this.handleKeyDown), this.setDeclaredActualPlacement(), this.startPlacement(), this.open !== this.isPopoverOpen && this.showPopover()) : (document.removeEventListener("keydown", this.handleKeyDown), this.open !== this.isPopoverOpen && this.hidePopover(), this.placementController.stop()) : this.open && (e.has("placement") || e.has("offset") || e.has("crossOffset") || e.has("containerPadding") || e.has("shouldFlip") || e.has("for") || e.has("triggerElement")) && this.startPlacement();
+		if (super.updated(e), e.has("variant")) {
+			let e = this.constructor;
+			f(this, {
+				prop: "variant",
+				value: this.variant,
+				valid: e.VARIANTS,
+				url: "https://spectrum-web-components.adobe.com/?path=/docs/components-tooltip--docs"
+			});
+		}
+		if (e.has("placement")) {
+			let e = this.constructor;
+			f(this, {
+				prop: "placement",
+				value: this.placement,
+				valid: e.PLACEMENTS,
+				url: "https://spectrum-web-components.adobe.com/?path=/docs/components-tooltip--docs"
+			});
+		}
+		e.has("offset") && this.style.setProperty("--_swc-tooltip-animation-distance", `${this.offset}px`), (e.has("open") || e.has("labeling") || e.has("for") || e.has("triggerElement")) && this.syncAriaRelationship(), (e.has("for") || e.has("triggerElement")) && this.hoverController.setTarget(this.resolveTrigger()), e.has("open") ? this.open ? (this.manual || (h && h !== this && h.requestClose(), h = this), u(this), document.addEventListener("keydown", this.handleKeyDown, { capture: !0 }), this.setDeclaredActualPlacement(), this.startPlacement(), this.open !== this.isPopoverOpen && this.showPopover()) : (h === this && (h = null), d(this), document.removeEventListener("keydown", this.handleKeyDown, { capture: !0 }), this.open !== this.isPopoverOpen && this.hidePopover(), this.placementController.stop()) : this.open && (e.has("placement") || e.has("offset") || e.has("crossOffset") || e.has("containerPadding") || e.has("shouldFlip") || e.has("for") || e.has("triggerElement")) && this.startPlacement();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.setAttribute("role", "tooltip"), this.setAttribute("popover", "auto"), this.addEventListener("beforetoggle", this.handleBeforeToggle), this.addEventListener("toggle", this.handleToggle), this.addEventListener("transitionend", this.handleTransitionEnd);
+		super.connectedCallback(), this.setAttribute("role", "tooltip"), this.setAttribute("popover", "manual"), this.addEventListener("beforetoggle", this.handleBeforeToggle), this.addEventListener("toggle", this.handleToggle), this.addEventListener("transitionend", this.handleTransitionEnd);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("beforetoggle", this.handleBeforeToggle), this.removeEventListener("toggle", this.handleToggle), this.removeEventListener("transitionend", this.handleTransitionEnd), document.removeEventListener("keydown", this.handleKeyDown), this.afterEventFallbackTimer !== null && (clearTimeout(this.afterEventFallbackTimer), this.afterEventFallbackTimer = null), this.clearAriaRelationship();
+		super.disconnectedCallback(), h === this && (h = null), this.removeEventListener("beforetoggle", this.handleBeforeToggle), this.removeEventListener("toggle", this.handleToggle), this.removeEventListener("transitionend", this.handleTransitionEnd), d(this), document.removeEventListener("keydown", this.handleKeyDown, { capture: !0 }), this.afterEventFallbackTimer !== null && (clearTimeout(this.afterEventFallbackTimer), this.afterEventFallbackTimer = null), this.clearAriaRelationship();
 	}
 };
-l = u, l.VARIANTS = o, l.PLACEMENTS = a, e([s({
+m = g, m.VARIANTS = o, m.PLACEMENTS = a, e([s({
 	type: String,
 	reflect: !0
-})], u.prototype, "variant", void 0), e([s({
+})], g.prototype, "variant", void 0), e([s({
 	type: String,
 	reflect: !0
-})], u.prototype, "placement", void 0), e([s({
+})], g.prototype, "placement", void 0), e([s({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "open", void 0), e([s({
+})], g.prototype, "open", void 0), e([s({
 	attribute: "for",
 	type: String
-})], u.prototype, "for", void 0), e([s({ attribute: !1 })], u.prototype, "triggerElement", void 0), e([s({
+})], g.prototype, "for", void 0), e([s({ attribute: !1 })], g.prototype, "triggerElement", void 0), e([s({
 	type: Number,
 	reflect: !0
-})], u.prototype, "delay", void 0), e([s({
+})], g.prototype, "delay", void 0), e([s({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "disabled", void 0), e([s({
+})], g.prototype, "disabled", void 0), e([s({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "manual", void 0), e([s({ type: Number })], u.prototype, "offset", void 0), e([s({
+})], g.prototype, "manual", void 0), e([s({ type: Number })], g.prototype, "offset", void 0), e([s({
 	type: Number,
 	attribute: "cross-offset"
-})], u.prototype, "crossOffset", void 0), e([s({
+})], g.prototype, "crossOffset", void 0), e([s({
 	type: Number,
 	attribute: "container-padding"
-})], u.prototype, "containerPadding", void 0), e([s({
+})], g.prototype, "containerPadding", void 0), e([s({
 	type: Boolean,
 	attribute: "should-flip"
-})], u.prototype, "shouldFlip", void 0), e([s({
+})], g.prototype, "shouldFlip", void 0), e([s({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "labeling", void 0);
+})], g.prototype, "labeling", void 0);
 //#endregion
-export { u as TooltipBase };
+export { g as TooltipBase };
 
 //# sourceMappingURL=Tooltip.base.js.map