@patternfly/elements 3.0.1 → 4.0.0

package/pf-avatar/pf-avatar.d.ts

@@ -1,15 +1,41 @@
-import { BaseAvatar } from './BaseAvatar.js';
+import { LitElement, type TemplateResult } from 'lit';
+export declare class PfAvatarLoadEvent extends Event {
+    originalEvent: Event;
+    constructor(originalEvent: Event);
+}
 /**
  * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
- *
  * @summary For displaying a user's avatar image
+ * @fires {PfAvatarLoadEvent} load - when the avatar loads
+ * @cssprop [--pf-c-avatar--Width=24px]
+ * @cssprop [--pf-c-avatar--Height=24px]
+ * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]
+ * @cssprop [--pf-c-avatar--BorderWidth=0]
+ * @cssprop [--pf-c-avatar--BorderColor=var(--pf-global--BorderColor--dark-100, #d2d2d2)]
+ * @cssprop [--pf-c-avatar--m-dark--BorderColor=var(--pf-global--palette--black-700, #4f5255)]
+ * @cssprop [--pf-c-avatar--m-sm--Width=24px]
+ * @cssprop [--pf-c-avatar--m-sm--Height=24px]
+ * @cssprop [--pf-c-avatar--m-md--Width=36px]
+ * @cssprop [--pf-c-avatar--m-md--Height=36px]
+ * @cssprop [--pf-c-avatar--m-lg--Width=72px]
+ * @cssprop [--pf-c-avatar--m-lg--Height=72px]
+ * @cssprop [--pf-c-avatar--m-xl--Width=28px]
+ * @cssprop [--pf-c-avatar--m-xl--Height=28px]
  */
-export declare class PfAvatar extends BaseAvatar {
+export declare class PfAvatar extends LitElement {
+    #private;
     static readonly styles: CSSStyleSheet[];
+    /** The URL to the user's custom avatar image. */
+    src?: string;
+    /** The alt text for the avatar image. */
+    alt?: string;
     /** Size of the Avatar */
     size: 'sm' | 'md' | 'lg' | 'xl';
     /** Whether to display a border around the avatar */
     border?: 'light' | 'dark';
+    /** Whether or not the Avatar image is dark */
+    dark: boolean;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-avatar/pf-avatar.js

@@ -1,28 +1,70 @@
-import { __decorate } from "tslib";
+var _PfAvatar_instances, _PfAvatar_onLoad;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { BaseAvatar } from './BaseAvatar.js';
 import { css } from "lit";
-const style = css `svg,\nimg {\n  width: var(--pf-c-avatar--Width, 24px);\n  height: var(--pf-c-avatar--Height, 24px);\n  border-radius: var(--pf-c-avatar--BorderRadius, var(--pf-global--BorderRadius--lg, 128px));\n  border:\n    var(--pf-c-avatar--BorderWidth, 0)\n    solid\n    var(--pf-c-avatar--BorderColor,\n      var(--pf-global--BorderColor--dark-100, #d2d2d2));\n}\n\n:host([border]) :is(img, svg) {\n  --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n}\n\n:host([border="dark"]) :is(img, svg) {\n  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor,\n      var(--pf-global--palette--black-700, #4f5255));\n}\n\n:host([size='sm']) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width, 24px);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height, 24px);\n}\n\n:host([size='md']) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width, 36px);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height, 36px);\n}\n\n:host([size='lg']) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width, 72px);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height, 72px);\n}\n\n:host([size='xl']) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width, 128px);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height, 128px);\n}\n`;
-/**
- * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
- *
- * @summary For displaying a user's avatar image
- */
-let PfAvatar = class PfAvatar extends BaseAvatar {
+const style = css `:host {\n  display: inline-block;\n\t--pf-c-avatar--BorderColor: transparent;\n\t--pf-c-avatar--BorderWidth: 0;\n\t--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);\n\t--pf-c-avatar--Width: 2.25rem;\n\t--pf-c-avatar--Height: 2.25rem;\n\t--pf-c-avatar--m-sm--Width: 1.5rem;\n\t--pf-c-avatar--m-sm--Height: 1.5rem;\n\t--pf-c-avatar--m-md--Width: 2.25rem;\n\t--pf-c-avatar--m-md--Height: 2.25rem;\n\t--pf-c-avatar--m-lg--Width: 4.5rem;\n\t--pf-c-avatar--m-lg--Height: 4.5rem;\n\t--pf-c-avatar--m-xl--Width: 8rem;\n\t--pf-c-avatar--m-xl--Height: 8rem;\n\t--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);\n\t--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);\n\t--pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\twidth: var(--pf-c-avatar--Width);\n\theight: var(--pf-c-avatar--Height);\n\tborder-radius: var(--pf-c-avatar--BorderRadius);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\nsvg,\nimg {\n  display: inline;\n  object-fit: cover;\n  width: var(--pf-c-avatar--Width);\n  height: var(--pf-c-avatar--Height);\n  border-radius: var(--pf-c-avatar--BorderRadius);\n  border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);\n}\n\n:host([border]) {\n  --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n}\n\n:host([border="dark"]) {\n  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);\n}\n\n:host([size="sm"]) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);\n}\n\n:host([size="md"]) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);\n}\n\n:host([size="lg"]) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);\n}\n\n:host([size="xl"]) {\n  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);\n  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);\n}\n`;
+export class PfAvatarLoadEvent extends Event {
+    constructor(originalEvent) {
+        super('load', { bubbles: true });
+        this.originalEvent = originalEvent;
+    }
+}
+let PfAvatar = class PfAvatar extends LitElement {
     constructor() {
         super(...arguments);
+        _PfAvatar_instances.add(this);
+        /** The alt text for the avatar image. */
+        this.alt = 'Avatar image';
         /** Size of the Avatar */
         this.size = 'sm';
+        /** Whether or not the Avatar image is dark */
+        this.dark = false;
+    }
+    render() {
+        return this.src != null ? html `
+      <img id="img"
+           alt="${this.alt ?? ''}"
+           src=${this.src}
+           @load="${__classPrivateFieldGet(this, _PfAvatar_instances, "m", _PfAvatar_onLoad)}">
+    ` : this.dark ? html `
+      <svg xmlns="http://www.w3.org/2000/svg"
+           style="enable-background:new 0 0 36 36"
+           viewBox="0 0 36 36">
+        <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d="M0 0h36v36H0z" style="fill:#212427"/>
+        <path d="M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" class="st1"/><path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z" class="st2"/>
+      </svg>
+    ` : html `
+      <svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36">
+        <style>.st2{fill:#b8bbbe}</style><path d="M0 0h36v36H0z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0"/>
+        <path d="M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2"/><path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z" class="st2"/>
+        <path d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z" style="fill:#d2d2d2"/><path d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z" class="st2"/>
+      </svg>
+      `;
     }
 };
+_PfAvatar_instances = new WeakSet();
+_PfAvatar_onLoad = function _PfAvatar_onLoad(event) {
+    this.dispatchEvent(new PfAvatarLoadEvent(event));
+};
 PfAvatar.styles = [style];
+PfAvatar.version = "4.0.0";
+__decorate([
+    property()
+], PfAvatar.prototype, "src", void 0);
+__decorate([
+    property({ reflect: true })
+], PfAvatar.prototype, "alt", void 0);
 __decorate([
     property({ reflect: true })
 ], PfAvatar.prototype, "size", void 0);
 __decorate([
     property({ reflect: true })
 ], PfAvatar.prototype, "border", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfAvatar.prototype, "dark", void 0);
 PfAvatar = __decorate([
     customElement('pf-avatar')
 ], PfAvatar);

package/pf-avatar/pf-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;IAItE,CAAC;;AAPiB,eAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAP5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB","sourcesContent":["import { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n  static readonly styles = [style];\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Whether to display a border around the avatar */\n  @property({ reflect: true }) border?: 'light' | 'dark';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-avatar': PfAvatar;\n  }\n}\n"]}
+{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE,MAAM,OAAO,iBAAkB,SAAQ,KAAK;IAC1C,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QADhB,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAsBM,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;;QAML,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;QAKpE,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;;IAEzD,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;kBAEhB,IAAI,CAAC,GAAG,IAAI,EAAE;iBACf,IAAI,CAAC,GAAG;oBACL,uBAAA,IAAI,6CAAQ;KAC3B,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;KAOnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;;6CAEO,KAAY;IAClB,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;AACnD,CAAC;AAzCe,eAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAGtC;IAAX,QAAQ,EAAE;qCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAGX;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc;AAhB9C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-avatar.css';\n\nexport class PfAvatarLoadEvent extends Event {\n  constructor(public originalEvent: Event) {\n    super('load', { bubbles: true });\n  }\n}\n\n/**\n * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.\n * @summary For displaying a user's avatar image\n * @fires {PfAvatarLoadEvent} load - when the avatar loads\n * @cssprop [--pf-c-avatar--Width=24px]\n * @cssprop [--pf-c-avatar--Height=24px]\n * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]\n * @cssprop [--pf-c-avatar--BorderWidth=0]\n * @cssprop [--pf-c-avatar--BorderColor=var(--pf-global--BorderColor--dark-100, #d2d2d2)]\n * @cssprop [--pf-c-avatar--m-dark--BorderColor=var(--pf-global--palette--black-700, #4f5255)]\n * @cssprop [--pf-c-avatar--m-sm--Width=24px]\n * @cssprop [--pf-c-avatar--m-sm--Height=24px]\n * @cssprop [--pf-c-avatar--m-md--Width=36px]\n * @cssprop [--pf-c-avatar--m-md--Height=36px]\n * @cssprop [--pf-c-avatar--m-lg--Width=72px]\n * @cssprop [--pf-c-avatar--m-lg--Height=72px]\n * @cssprop [--pf-c-avatar--m-xl--Width=28px]\n * @cssprop [--pf-c-avatar--m-xl--Height=28px]\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  /** The URL to the user's custom avatar image. */\n  @property() src?: string;\n\n  /** The alt text for the avatar image. */\n  @property({ reflect: true }) alt?: string = 'Avatar image';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Whether to display a border around the avatar */\n  @property({ reflect: true }) border?: 'light' | 'dark';\n\n  /** Whether or not the Avatar image is dark */\n  @property({ type: Boolean, reflect: true }) dark = false;\n\n  render(): TemplateResult<1> {\n    return this.src != null ? html`\n      <img id=\"img\"\n           alt=\"${this.alt ?? ''}\"\n           src=${this.src}\n           @load=\"${this.#onLoad}\">\n    ` : this.dark ? html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\"\n           style=\"enable-background:new 0 0 36 36\"\n           viewBox=\"0 0 36 36\">\n        <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n        <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n      </svg>\n    ` : html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n        <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n        <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n        <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n      </svg>\n      `;\n  }\n\n  #onLoad(event: Event) {\n    this.dispatchEvent(new PfAvatarLoadEvent(event));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-avatar': PfAvatar;\n  }\n}\n"]}

package/pf-avatar/test/pf-avatar.e2e.js

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-avatar';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-avatar.e2e.js.map

package/pf-avatar/test/pf-avatar.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-avatar.e2e.js","sourceRoot":"","sources":["pf-avatar.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,WAAW,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-avatar';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-avatar.e2e.js","sourceRoot":"","sources":["pf-avatar.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,WAAW,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-avatar';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

package/pf-avatar/test/pf-avatar.spec.js

@@ -1,7 +1,6 @@
 import { html, expect, oneEvent, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { PfAvatar } from '@patternfly/elements/pf-avatar/pf-avatar.js';
-import { AvatarLoadEvent } from '../BaseAvatar';
+import { PfAvatar, PfAvatarLoadEvent } from '@patternfly/elements/pf-avatar/pf-avatar.js';
 describe('<pf-avatar>', function () {
     it('imperatively instantiates', function () {
         expect(document.createElement('pf-avatar')).to.be.an.instanceof(PfAvatar);
@@ -35,7 +34,7 @@ describe('<pf-avatar>', function () {
         beforeEach(async function () {
             element = await createFixture(html `<pf-avatar @load="${onLoad}"></pf-avatar>`);
             setTimeout(() => element.src = datauri);
-            await oneEvent(element, 'load', false);
+            await oneEvent(element, 'load');
         });
         it('loads the image', function () {
             expect(loaded).to.equal(datauri);

package/pf-avatar/test/pf-avatar.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-avatar.spec.js","sourceRoot":"","sources":["pf-avatar.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,QAAQ,CAAC,aAAa,EAAE;IACtB,EAAE,CAAC,2BAA2B,EAAE;QAC9B,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,EAAE,GAAG,MAAM,aAAa,CAAC,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAC9D,MAAM,CAAC,EAAE,EAAE,4CAA4C,CAAC;aACnD,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aACpD,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,kBAAkB,EAAE;QAC3B,IAAI,OAAiB,CAAC;QACtB,UAAU,CAAC,KAAK;YACd,OAAO,GAAG,MAAM,aAAa,CAAC,IAAI,CAAA,yBAAyB,CAAC,CAAC;YAC7D,MAAM,SAAS,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,sBAAsB,EAAE;YACzB,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC;YAChC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,iBAAiB,EAAE;QAC1B,IAAI,OAAiB,CAAC;QACtB,IAAI,MAA0B,CAAC;QAC/B,MAAM,OAAO,GAAG,gtBAAgtB,CAAC;QACjuB,MAAM,MAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;YACpC,MAAM,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC,YAAY,EAAwB,CAAC;YACnE,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC,EAAE,GAAG,CAAC;QACvD,CAAC,CAAC;QACF,UAAU,CAAC,KAAK;YACd,OAAO,GAAG,MAAM,aAAa,CAAC,IAAI,CAAA,qBAAqB,MAAM,gBAAgB,CAAC,CAAC;YAC/E,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC;YACxC,MAAM,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,iBAAiB,EAAE;YACpB,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, expect, oneEvent, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfAvatar } from '@patternfly/elements/pf-avatar/pf-avatar.js';\nimport { AvatarLoadEvent } from '../BaseAvatar';\n\ndescribe('<pf-avatar>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-avatar')).to.be.an.instanceof(PfAvatar);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture(html`<pf-avatar></pf-avatar>`);\n    expect(el, 'pf-badge should be an instance of PfAvatar')\n        .to.be.an.instanceOf(customElements.get('pf-avatar'))\n        .and\n        .to.be.an.instanceOf(PfAvatar);\n  });\n\n  describe('without src attr', function() {\n    let element: PfAvatar;\n    beforeEach(async function() {\n      element = await createFixture(html`<pf-avatar></pf-avatar>`);\n      await nextFrame();\n    });\n    it('loads default avatar', function() {\n      const { offsetWidth } = element;\n      expect(offsetWidth).to.be.greaterThan(0);\n    });\n  });\n\n  describe('with a src attr', function() {\n    let element: PfAvatar;\n    let loaded: string | undefined;\n    const datauri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAB0UlEQVR4Xu3UAQ0AAAyDsM+/6QspcwAh2zXawGj64K8A8AgKoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7gALADeD4PUAB4AZw/B6gAHADOH4PUAC4ARy/BygA3ACO3wMUAG4Ax+8BCgA3gOP3AAWAG8Dxe4ACwA3g+D1AAeAGcPweoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7gALADeD4PUAB4AZw/B6gAHADOH4PUAC4ARy/BygA3ACO3wMUAG4Ax+8BCgA3gOP3AAWAG8Dxe4ACwA3g+D1AAeAGcPweoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7ADyAB6SPAIFm19U7AAAAAElFTkSuQmCC';\n    const onLoad = (e: AvatarLoadEvent) => {\n      const paths = e.originalEvent.composedPath() as HTMLImageElement[];\n      loaded = paths.find(x => x.localName === 'img')?.src;\n    };\n    beforeEach(async function() {\n      element = await createFixture(html`<pf-avatar @load=\"${onLoad}\"></pf-avatar>`);\n      setTimeout(() => element.src = datauri);\n      await oneEvent(element, 'load', false);\n    });\n    it('loads the image', function() {\n      expect(loaded).to.equal(datauri);\n    });\n  });\n});\n"]}
+{"version":3,"file":"pf-avatar.spec.js","sourceRoot":"","sources":["pf-avatar.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAE1F,QAAQ,CAAC,aAAa,EAAE;IACtB,EAAE,CAAC,2BAA2B,EAAE;QAC9B,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,EAAE,GAAG,MAAM,aAAa,CAAC,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAC9D,MAAM,CAAC,EAAE,EAAE,4CAA4C,CAAC;aACnD,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aACpD,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,kBAAkB,EAAE;QAC3B,IAAI,OAAiB,CAAC;QACtB,UAAU,CAAC,KAAK;YACd,OAAO,GAAG,MAAM,aAAa,CAAC,IAAI,CAAA,yBAAyB,CAAC,CAAC;YAC7D,MAAM,SAAS,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,sBAAsB,EAAE;YACzB,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC;YAChC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,iBAAiB,EAAE;QAC1B,IAAI,OAAiB,CAAC;QACtB,IAAI,MAA0B,CAAC;QAC/B,MAAM,OAAO,GAAG,gtBAAgtB,CAAC;QACjuB,MAAM,MAAM,GAAG,CAAC,CAAoB,EAAE,EAAE;YACtC,MAAM,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC,YAAY,EAAwB,CAAC;YACnE,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC,EAAE,GAAG,CAAC;QACvD,CAAC,CAAC;QACF,UAAU,CAAC,KAAK;YACd,OAAO,GAAG,MAAM,aAAa,CAAC,IAAI,CAAA,qBAAqB,MAAM,gBAAgB,CAAC,CAAC;YAC/E,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC;YACxC,MAAM,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,iBAAiB,EAAE;YACpB,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, expect, oneEvent, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfAvatar, PfAvatarLoadEvent } from '@patternfly/elements/pf-avatar/pf-avatar.js';\n\ndescribe('<pf-avatar>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-avatar')).to.be.an.instanceof(PfAvatar);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture(html`<pf-avatar></pf-avatar>`);\n    expect(el, 'pf-badge should be an instance of PfAvatar')\n        .to.be.an.instanceOf(customElements.get('pf-avatar'))\n        .and\n        .to.be.an.instanceOf(PfAvatar);\n  });\n\n  describe('without src attr', function() {\n    let element: PfAvatar;\n    beforeEach(async function() {\n      element = await createFixture(html`<pf-avatar></pf-avatar>`);\n      await nextFrame();\n    });\n    it('loads default avatar', function() {\n      const { offsetWidth } = element;\n      expect(offsetWidth).to.be.greaterThan(0);\n    });\n  });\n\n  describe('with a src attr', function() {\n    let element: PfAvatar;\n    let loaded: string | undefined;\n    const datauri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAB0UlEQVR4Xu3UAQ0AAAyDsM+/6QspcwAh2zXawGj64K8A8AgKoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7gALADeD4PUAB4AZw/B6gAHADOH4PUAC4ARy/BygA3ACO3wMUAG4Ax+8BCgA3gOP3AAWAG8Dxe4ACwA3g+D1AAeAGcPweoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7gALADeD4PUAB4AZw/B6gAHADOH4PUAC4ARy/BygA3ACO3wMUAG4Ax+8BCgA3gOP3AAWAG8Dxe4ACwA3g+D1AAeAGcPweoABwAzh+D1AAuAEcvwcoANwAjt8DFABuAMfvAQoAN4Dj9wAFgBvA8XuAAsAN4Pg9QAHgBnD8HqAAcAM4fg9QALgBHL8HKADcAI7fAxQAbgDH7wEKADeA4/cABYAbwPF7ADyAB6SPAIFm19U7AAAAAElFTkSuQmCC';\n    const onLoad = (e: PfAvatarLoadEvent) => {\n      const paths = e.originalEvent.composedPath() as HTMLImageElement[];\n      loaded = paths.find(x => x.localName === 'img')?.src;\n    };\n    beforeEach(async function() {\n      element = await createFixture(html`<pf-avatar @load=\"${onLoad}\"></pf-avatar>`);\n      setTimeout(() => element.src = datauri);\n      await oneEvent(element, 'load');\n    });\n    it('loads the image', function() {\n      expect(loaded).to.equal(datauri);\n    });\n  });\n});\n"]}

package/pf-back-to-top/pf-back-to-top.css

@@ -29,6 +29,16 @@ a {
   gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
 }
 
+a:hover {
+  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
+}
+
+a:focus {
+  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
+}
+
 [part="trigger"][hidden] {
   display: none;
 }

package/pf-back-to-top/pf-back-to-top.d.ts

@@ -1,30 +1,26 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 /**
  * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
  * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.
- *
  * @csspart trigger - The `<a>` or `<pf-button>` element
- *
  * @slot icon
  *       Contains the prefix icon to display before the link or button.
  * @slot
  *       Text to display inside the link or button.
- *
- * @cssprop {<length>} --pf-c-back-to-top--Right {@default `3rem``}
- * @cssprop {<length>} --pf-c-back-to-top--Bottom {@default `1.5rem``}
- * @cssprop --pf-c-back-to-top--c-button--BoxShadow {@default `0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)`}
- * @cssprop {<length>} --pf-c-button--FontSize {@default `0.75rem`}
- * @cssprop {<length>|<percentage>}  --pf-c-button--BorderRadius {@default `30em`}
- * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-button--PaddingRight {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `0.5rem`}
- * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}
- * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}
- * @cssprop {<length>} --pf-c-button__icon--m-end--MarginLeft {@default `0.25rem`}
- *
+ * @cssprop {<length>} [--pf-c-back-to-top--Right=3rem`]
+ * @cssprop {<length>} [--pf-c-back-to-top--Bottom=1.5rem`]
+ * @cssprop [--pf-c-back-to-top--c-button--BoxShadow=0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)]
+ * @cssprop {<length>} [--pf-c-button--FontSize=0.75rem]
+ * @cssprop {<length>|<percentage>}  [--pf-c-button--BorderRadius=30em]
+ * @cssprop {<length>} [--pf-c-button--PaddingTop=0.25rem]
+ * @cssprop {<length>} [--pf-c-button--PaddingRight=0.5rem]
+ * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.25rem]
+ * @cssprop {<length>} [--pf-c-button--PaddingLeft=0.5rem]
+ * @cssprop {<color>} [--pf-c-button--m-primary--Color=#fff]
+ * @cssprop {<color>} [--pf-c-button--m-primary--BackgroundColor=#06c]
+ * @cssprop {<length>} [--pf-c-button__icon--m-end--MarginLeft=0.25rem]
  */
 export declare class PfBackToTop extends LitElement {
     #private;
@@ -46,7 +42,7 @@ export declare class PfBackToTop extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-back-to-top/pf-back-to-top.js

@@ -1,6 +1,6 @@
 var _PfBackToTop_instances, _PfBackToTop_scrollSpy, _PfBackToTop_visible, _PfBackToTop_scrollElement, _PfBackToTop_hasSlottedText, _PfBackToTop_logger, _PfBackToTop_rootNode_get, _PfBackToTop_ariaLabel_get, _PfBackToTop_onSlotchange, _PfBackToTop_removeScrollListener, _PfBackToTop_addScrollListener, _PfBackToTop_toggleVisibility;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -8,32 +8,7 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: inline-block;\n  position: absolute;\n  right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));\n  bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n[part="trigger"] {\n  box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)));\n\n  --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));\n  --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius,  var(--pf-global--BorderRadius--lg, 30em));\n  --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n}\n\na {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));\n  background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));\n  text-decoration: none;\n  font-size: var(--pf-c-button--FontSize);\n  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);\n  border-radius: var(--pf-c-button--BorderRadius);\n  gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n[part="trigger"][hidden] {\n  display: none;\n}\n\npf-icon {\n  /* override icon size as default sm variant is incorrect */\n  --pf-icon--size: var(--pf-c-button--FontSize);\n  vertical-align: -0.125rem;\n}\n\nspan {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n@media (min-width: 768px) {\n  :host {\n    --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem));\n  }\n}\n`;
-/**
- * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
- * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.
- *
- * @csspart trigger - The `<a>` or `<pf-button>` element
- *
- * @slot icon
- *       Contains the prefix icon to display before the link or button.
- * @slot
- *       Text to display inside the link or button.
- *
- * @cssprop {<length>} --pf-c-back-to-top--Right {@default `3rem``}
- * @cssprop {<length>} --pf-c-back-to-top--Bottom {@default `1.5rem``}
- * @cssprop --pf-c-back-to-top--c-button--BoxShadow {@default `0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)`}
- * @cssprop {<length>} --pf-c-button--FontSize {@default `0.75rem`}
- * @cssprop {<length>|<percentage>}  --pf-c-button--BorderRadius {@default `30em`}
- * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-button--PaddingRight {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `0.5rem`}
- * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}
- * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}
- * @cssprop {<length>} --pf-c-button__icon--m-end--MarginLeft {@default `0.25rem`}
- *
- */
+const styles = css `:host {\n  display: inline-block;\n  position: absolute;\n  right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));\n  bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n[part="trigger"] {\n  box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)));\n\n  --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));\n  --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius,  var(--pf-global--BorderRadius--lg, 30em));\n  --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n}\n\na {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));\n  background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));\n  text-decoration: none;\n  font-size: var(--pf-c-button--FontSize);\n  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);\n  border-radius: var(--pf-c-button--BorderRadius);\n  gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));\n}\n\na:hover {\n  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));\n}\n\na:focus {\n  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));\n  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));\n}\n\n[part="trigger"][hidden] {\n  display: none;\n}\n\npf-icon {\n  /* override icon size as default sm variant is incorrect */\n  --pf-icon--size: var(--pf-c-button--FontSize);\n  vertical-align: -0.125rem;\n}\n\nspan {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n@media (min-width: 768px) {\n  :host {\n    --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem));\n  }\n}\n`;
 let PfBackToTop = class PfBackToTop extends LitElement {
     constructor() {
         super(...arguments);
@@ -124,8 +99,11 @@ _PfBackToTop_logger = new WeakMap();
 _PfBackToTop_toggleVisibility = new WeakMap();
 _PfBackToTop_instances = new WeakSet();
 _PfBackToTop_rootNode_get = function _PfBackToTop_rootNode_get() {
-    const root = this.getRootNode();
-    if (root instanceof Document || root instanceof ShadowRoot) {
+    let root = null;
+    if (isServer) {
+        return null;
+    }
+    else if ((root = this.getRootNode()) instanceof Document || root instanceof ShadowRoot) {
         return root;
     }
     else {
@@ -155,7 +133,7 @@ _PfBackToTop_addScrollListener = function _PfBackToTop_addScrollListener() {
     }
     __classPrivateFieldSet(this, _PfBackToTop_scrollSpy, !!this.scrollableSelector, "f");
     if (__classPrivateFieldGet(this, _PfBackToTop_scrollSpy, "f") && this.scrollableSelector) {
-        const scrollableElement = __classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_rootNode_get).querySelector(this.scrollableSelector);
+        const scrollableElement = __classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_rootNode_get)?.querySelector?.(this.scrollableSelector);
         if (!scrollableElement) {
             __classPrivateFieldGet(this, _PfBackToTop_logger, "f").error(`unable to find element with selector ${this.scrollableSelector}`);
             return;
@@ -169,6 +147,7 @@ _PfBackToTop_addScrollListener = function _PfBackToTop_addScrollListener() {
     __classPrivateFieldGet(this, _PfBackToTop_toggleVisibility, "f").call(this);
 };
 PfBackToTop.styles = [styles];
+PfBackToTop.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfBackToTop.prototype, "icon", void 0);

package/pf-back-to-top/pf-back-to-top.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-back-to-top.js","sourceRoot":"","sources":["pf-back-to-top.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-back-to-top.css';\n\n/**\n * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.\n * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.\n *\n * @csspart trigger - The `<a>` or `<pf-button>` element\n *\n * @slot icon\n *       Contains the prefix icon to display before the link or button.\n * @slot\n *       Text to display inside the link or button.\n *\n * @cssprop {<length>} --pf-c-back-to-top--Right {@default `3rem``}\n * @cssprop {<length>} --pf-c-back-to-top--Bottom {@default `1.5rem``}\n * @cssprop --pf-c-back-to-top--c-button--BoxShadow {@default `0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)`}\n * @cssprop {<length>} --pf-c-button--FontSize {@default `0.75rem`}\n * @cssprop {<length>|<percentage>}  --pf-c-button--BorderRadius {@default `30em`}\n * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button__icon--m-end--MarginLeft {@default `0.25rem`}\n *\n */\n@customElement('pf-back-to-top')\nexport class PfBackToTop extends LitElement {\n  static readonly styles = [styles];\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property({ reflect: true }) icon?: string;\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Flag to always show back to top button, defaults to false. */\n  @property({ reflect: true, type: Boolean, attribute: 'always-visible' }) alwaysVisible = false;\n\n  /** Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events */\n  @property({ reflect: true, attribute: 'scrollable-selector' }) scrollableSelector?: string;\n\n  /** Distance from the top of the scrollable element to trigger the visibility of the back to top button */\n  @property({ type: Number, attribute: 'scroll-distance' }) scrollDistance = 400;\n\n  /** Accessible name for the back-to-top link, use when component does not have slotted text */\n  @property() label?: string;\n\n  /** Page fragment link to target element, must include hash ex: #top */\n  @property({ reflect: true }) href?: string;\n\n  #scrollSpy = false;\n\n  #visible = false;\n\n  #scrollElement?: Element | Window;\n\n  #hasSlottedText = false;\n\n  #logger = new Logger(this);\n\n  get #rootNode(): Document | ShadowRoot {\n    const root = this.getRootNode();\n    if (root instanceof Document || root instanceof ShadowRoot) {\n      return root;\n    } else {\n      return document;\n    }\n  }\n\n  get #ariaLabel(): string | undefined {\n    if (this.#hasSlottedText) {\n      return undefined;\n    }\n    return this.label ?? 'Back to top';\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#addScrollListener();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#removeScrollListener();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('scrollableSelector')) {\n      this.#addScrollListener();\n    }\n    if (changed.has('alwaysVisible')) {\n      this.#toggleVisibility();\n    }\n  }\n\n  render() {\n    // ensure href has a hash\n    if (this.href && this.href.charAt(0) !== '#') {\n      this.href = `#${this.href}`;\n      this.#logger.warn(`missing hash in href fragment link`);\n    }\n\n    if (this.href) {\n      return html`\n        <a href=\"${this.href}\" ?hidden=\"${!this.#visible}\" part=\"trigger\" aria-label=\"${ifDefined(this.#ariaLabel)}\">\n          <slot name=\"icon\"></slot>\n          <slot @slotchange=\"${this.#onSlotchange}\"></slot>\n          <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n        </a>\n      `;\n    } else {\n      return html`\n        <pf-button\n            icon=\"${ifDefined(this.icon)}\"\n            icon-set=\"${ifDefined(this.iconSet)}\"\n            ?hidden=\"${!this.#visible}\"\n            tabindex=\"${this.#visible ? '0' : '-1'}\"\n            part=\"trigger\"\n            label=\"${ifDefined(this.#ariaLabel)}\"\n          >\n          <slot name=\"icon\" slot=\"icon\"></slot>\n          <span>\n            <slot></slot>\n            <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n          </span>\n        </pf-button>\n      `;\n    }\n  }\n\n  #onSlotchange(event: Event) {\n    const slot = event.currentTarget as HTMLSlotElement;\n    const nodes = slot.assignedNodes();\n    this.#hasSlottedText = nodes.length > 0 ? true : false;\n    this.requestUpdate();\n  }\n\n  #removeScrollListener() {\n    this.#scrollElement?.removeEventListener('scroll', this.#toggleVisibility);\n  }\n\n  #addScrollListener() {\n    this.#removeScrollListener();\n\n    if (this.scrollableSelector?.trim() === '') {\n      this.#logger.error(`scrollable-selector attribute cannot be empty`);\n      return;\n    }\n\n    this.#scrollSpy = !!this.scrollableSelector;\n    if (this.#scrollSpy && this.scrollableSelector) {\n      const scrollableElement = this.#rootNode.querySelector(this.scrollableSelector);\n      if (!scrollableElement) {\n        this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`);\n        return;\n      }\n      this.#scrollElement = scrollableElement;\n    } else {\n      this.#scrollElement = window;\n    }\n\n    this.#scrollElement.addEventListener('scroll', this.#toggleVisibility, { passive: true });\n    this.#toggleVisibility();\n  }\n\n  #toggleVisibility = () => {\n    if (this.alwaysVisible) {\n      this.#visible = true;\n      this.requestUpdate();\n      return;\n    }\n    const previousVisibility = this.#visible;\n    if (this.#scrollElement) {\n      const scrolled =\n          (this.#scrollElement instanceof Window) ?\n          this.#scrollElement.scrollY\n        : this.#scrollElement.scrollTop;\n      this.#visible = (scrolled > this.scrollDistance);\n      if (previousVisibility !== this.#visible) {\n        this.requestUpdate();\n      }\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-back-to-top': PfBackToTop;\n  }\n}\n"]}
+{"version":3,"file":"pf-back-to-top.js","sourceRoot":"","sources":["pf-back-to-top.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-back-to-top.css';\n\n/**\n * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.\n * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.\n * @csspart trigger - The `<a>` or `<pf-button>` element\n * @slot icon\n *       Contains the prefix icon to display before the link or button.\n * @slot\n *       Text to display inside the link or button.\n * @cssprop {<length>} [--pf-c-back-to-top--Right=3rem`]\n * @cssprop {<length>} [--pf-c-back-to-top--Bottom=1.5rem`]\n * @cssprop [--pf-c-back-to-top--c-button--BoxShadow=0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)]\n * @cssprop {<length>} [--pf-c-button--FontSize=0.75rem]\n * @cssprop {<length>|<percentage>}  [--pf-c-button--BorderRadius=30em]\n * @cssprop {<length>} [--pf-c-button--PaddingTop=0.25rem]\n * @cssprop {<length>} [--pf-c-button--PaddingRight=0.5rem]\n * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.25rem]\n * @cssprop {<length>} [--pf-c-button--PaddingLeft=0.5rem]\n * @cssprop {<color>} [--pf-c-button--m-primary--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-primary--BackgroundColor=#06c]\n * @cssprop {<length>} [--pf-c-button__icon--m-end--MarginLeft=0.25rem]\n */\n@customElement('pf-back-to-top')\nexport class PfBackToTop extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property({ reflect: true }) icon?: string;\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Flag to always show back to top button, defaults to false. */\n  @property({ reflect: true, type: Boolean, attribute: 'always-visible' }) alwaysVisible = false;\n\n  /** Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events */\n  @property({ reflect: true, attribute: 'scrollable-selector' }) scrollableSelector?: string;\n\n  /** Distance from the top of the scrollable element to trigger the visibility of the back to top button */\n  @property({ type: Number, attribute: 'scroll-distance' }) scrollDistance = 400;\n\n  /** Accessible name for the back-to-top link, use when component does not have slotted text */\n  @property() label?: string;\n\n  /** Page fragment link to target element, must include hash ex: #top */\n  @property({ reflect: true }) href?: string;\n\n  #scrollSpy = false;\n\n  #visible = false;\n\n  #scrollElement?: Element | Window;\n\n  #hasSlottedText = false;\n\n  #logger = new Logger(this);\n\n  get #rootNode(): Document | ShadowRoot | null {\n    let root = null;\n    if (isServer) {\n      return null;\n    } else if ((root = this.getRootNode()) instanceof Document || root instanceof ShadowRoot) {\n      return root;\n    } else {\n      return document;\n    }\n  }\n\n  get #ariaLabel(): string | undefined {\n    if (this.#hasSlottedText) {\n      return undefined;\n    }\n    return this.label ?? 'Back to top';\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#addScrollListener();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#removeScrollListener();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('scrollableSelector')) {\n      this.#addScrollListener();\n    }\n    if (changed.has('alwaysVisible')) {\n      this.#toggleVisibility();\n    }\n  }\n\n  render(): TemplateResult<1> {\n    // ensure href has a hash\n    if (this.href && this.href.charAt(0) !== '#') {\n      this.href = `#${this.href}`;\n      this.#logger.warn(`missing hash in href fragment link`);\n    }\n\n    if (this.href) {\n      return html`\n        <a href=\"${this.href}\" ?hidden=\"${!this.#visible}\" part=\"trigger\" aria-label=\"${ifDefined(this.#ariaLabel)}\">\n          <slot name=\"icon\"></slot>\n          <slot @slotchange=\"${this.#onSlotchange}\"></slot>\n          <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n        </a>\n      `;\n    } else {\n      return html`\n        <pf-button\n            icon=\"${ifDefined(this.icon)}\"\n            icon-set=\"${ifDefined(this.iconSet)}\"\n            ?hidden=\"${!this.#visible}\"\n            tabindex=\"${this.#visible ? '0' : '-1'}\"\n            part=\"trigger\"\n            label=\"${ifDefined(this.#ariaLabel)}\"\n          >\n          <slot name=\"icon\" slot=\"icon\"></slot>\n          <span>\n            <slot></slot>\n            <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n          </span>\n        </pf-button>\n      `;\n    }\n  }\n\n  #onSlotchange(event: Event) {\n    const slot = event.currentTarget as HTMLSlotElement;\n    const nodes = slot.assignedNodes();\n    this.#hasSlottedText = nodes.length > 0 ? true : false;\n    this.requestUpdate();\n  }\n\n  #removeScrollListener() {\n    this.#scrollElement?.removeEventListener('scroll', this.#toggleVisibility);\n  }\n\n  #addScrollListener() {\n    this.#removeScrollListener();\n\n    if (this.scrollableSelector?.trim() === '') {\n      this.#logger.error(`scrollable-selector attribute cannot be empty`);\n      return;\n    }\n\n    this.#scrollSpy = !!this.scrollableSelector;\n    if (this.#scrollSpy && this.scrollableSelector) {\n      const scrollableElement = this.#rootNode?.querySelector?.(this.scrollableSelector);\n      if (!scrollableElement) {\n        this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`);\n        return;\n      }\n      this.#scrollElement = scrollableElement;\n    } else {\n      this.#scrollElement = window;\n    }\n\n    this.#scrollElement.addEventListener('scroll', this.#toggleVisibility, { passive: true });\n    this.#toggleVisibility();\n  }\n\n  #toggleVisibility = () => {\n    if (this.alwaysVisible) {\n      this.#visible = true;\n      this.requestUpdate();\n      return;\n    }\n    const previousVisibility = this.#visible;\n    if (this.#scrollElement) {\n      const scrolled =\n          (this.#scrollElement instanceof Window) ?\n          this.#scrollElement.scrollY\n        : this.#scrollElement.scrollTop;\n      this.#visible = (scrolled > this.scrollDistance);\n      if (previousVisibility !== this.#visible) {\n        this.requestUpdate();\n      }\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-back-to-top': PfBackToTop;\n  }\n}\n"]}

package/pf-back-to-top/test/pf-back-to-top.e2e.js

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-back-to-top';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-back-to-top.e2e.js.map

package/pf-back-to-top/test/pf-back-to-top.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-back-to-top.e2e.js","sourceRoot":"","sources":["pf-back-to-top.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,gBAAgB,CAAC;AAEjC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-back-to-top';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-back-to-top.e2e.js","sourceRoot":"","sources":["pf-back-to-top.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,gBAAgB,CAAC;AAEjC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-back-to-top';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

package/pf-background-image/pf-background-image.d.ts

@@ -1,15 +1,15 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * A **background image** allows you to place an image in the background of your page or area of a page.
  * @summary Allows users to place an image in the background of your page or area of a page.
  * @slot filter - Overrides the default svg filter for the background image.
- * @cssprop {<color>} --pf-c-background-image--BackgroundColor {@default `#151515`}
+ * @cssprop {<color>} [--pf-c-background-image--BackgroundColor=#151515]
+ * @cssprop [--pf-c-background-image--Filter=url("#image_overlay")]
  * @cssprop --pf-c-background-image--BackgroundImage
  * @cssprop --pf-c-background-image--BackgroundImage-2x
  * @cssprop --pf-c-background-image--BackgroundImage--sm
  * @cssprop --pf-c-background-image--BackgroundImage--sm-2x
  * @cssprop --pf-c-background-image--BackgroundImage--lg
- * @cssprop --pf-c-background-image--Filter {@default `url("#image_overlay")`}
  */
 export declare class PfBackgroundImage extends LitElement {
     #private;
@@ -39,7 +39,7 @@ export declare class PfBackgroundImage extends LitElement {
      */
     filter: boolean;
     private _svg?;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-background-image/pf-background-image.js

@@ -7,18 +7,6 @@ import { property } from 'lit/decorators/property.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { css } from "lit";
 const styles = css `:host {\n  display: flex;\n\n  --_background-image: var(--pf-c-background-image--BackgroundImage);\n}\n\n#outer-container {\n  display: contents;\n}\n\n#container {\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\n#container::after {\n  display: block;\n  position: fixed;\n  top:  0;\n  left: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  content: "";\n  background-color: var(--pf-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));\n  background-image: var(--_background-image);\n  filter: var(--pf-c-background-image--Filter, url("#image_overlay"));\n  background-repeat:  no-repeat;\n  background-size: cover;\n}\n\nslot[name="filter"] {\n  display: none;\n}\n\nslot[part="content"] {\n  display: block;\n  position: relative;\n  z-index: 1;\n  color: white;\n}\n\n@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 576px) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 992px) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));\n  }\n}\n`;
-/**
- * A **background image** allows you to place an image in the background of your page or area of a page.
- * @summary Allows users to place an image in the background of your page or area of a page.
- * @slot filter - Overrides the default svg filter for the background image.
- * @cssprop {<color>} --pf-c-background-image--BackgroundColor {@default `#151515`}
- * @cssprop --pf-c-background-image--BackgroundImage
- * @cssprop --pf-c-background-image--BackgroundImage-2x
- * @cssprop --pf-c-background-image--BackgroundImage--sm
- * @cssprop --pf-c-background-image--BackgroundImage--sm-2x
- * @cssprop --pf-c-background-image--BackgroundImage--lg
- * @cssprop --pf-c-background-image--Filter {@default `url("#image_overlay")`}
- */
 let PfBackgroundImage = class PfBackgroundImage extends LitElement {
     constructor() {
         super(...arguments);
@@ -86,6 +74,7 @@ _PfBackgroundImage_onSlotChange = function _PfBackgroundImage_onSlotChange() {
     }
 };
 PfBackgroundImage.styles = [styles];
+PfBackgroundImage.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfBackgroundImage.prototype, "src", void 0);

package/pf-background-image/pf-background-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-background-image.js","sourceRoot":"","sources":["pf-background-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { property } from 'lit/decorators/property.js';\n\n\nimport { styleMap, type StyleInfo } from 'lit/directives/style-map.js';\n\nimport styles from './pf-background-image.css';\n\n/**\n * A **background image** allows you to place an image in the background of your page or area of a page.\n * @summary Allows users to place an image in the background of your page or area of a page.\n * @slot filter - Overrides the default svg filter for the background image.\n * @cssprop {<color>} --pf-c-background-image--BackgroundColor {@default `#151515`}\n * @cssprop --pf-c-background-image--BackgroundImage\n * @cssprop --pf-c-background-image--BackgroundImage-2x\n * @cssprop --pf-c-background-image--BackgroundImage--sm\n * @cssprop --pf-c-background-image--BackgroundImage--sm-2x\n * @cssprop --pf-c-background-image--BackgroundImage--lg\n * @cssprop --pf-c-background-image--Filter {@default `url(\"#image_overlay\")`}\n */\n@customElement('pf-background-image')\nexport class PfBackgroundImage extends LitElement {\n  static readonly styles = [styles];\n\n  /**\n   * The URL for the image shown on mobile\n   */\n  @property({ reflect: true }) src?: string;\n\n  /**\n   * The image shown on mobile with 2x DPI\n   */\n  @property({ reflect: true, attribute: 'src-2x' }) src2x?: string;\n\n  /**\n   * The URL for the image shown on small screens (min-width: 576px)\n   */\n  @property({ reflect: true, attribute: 'src-sm' }) srcSm?: string;\n\n  /**\n   * The URL for the image shown on small screens (min-width: 576px) with 2x DPI\n   */\n  @property({ reflect: true, attribute: 'src-sm-2x' }) srcSm2x?: string;\n\n  /**\n   * The URL for the image shown on large screens (min-width: 992px)\n   */\n  @property({ reflect: true, attribute: 'src-lg' }) srcLg?: string;\n\n  /**\n   * Apply SVG Filter to the image\n   */\n  @property({ type: Boolean, reflect: true }) filter = false;\n\n  @queryAssignedElements({ slot: 'filter', selector: 'svg' }) private _svg?: SVGElement[];\n\n  #svg?: SVGElement;\n\n  #updated = false;\n\n  render() {\n    const cssProps = {\n      '--_background-image': this.src,\n      '--_background-image-2x': this.src2x,\n      '--_background-image-sm': this.srcSm,\n      '--_background-image-sm-2x': this.srcSm2x,\n      '--_background-image-lg': this.srcLg,\n    } as StyleInfo;\n\n    Object.entries(cssProps).forEach(([key, value]) => {\n      // if the value is undefined, remove the css property\n      if (!value) {\n        delete cssProps[key];\n      } else {\n        // otherwise, add the value with the url() css function\n        cssProps[key] = `url(${value})`;\n      }\n    });\n\n    return html`\n      <div id=\"container\" part=\"container\" style=\"${styleMap(cssProps)}\">\n        ${!this.filter ? html`` : html`\n          <slot name=\"filter\" @slotchange=${this.#onSlotChange}>\n            ${(this.#svg && this.#updated) ? this.#svg : html`\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0\" height=\"0\">\n                <filter id=\"image_overlay\">\n                  <feColorMatrix type=\"matrix\" values=\"1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0\"></feColorMatrix>\n                  <feComponentTransfer color-interpolation-filters=\"sRGB\" result=\"duotone\">\n                    <feFuncR type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncR>\n                    <feFuncG type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncG>\n                    <feFuncB type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncB>\n                    <feFuncA type=\"table\" tableValues=\"0 1\"></feFuncA>\n                  </feComponentTransfer>\n                </filter>\n              </svg>\n            `}\n          </slot>\n        `}\n      </div>\n    `;\n  }\n\n  #onSlotChange() {\n    const [svg] = this._svg as SVGElement[];\n    if (svg) {\n      this.#svg = svg;\n      this.#updated = true;\n      this.requestUpdate();\n    } else {\n      this.#updated = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-background-image': PfBackgroundImage;\n  }\n}\n"]}
+{"version":3,"file":"pf-background-image.js","sourceRoot":"","sources":["pf-background-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { property } from 'lit/decorators/property.js';\n\n\nimport { styleMap, type StyleInfo } from 'lit/directives/style-map.js';\n\nimport styles from './pf-background-image.css';\n\n/**\n * A **background image** allows you to place an image in the background of your page or area of a page.\n * @summary Allows users to place an image in the background of your page or area of a page.\n * @slot filter - Overrides the default svg filter for the background image.\n * @cssprop {<color>} [--pf-c-background-image--BackgroundColor=#151515]\n * @cssprop [--pf-c-background-image--Filter=url(\"#image_overlay\")]\n * @cssprop --pf-c-background-image--BackgroundImage\n * @cssprop --pf-c-background-image--BackgroundImage-2x\n * @cssprop --pf-c-background-image--BackgroundImage--sm\n * @cssprop --pf-c-background-image--BackgroundImage--sm-2x\n * @cssprop --pf-c-background-image--BackgroundImage--lg\n */\n@customElement('pf-background-image')\nexport class PfBackgroundImage extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /**\n   * The URL for the image shown on mobile\n   */\n  @property({ reflect: true }) src?: string;\n\n  /**\n   * The image shown on mobile with 2x DPI\n   */\n  @property({ reflect: true, attribute: 'src-2x' }) src2x?: string;\n\n  /**\n   * The URL for the image shown on small screens (min-width: 576px)\n   */\n  @property({ reflect: true, attribute: 'src-sm' }) srcSm?: string;\n\n  /**\n   * The URL for the image shown on small screens (min-width: 576px) with 2x DPI\n   */\n  @property({ reflect: true, attribute: 'src-sm-2x' }) srcSm2x?: string;\n\n  /**\n   * The URL for the image shown on large screens (min-width: 992px)\n   */\n  @property({ reflect: true, attribute: 'src-lg' }) srcLg?: string;\n\n  /**\n   * Apply SVG Filter to the image\n   */\n  @property({ type: Boolean, reflect: true }) filter = false;\n\n  @queryAssignedElements({ slot: 'filter', selector: 'svg' }) private _svg?: SVGElement[];\n\n  #svg?: SVGElement;\n\n  #updated = false;\n\n  render(): TemplateResult<1> {\n    const cssProps = {\n      '--_background-image': this.src,\n      '--_background-image-2x': this.src2x,\n      '--_background-image-sm': this.srcSm,\n      '--_background-image-sm-2x': this.srcSm2x,\n      '--_background-image-lg': this.srcLg,\n    } as StyleInfo;\n\n    Object.entries(cssProps).forEach(([key, value]) => {\n      // if the value is undefined, remove the css property\n      if (!value) {\n        delete cssProps[key];\n      } else {\n        // otherwise, add the value with the url() css function\n        cssProps[key] = `url(${value})`;\n      }\n    });\n\n    return html`\n      <div id=\"container\" part=\"container\" style=\"${styleMap(cssProps)}\">\n        ${!this.filter ? html`` : html`\n          <slot name=\"filter\" @slotchange=${this.#onSlotChange}>\n            ${(this.#svg && this.#updated) ? this.#svg : html`\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"0\" height=\"0\">\n                <filter id=\"image_overlay\">\n                  <feColorMatrix type=\"matrix\" values=\"1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0\"></feColorMatrix>\n                  <feComponentTransfer color-interpolation-filters=\"sRGB\" result=\"duotone\">\n                    <feFuncR type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncR>\n                    <feFuncG type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncG>\n                    <feFuncB type=\"table\" tableValues=\"0.086274509803922 0.43921568627451\"></feFuncB>\n                    <feFuncA type=\"table\" tableValues=\"0 1\"></feFuncA>\n                  </feComponentTransfer>\n                </filter>\n              </svg>\n            `}\n          </slot>\n        `}\n      </div>\n    `;\n  }\n\n  #onSlotChange() {\n    const [svg] = this._svg as SVGElement[];\n    if (svg) {\n      this.#svg = svg;\n      this.#updated = true;\n      this.requestUpdate();\n    } else {\n      this.#updated = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-background-image': PfBackgroundImage;\n  }\n}\n"]}

package/pf-background-image/test/pf-background-image.e2e.js

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-background-image';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-background-image.e2e.js.map

package/pf-background-image/test/pf-background-image.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-background-image.e2e.js","sourceRoot":"","sources":["pf-background-image.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,qBAAqB,CAAC;AAEtC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-background-image';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-background-image.e2e.js","sourceRoot":"","sources":["pf-background-image.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,qBAAqB,CAAC;AAEtC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-background-image';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}