chore: initial POC of prefixed tag names

package.json

@@ -92,6 +92,9 @@
         "tools/*",
         "react/*"
     ],
+    "resolutions": {
+        "playwright": "1.52.0"
+    },
     "devDependencies": {
         "@changesets/changelog-github": "^0.5.0",
         "@changesets/cli": "^2.27.5",
@@ -102,7 +105,7 @@
         "@lit/react": "^1.0.4",
         "@open-wc/dev-server-hmr": "^0.2.0",
         "@open-wc/testing": "^4.0.0",
-        "@playwright/test": "^1.44.0",
+        "@playwright/test": "^1.52.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-json": "^6.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",

packages/action-bar/prefix-action-bar.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { definePopover } from '@spectrum-web-components/popover/prefix-popover.js';
+import { ActionBar } from './src/ActionBar.js';
+import { definePrefixedElement } from '@spectrum-web-components/base/src/Base.js';
+
+export function defineActionBar(prefix: string): void {
+    definePopover(prefix);
+    definePrefixedElement(ActionBar.tagName, prefix, ActionBar);
+}

packages/action-bar/sp-action-bar.ts

@@ -10,9 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import { Popover } from '@spectrum-web-components/popover/src/Popover.js';
 import { ActionBar } from './src/ActionBar.js';
 import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
+// register our dependency elements too
+defineElement(Popover.tag, Popover);
+
 defineElement('sp-action-bar', ActionBar);
 
 declare global {

packages/action-bar/src/ActionBar.ts

@@ -12,12 +12,12 @@
 
 import {
     CSSResultArray,
-    html,
-    SpectrumElement,
+    staticHtml as html,
+    LitElement,
+    SpectrumMixin,
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/action-group/sp-action-group.js';
 import '@spectrum-web-components/button/sp-close-button.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
@@ -26,11 +26,15 @@ import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 export const actionBarVariants = ['sticky', 'fixed'];
 
+import { Popover } from '@spectrum-web-components/popover/src/Popover.js';
+
 /**
  * @element sp-action-bar
  * @slot - Content to display with the Action Bar
  */
-export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) {
+export class ActionBar extends FocusVisiblePolyfillMixin(
+    SpectrumMixin(LitElement, 'action-bar')
+) {
     public static override get styles(): CSSResultArray {
         return [actionBarStyles];
     }
@@ -97,7 +101,7 @@ export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) {
 
     public override render(): TemplateResult {
         return html`
-            <sp-popover ?open=${this.open} id="popover">
+            <${Popover.tag} ?open=${this.open} id="popover">
                 <slot name="override">
                     <sp-close-button
                         static-color=${ifDefined(
@@ -120,7 +124,7 @@ export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) {
                         <slot name="buttons"></slot>
                     </sp-action-group>
                 </slot>
-            </sp-popover>
+            </${Popover.tag}>
         `;
     }
 }

packages/popover/prefix-popover.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { Popover } from './src/Popover.js';
+import { definePrefixedElement } from '@spectrum-web-components/base/src/Base.js';
+
+export function definePopover(prefix: string): void {
+    definePrefixedElement(Popover.tagName, prefix, Popover);
+}

packages/popover/sp-popover.ts

@@ -12,7 +12,8 @@
 import { Popover } from './src/Popover.js';
 import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-defineElement('sp-popover', Popover);
+// register our dependency elements too
+defineElement(Popover.tag, Popover);
 
 declare global {
     interface HTMLElementTagNameMap {

packages/popover/src/Popover.ts

@@ -13,8 +13,9 @@
 import {
     CSSResultArray,
     html,
+    LitElement,
     nothing,
-    SpectrumElement,
+    SpectrumMixin,
     TemplateResult,
 } from '@spectrum-web-components/base';
 import {
@@ -29,7 +30,7 @@ import popoverStyles from './popover.css.js';
  *
  * @slot - content to display within the Popover
  */
-export class Popover extends SpectrumElement {
+export class Popover extends SpectrumMixin(LitElement, 'popover') {
     public static override get styles(): CSSResultArray {
         return [popoverStyles];
     }

tools/base/src/Base.ts

@@ -12,15 +12,27 @@
 
 import { LitElement, ReactiveElement } from 'lit';
 import { version } from '@spectrum-web-components/base/src/version.js';
+
+import { defineElement } from './define-element.js';
+
 type ThemeRoot = HTMLElement & {
     startManagingContentDirection: (el: HTMLElement) => void;
     stopManagingContentDirection: (el: HTMLElement) => void;
 };
 
-type Constructor<T = Record<string, unknown>> = {
+export type Constructor<T = Record<string, unknown>> = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    new (...args: any[]): T;
+    prototype: T;
+};
+export type PrefixedConstructor<T = Record<string, unknown>> = {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     new (...args: any[]): T;
     prototype: T;
+    VERSION: string;
+    tagName: string;
+    prefix: string;
+    tag: string;
 };
 
 export interface SpectrumInterface {
@@ -58,8 +70,9 @@ const canManageContentDirection = (el: ContentDirectionManager): boolean =>
     el.tagName === 'SP-THEME';
 
 export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
-    constructor: T
-): T & Constructor<SpectrumInterface> {
+    constructor: T,
+    tagName: string = 'base'
+): T & PrefixedConstructor<SpectrumInterface> {
     class SpectrumMixinElement extends constructor {
         /**
          * @private
@@ -79,6 +92,16 @@ export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
             return this.dir === 'ltr';
         }
 
+        public static VERSION = version;
+        public static prefix = 'sp';
+        public static tagName = tagName;
+
+        public static get tag(): string {
+            // note static getters this is the constructor so this method
+            // gets the derived class prefix and tag
+            return `${this.prefix}-${this.tagName}`;
+        }
+
         public hasVisibleFocusInTree(): boolean {
             const getAncestors = (root: Document = document): HTMLElement[] => {
                 // eslint-disable-next-line @spectrum-web-components/document-active-element
@@ -185,8 +208,32 @@ export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
     return SpectrumMixinElement;
 }
 
-export class SpectrumElement extends SpectrumMixin(LitElement) {
-    static VERSION = version;
+export class SpectrumElement extends SpectrumMixin(LitElement, 'base') {
+    public static override VERSION = version;
+}
+
+export function PrefixedMixin<T extends PrefixedConstructor<SpectrumInterface>>(
+    constructor: T,
+    tagName: string,
+    prefix: string = 'sp'
+): T & PrefixedConstructor<SpectrumInterface> {
+    class PrefixedMixinElement extends constructor {
+        public static override prefix = prefix;
+        public static override tagName = tagName;
+    }
+    return PrefixedMixinElement;
+}
+
+export function definePrefixedElement(
+    name: string,
+    prefix: string,
+    constructor: PrefixedConstructor<SpectrumInterface>
+): void {
+    const PrefixedClass = PrefixedMixin(constructor, name, prefix);
+    defineElement(
+        PrefixedClass.tag,
+        PrefixedClass as unknown as CustomElementConstructor
+    );
 }
 
 if (window.__swc.DEBUG) {

tools/base/src/index.ts

@@ -13,3 +13,4 @@
 export * from './Base.js';
 export * from './sizedMixin.js';
 export * from 'lit';
+export { html as staticHtml, literal } from 'lit/static-html.js';

web-test-runner.utils.js

@@ -38,8 +38,6 @@ export const coverallsChromium = playwrightLauncher({
             permissions: ['clipboard-read', 'clipboard-write'],
         }),
     launchOptions: {
-        executablePath:
-            '/home/runner/.cache/ms-playwright/chromium-1148/chrome-linux/chrome',
         headless: true,
     },
 });

yarn.lock

@@ -215,7 +215,7 @@ __metadata:
     "@lit/react": "npm:^1.0.4"
     "@open-wc/dev-server-hmr": "npm:^0.2.0"
     "@open-wc/testing": "npm:^4.0.0"
-    "@playwright/test": "npm:^1.44.0"
+    "@playwright/test": "npm:^1.52.0"
     "@rollup/plugin-commonjs": "npm:^25.0.7"
     "@rollup/plugin-json": "npm:^6.0.1"
     "@rollup/plugin-node-resolve": "npm:^15.2.3"
@@ -4162,14 +4162,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:^1.44.0":
-  version: 1.51.1
-  resolution: "@playwright/test@npm:1.51.1"
+"@playwright/test@npm:^1.52.0":
+  version: 1.54.2
+  resolution: "@playwright/test@npm:1.54.2"
   dependencies:
-    playwright: "npm:1.51.1"
+    playwright: "npm:1.54.2"
   bin:
     playwright: cli.js
-  checksum: 10c0/bdb98f3df58f60b5c62e6d5c79c30910404d1855afea0803af0efd6dc63f90c473dbf92ff7dc212f1459f1d32c85dc44a60f70c2e0ea604f975b953d59523234
+  checksum: 10c0/a032d9714a91d6dc40405575ca65ec52f95b0ca95974cd0140e2c12b6c39fbe5311239b2d581b289acaa1e227dd871cf5c43a537f32457f6329723e4add6e6f1
   languageName: node
   linkType: hard
 
@@ -22184,51 +22184,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.44.0":
-  version: 1.44.0
-  resolution: "playwright-core@npm:1.44.0"
-  bin:
-    playwright-core: cli.js
-  checksum: 10c0/e1220371a76cdf145f6aaefb2dd6c5194531d1c1e2b67712c56dbc1d589dffb66fd4fc0168be60cd2115aca40660aa13c572e14be47674c0542bc879705b9fb3
-  languageName: node
-  linkType: hard
-
-"playwright-core@npm:1.51.1":
-  version: 1.51.1
-  resolution: "playwright-core@npm:1.51.1"
+"playwright-core@npm:1.52.0":
+  version: 1.52.0
+  resolution: "playwright-core@npm:1.52.0"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/4f004d9dea5ecbd76b84c858fa4880ed955600b6cda972a3e8093ea47e150ce20bf2ea806e73e740497d34f4b61b080c208339a661fc75ad04d8f00bedcc21e0
+  checksum: 10c0/640945507e6ca2144e9f596b2a6ecac042c2fd3683ff99e6271e9a7b38f3602d415f282609d569456f66680aab8b3c5bb1b257d8fb63a7fc0ed648261110421f
   languageName: node
   linkType: hard
 
-"playwright@npm:1.51.1":
-  version: 1.51.1
-  resolution: "playwright@npm:1.51.1"
-  dependencies:
-    fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.51.1"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  bin:
-    playwright: cli.js
-  checksum: 10c0/2aea553b8b1086ee419e72c9d4f4117686e6bdb5e09e0f47dfe563ce0f0bd79c4ee79dd9c8a0f023a2fb7803b81d4fdc552887410d16c036be07f21ab72b3f46
-  languageName: node
-  linkType: hard
-
-"playwright@npm:^1.22.2":
-  version: 1.44.0
-  resolution: "playwright@npm:1.44.0"
+"playwright@npm:1.52.0":
+  version: 1.52.0
+  resolution: "playwright@npm:1.52.0"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.44.0"
+    playwright-core: "npm:1.52.0"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/dcbee9022623dd9e219e9867983789262e80339f0c3601219930883e5a304ce75e1397715c0f378a2bab0a799cf88a73ea4b58fe595cfd9058bd7a82f5d8e3b6
+  checksum: 10c0/2c6edf1e15e59bbaf77f3fa0fe0ac975793c17cff835d9c8b8bc6395a3b6f1c01898b3058ab37891b2e4d424bcc8f1b4844fe70d943e0143d239d7451408c579
   languageName: node
   linkType: hard