diff --git a/package.json b/package.json
index 7ea8f7282b9..a1ed53caaa8 100644
--- a/package.json
+++ b/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",
diff --git a/packages/action-bar/prefix-action-bar.ts b/packages/action-bar/prefix-action-bar.ts
new file mode 100644
index 00000000000..4d3161cf3c3
--- /dev/null
+++ b/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);
+}
diff --git a/packages/action-bar/sp-action-bar.ts b/packages/action-bar/sp-action-bar.ts
index 11959b60ddf..e8e9444bbab 100644
--- a/packages/action-bar/sp-action-bar.ts
+++ b/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 {
diff --git a/packages/action-bar/src/ActionBar.ts b/packages/action-bar/src/ActionBar.ts
index 16012c368ab..c13e38064ab 100644
--- a/packages/action-bar/src/ActionBar.ts
+++ b/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`
-
+ <${Popover.tag} ?open=${this.open} id="popover">
-
+ ${Popover.tag}>
`;
}
}
diff --git a/packages/popover/prefix-popover.ts b/packages/popover/prefix-popover.ts
new file mode 100644
index 00000000000..e95ebf06784
--- /dev/null
+++ b/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);
+}
diff --git a/packages/popover/sp-popover.ts b/packages/popover/sp-popover.ts
index de78ceacb10..8c0a2b5c653 100644
--- a/packages/popover/sp-popover.ts
+++ b/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 {
diff --git a/packages/popover/src/Popover.ts b/packages/popover/src/Popover.ts
index f9a1acff1b5..75a4117ede8 100644
--- a/packages/popover/src/Popover.ts
+++ b/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];
}
diff --git a/tools/base/src/Base.ts b/tools/base/src/Base.ts
index f03543c9079..c7f991f83ee 100644
--- a/tools/base/src/Base.ts
+++ b/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> = {
+export type Constructor> = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ new (...args: any[]): T;
+ prototype: T;
+};
+export type PrefixedConstructor> = {
// 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>(
- constructor: T
-): T & Constructor {
+ constructor: T,
+ tagName: string = 'base'
+): T & PrefixedConstructor {
class SpectrumMixinElement extends constructor {
/**
* @private
@@ -79,6 +92,16 @@ export function SpectrumMixin>(
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>(
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>(
+ constructor: T,
+ tagName: string,
+ prefix: string = 'sp'
+): T & PrefixedConstructor {
+ 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
+): void {
+ const PrefixedClass = PrefixedMixin(constructor, name, prefix);
+ defineElement(
+ PrefixedClass.tag,
+ PrefixedClass as unknown as CustomElementConstructor
+ );
}
if (window.__swc.DEBUG) {
diff --git a/tools/base/src/index.ts b/tools/base/src/index.ts
index 7136a5691af..48b499074a0 100644
--- a/tools/base/src/index.ts
+++ b/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';
diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js
index 8f41f451196..2649920eda5 100644
--- a/web-test-runner.utils.js
+++ b/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,
},
});
diff --git a/yarn.lock b/yarn.lock
index 59c4610c083..cd1c84e31e6 100644
--- a/yarn.lock
+++ b/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