@patternfly/elements 4.1.0 → 4.3.0

package/pf-avatar/pf-avatar.js

@@ -4,7 +4,87 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { css } from "lit";
-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`;
+const style = css `:host {
+  display: inline-block;
+\t/** Border color for avatar */
+\t--pf-c-avatar--BorderColor: transparent;
+\t/** Border width for avatar */
+\t--pf-c-avatar--BorderWidth: 0;
+\t/** Border radius for avatar */
+\t--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);
+\t/** Width for avatar */
+\t--pf-c-avatar--Width: 2.25rem;
+\t/** Height for avatar */
+\t--pf-c-avatar--Height: 2.25rem;
+\t/** Width for small avatar */
+\t--pf-c-avatar--m-sm--Width: 1.5rem;
+\t/** Height for small avatar */
+\t--pf-c-avatar--m-sm--Height: 1.5rem;
+\t/** Width for medium avatar */
+\t--pf-c-avatar--m-md--Width: 2.25rem;
+\t/** Height for medium avatar */
+\t--pf-c-avatar--m-md--Height: 2.25rem;
+\t/** Width for large avatar */
+\t--pf-c-avatar--m-lg--Width: 4.5rem;
+\t/** Height for large avatar */
+\t--pf-c-avatar--m-lg--Height: 4.5rem;
+\t/** Width for extra large avatar */
+\t--pf-c-avatar--m-xl--Width: 8rem;
+\t/** Height for extra large avatar */
+\t--pf-c-avatar--m-xl--Height: 8rem;
+\t--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);
+\t--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+\t/** Border color for dark avatar */
+\t--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);
+\t--pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+\twidth: var(--pf-c-avatar--Width);
+\theight: var(--pf-c-avatar--Height);
+\tborder-radius: var(--pf-c-avatar--BorderRadius);
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+svg,
+img {
+  display: inline;
+  object-fit: cover;
+  width: var(--pf-c-avatar--Width);
+  height: var(--pf-c-avatar--Height);
+  border-radius: var(--pf-c-avatar--BorderRadius);
+  border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);
+}
+
+:host([border]) {
+  --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+}
+
+:host([border="dark"]) {
+  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
+}
+
+:host([size="sm"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
+}
+
+:host([size="md"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
+}
+
+:host([size="lg"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
+}
+
+:host([size="xl"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
+}
+`;
 export class PfAvatarLoadEvent extends Event {
     constructor(originalEvent) {
         super('load', { bubbles: true });
@@ -49,7 +129,7 @@ _PfAvatar_onLoad = function _PfAvatar_onLoad(event) {
     this.dispatchEvent(new PfAvatarLoadEvent(event));
 };
 PfAvatar.styles = [style];
-PfAvatar.version = "4.1.0";
+PfAvatar.version = "4.3.0";
 __decorate([
     property()
 ], PfAvatar.prototype, "src", void 0);

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,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"]}
+{"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;AASM,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 * @alias Avatar\n * @fires {PfAvatarLoadEvent} load - when the avatar loads\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-back-to-top/pf-back-to-top.css

@@ -1,18 +1,27 @@
 :host {
   display: inline-block;
   position: absolute;
+  /** Right position for back to top */
   right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));
+  /** Bottom position for back to top */
   bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));
 }
 
 [part="trigger"] {
+  /** Box shadow for back to top button */
   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)));
 
+  /** Font size for back to top button */
   --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
+  /** Border radius for back to top button */
   --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius,  var(--pf-global--BorderRadius--lg, 30em));
+  /** Top padding for back to top button */
   --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
+  /** Right padding for back to top button */
   --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** Bottom padding for back to top button */
   --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
+  /** Left padding for back to top button */
   --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
 }
 
@@ -20,12 +29,15 @@ a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /** Primary color for back to top button */
   color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));
+  /** Primary background color for back to top button */
   background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));
   text-decoration: none;
   font-size: var(--pf-c-button--FontSize);
   padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
   border-radius: var(--pf-c-button--BorderRadius);
+  /** End icon margin left for back to top button */
   gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
 }
 

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

@@ -4,23 +4,7 @@ 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=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]
+ * @alias Back to Top
  */
 export declare class PfBackToTop extends LitElement {
     #private;

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

@@ -8,7 +8,82 @@ 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\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`;
+const styles = css `:host {
+  display: inline-block;
+  position: absolute;
+  /** Right position for back to top */
+  right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));
+  /** Bottom position for back to top */
+  bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));
+}
+
+[part="trigger"] {
+  /** Box shadow for back to top button */
+  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)));
+
+  /** Font size for back to top button */
+  --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
+  /** Border radius for back to top button */
+  --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius,  var(--pf-global--BorderRadius--lg, 30em));
+  /** Top padding for back to top button */
+  --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
+  /** Right padding for back to top button */
+  --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
+  /** Bottom padding for back to top button */
+  --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
+  /** Left padding for back to top button */
+  --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
+}
+
+a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /** Primary color for back to top button */
+  color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));
+  /** Primary background color for back to top button */
+  background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));
+  text-decoration: none;
+  font-size: var(--pf-c-button--FontSize);
+  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
+  border-radius: var(--pf-c-button--BorderRadius);
+  /** End icon margin left for back to top button */
+  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;
+}
+
+pf-icon {
+  /* override icon size as default sm variant is incorrect */
+  --pf-icon--size: var(--pf-c-button--FontSize);
+  vertical-align: -0.125rem;
+}
+
+span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
+}
+
+@media (min-width: 768px) {
+  :host {
+    --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem));
+  }
+}
+`;
 let PfBackToTop = class PfBackToTop extends LitElement {
     constructor() {
         super(...arguments);
@@ -64,8 +139,14 @@ let PfBackToTop = class PfBackToTop extends LitElement {
         }
         if (this.href) {
             return html `
-        <a href="${this.href}" ?hidden="${!__classPrivateFieldGet(this, _PfBackToTop_visible, "f")}" part="trigger" aria-label="${ifDefined(__classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_ariaLabel_get))}">
+        <!-- The \`<a>\` or \`<pf-button>\` element -->
+        <a href="${this.href}"
+           ?hidden="${!__classPrivateFieldGet(this, _PfBackToTop_visible, "f")}"
+           part="trigger"
+           aria-label="${ifDefined(__classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_ariaLabel_get))}">
+          <!-- Contains the prefix icon to display before the link or button. -->
           <slot name="icon"></slot>
+          <!-- Text to display inside the link or button. -->
           <slot @slotchange="${__classPrivateFieldGet(this, _PfBackToTop_instances, "m", _PfBackToTop_onSlotchange)}"></slot>
           <pf-icon icon="angle-up" set="fas"></pf-icon>
         </a>
@@ -73,6 +154,7 @@ let PfBackToTop = class PfBackToTop extends LitElement {
         }
         else {
             return html `
+        <!-- The \`<a>\` or \`<pf-button>\` element -->
         <pf-button
             icon="${ifDefined(this.icon)}"
             icon-set="${ifDefined(this.iconSet)}"
@@ -81,8 +163,10 @@ let PfBackToTop = class PfBackToTop extends LitElement {
             part="trigger"
             label="${ifDefined(__classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_ariaLabel_get))}"
           >
+          <!-- Contains the prefix icon to display before the link or button. -->
           <slot name="icon" slot="icon"></slot>
           <span>
+            <!-- Text to display inside the link or button. -->
             <slot></slot>
             <pf-icon icon="angle-up" set="fas"></pf-icon>
           </span>
@@ -150,7 +234,7 @@ _PfBackToTop_addScrollListener = function _PfBackToTop_addScrollListener() {
     __classPrivateFieldGet(this, _PfBackToTop_toggleVisibility, "f").call(this);
 };
 PfBackToTop.styles = [styles];
-PfBackToTop.version = "4.1.0";
+PfBackToTop.version = "4.3.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, 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 (isServer) {\n      return;\n    } else 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":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAA4C,MAAM,KAAK,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAEpE,OAAO,6CAA6C,CAAC;AACrD,OAAO,yCAAyC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU1C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;;QASL,iEAAiE;QACQ,kBAAa,GAAG,KAAK,CAAC;QAK/F,0GAA0G;QAChD,mBAAc,GAAG,GAAG,CAAC;QAQ/E,iCAAa,KAAK,EAAC;QAEnB,+BAAW,KAAK,EAAC;QAEjB,6CAAkC;QAElC,sCAAkB,KAAK,EAAC;QAExB,8BAAU,IAAI,MAAM,CAAC,IAAI,CAAC,EAAC;QAwH3B,wCAAoB,GAAG,EAAE;YACvB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,uBAAA,IAAI,wBAAY,IAAI,MAAA,CAAC;gBACrB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YACD,MAAM,kBAAkB,GAAG,uBAAA,IAAI,4BAAS,CAAC;YACzC,IAAI,uBAAA,IAAI,kCAAe,EAAE,CAAC;gBACxB,MAAM,QAAQ,GACV,CAAC,uBAAA,IAAI,kCAAe,YAAY,MAAM,CAAC,CAAC,CAAC;oBACzC,uBAAA,IAAI,kCAAe,CAAC,OAAO;oBAC7B,CAAC,CAAC,uBAAA,IAAI,kCAAe,CAAC,SAAS,CAAC;gBAClC,uBAAA,IAAI,wBAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAA,CAAC;gBACjD,IAAI,kBAAkB,KAAK,uBAAA,IAAI,4BAAS,EAAE,CAAC;oBACzC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;YACH,CAAC;QACH,CAAC,EAAC;;IArHO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uBAAA,IAAI,8DAAmB,MAAvB,IAAI,CAAqB,CAAC;IAC5B,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,uBAAA,IAAI,iEAAsB,MAA1B,IAAI,CAAwB,CAAC;IAC/B,CAAC;IAEQ,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,EAAE,CAAC;YACtC,uBAAA,IAAI,8DAAmB,MAAvB,IAAI,CAAqB,CAAC;QAC5B,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YACjC,uBAAA,IAAI,qCAAkB,MAAtB,IAAI,CAAoB,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,yBAAyB;QACzB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;YAC7C,IAAI,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC5B,uBAAA,IAAI,2BAAQ,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;QAC1D,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA;;mBAEE,IAAI,CAAC,IAAI;sBACN,CAAC,uBAAA,IAAI,4BAAS;;yBAEX,SAAS,CAAC,uBAAA,IAAI,0DAAW,CAAC;;;;+BAIpB,uBAAA,IAAI,yDAAc;;;OAG1C,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA;;;oBAGG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;wBAChB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;uBACxB,CAAC,uBAAA,IAAI,4BAAS;wBACb,uBAAA,IAAI,4BAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;;qBAE7B,SAAS,CAAC,uBAAA,IAAI,0DAAW,CAAC;;;;;;;;;;OAUxC,CAAC;QACJ,CAAC;IACH,CAAC;;;;;;;;;;IA9EC,IAAI,IAAI,GAAG,IAAI,CAAC;IAChB,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;SAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,YAAY,QAAQ,IAAI,IAAI,YAAY,UAAU,EAAE,CAAC;QACzF,OAAO,IAAI,CAAC;IACd,CAAC;SAAM,CAAC;QACN,OAAO,QAAQ,CAAC;IAClB,CAAC;AACH,CAAC;;IAGC,IAAI,uBAAA,IAAI,mCAAgB,EAAE,CAAC;QACzB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,OAAO,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;AACrC,CAAC;+DAiEa,KAAY;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,aAAgC,CAAC;IACpD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACnC,uBAAA,IAAI,+BAAmB,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,MAAA,CAAC;IACvD,IAAI,CAAC,aAAa,EAAE,CAAC;AACvB,CAAC;;IAGC,uBAAA,IAAI,kCAAe,EAAE,mBAAmB,CAAC,QAAQ,EAAE,uBAAA,IAAI,qCAAkB,CAAC,CAAC;AAC7E,CAAC;;IAGC,uBAAA,IAAI,iEAAsB,MAA1B,IAAI,CAAwB,CAAC;IAE7B,IAAI,IAAI,CAAC,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;QAC3C,uBAAA,IAAI,2BAAQ,CAAC,KAAK,CAAC,+CAA+C,CAAC,CAAC;QACpE,OAAO;IACT,CAAC;IAED,uBAAA,IAAI,0BAAc,CAAC,CAAC,IAAI,CAAC,kBAAkB,MAAA,CAAC;IAC5C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO;IACT,CAAC;SAAM,IAAI,uBAAA,IAAI,8BAAW,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACtD,MAAM,iBAAiB,GAAG,uBAAA,IAAI,yDAAU,EAAE,aAAa,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACnF,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,uBAAA,IAAI,2BAAQ,CAAC,KAAK,CAAC,wCAAwC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;YACtF,OAAO;QACT,CAAC;QACD,uBAAA,IAAI,8BAAkB,iBAAiB,MAAA,CAAC;IAC1C,CAAC;SAAM,CAAC;QACN,uBAAA,IAAI,8BAAkB,MAAM,MAAA,CAAC;IAC/B,CAAC;IAED,uBAAA,IAAI,kCAAe,CAAC,gBAAgB,CAAC,QAAQ,EAAE,uBAAA,IAAI,qCAAkB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1F,uBAAA,IAAI,qCAAkB,MAAtB,IAAI,CAAoB,CAAC;AAC3B,CAAC;AArJe,kBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGtB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAe;AAGN;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAAkB;AAGmB;IAAxE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAAuB;AAGhC;IAA9D,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;uDAA6B;AAGjC;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;mDAAsB;AAGnE;IAAX,QAAQ,EAAE;0CAAgB;AAGE;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAe;AAtBhC,WAAW;IADvB,aAAa,CAAC,gBAAgB,CAAC;GACnB,WAAW","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 * @alias Back to Top\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        <!-- The \\`<a>\\` or \\`<pf-button>\\` element -->\n        <a href=\"${this.href}\"\n           ?hidden=\"${!this.#visible}\"\n           part=\"trigger\"\n           aria-label=\"${ifDefined(this.#ariaLabel)}\">\n          <!-- Contains the prefix icon to display before the link or button. -->\n          <slot name=\"icon\"></slot>\n          <!-- Text to display inside the link or button. -->\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        <!-- The \\`<a>\\` or \\`<pf-button>\\` element -->\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          <!-- Contains the prefix icon to display before the link or button. -->\n          <slot name=\"icon\" slot=\"icon\"></slot>\n          <span>\n            <!-- Text to display inside the link or button. -->\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 (isServer) {\n      return;\n    } else 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.spec.js

@@ -131,8 +131,8 @@ describe('<pf-back-to-top>', function () {
         </div>
       `);
             element = container.querySelector('pf-back-to-top');
-            snapshot = await a11ySnapshot();
             await allUpdates(element);
+            snapshot = await a11ySnapshot({ selector: 'pf-back-to-top' });
         });
         it('should be hidden on init', function () {
             const { children } = snapshot;
@@ -142,12 +142,13 @@ describe('<pf-back-to-top>', function () {
             beforeEach(async function () {
                 const scrollableElement = document.querySelector('#top');
                 scrollableElement.scrollTo({ top: 401, behavior: 'instant' });
+                scrollableElement.dispatchEvent(new Event('scroll'));
                 await nextFrame();
                 await allUpdates(element);
                 snapshot = await a11ySnapshot();
             });
             it('should be visible', function () {
-                expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
+                expect(snapshot.children?.at(0)?.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
             });
         });
     });

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

@@ -1 +1 @@
-{"version":3,"file":"pf-back-to-top.spec.js","sourceRoot":"","sources":["pf-back-to-top.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { setViewport, sendKeys } from '@web/test-runner-commands';\n\nimport { allUpdates } from '@patternfly/pfe-tools/test/utils.js';\n\nimport { PfBackToTop } from '../pf-back-to-top.js';\nimport { type A11yTreeSnapshot, a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nconst takeProps = (props: string[]) => (obj: object) =>\n  Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)));\n\ndescribe('<pf-back-to-top>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-back-to-top')).to.be.an.instanceof(PfBackToTop);\n  });\n\n  describe('simply instantiating', function() {\n    let element: PfBackToTop;\n\n    beforeEach(async function() {\n      element = await createFixture<PfBackToTop>(html`<pf-back-to-top></pf-back-to-top>`);\n    });\n\n    it('should upgrade', function() {\n      const klass = customElements.get('pf-back-to-top');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfBackToTop);\n    });\n  });\n\n  describe('when rendered in a viewport with a height smaller then content length', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    beforeEach(async function() {\n      await setViewport({ width: 320, height: 640 });\n      window.scrollTo({ top: 0, behavior: 'instant' });\n      await nextFrame();\n      const container = await createFixture<PfBackToTop>(html`\n        <div id=\"top\">\n          <div style=\"height: 2000px;\"></div>\n          <pf-back-to-top href=\"#top\">Back to top</pf-back-to-top>\n        </div>\n      `);\n      element = container.querySelector('pf-back-to-top')!;\n      snapshot = await a11ySnapshot();\n\n      await allUpdates(element);\n    });\n\n    it('should be hidden on init', function() {\n      const { children } = snapshot;\n      expect(children).to.be.undefined;\n    });\n\n    it('should not be accessible', function() {\n      expect(snapshot.children).to.be.undefined;\n    });\n\n    describe('when scrolled 401px', function() {\n      beforeEach(async function() {\n        window.scrollTo({ top: 401, behavior: 'instant' });\n        await nextFrame();\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n\n      it('should be accessible', async function() {\n        await expect(element).to.be.accessible();\n      });\n\n      describe('pressing the tab key', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'Tab' });\n          await allUpdates(element);\n          await nextFrame();\n        });\n\n        it('should focus the component', function() {\n          expect(document.activeElement).to.equal(element);\n        });\n      });\n    });\n\n    describe('when the always visible property is true', function() {\n      beforeEach(async function() {\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        element.alwaysVisible = true;\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n\n      it('should be accessible', async function() {\n        await expect(element).to.be.accessible();\n      });\n\n      describe('pressing the tab key', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'Tab' });\n          await allUpdates(element);\n          await nextFrame();\n        });\n        it('should focus the component', function() {\n          expect(document.activeElement).to.equal(element);\n        });\n      });\n    });\n\n    describe('when the scroll distance is set to 1000', function() {\n      beforeEach(async function() {\n        element.scrollDistance = 1000;\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be hidden', function() {\n        const { children } = snapshot;\n        expect(children).to.be.undefined;\n      });\n\n      describe('when scrolled 1001px', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 1001, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should be visible', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n        });\n      });\n    });\n  });\n\n  describe('when rendered in an element with an overflowed height', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    beforeEach(async function() {\n      window.scrollTo({ top: 0, behavior: 'instant' });\n      await nextFrame();\n      const container = await createFixture<PfBackToTop>(html`\n        <div id=\"top\" style=\"height: 500px; overflow-y: scroll;\">\n          <div style=\"height: 2000px;\"></div>\n          <pf-back-to-top href=\"#top\" scrollable-selector=\"#top\">Back to top</pf-back-to-top>\n        </div>\n      `);\n      element = container.querySelector('pf-back-to-top')!;\n      snapshot = await a11ySnapshot();\n\n      await allUpdates(element);\n    });\n\n    it('should be hidden on init', function() {\n      const { children } = snapshot;\n      expect(children).to.be.undefined;\n    });\n\n    describe('when scrolled 401px', function() {\n      beforeEach(async function() {\n        const scrollableElement = document.querySelector('#top')!;\n        scrollableElement.scrollTo({ top: 401, behavior: 'instant' });\n        await nextFrame();\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n    });\n  });\n\n  describe('when no text is provided', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    describe('as a link', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top href=\"#top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Back to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n        });\n      });\n    });\n\n    describe('as a button', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Back to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Back to top' }]);\n        });\n      });\n    });\n  });\n\n  describe('when a label is provided', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    describe('as a link', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top href=\"#top\" label=\"Return to top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Return to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Return to top' }]);\n        });\n      });\n    });\n\n    describe('as a button', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top label=\"Return to top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Return to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Return to top' }]);\n        });\n      });\n    });\n  });\n});\n"]}
+{"version":3,"file":"pf-back-to-top.spec.js","sourceRoot":"","sources":["pf-back-to-top.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { setViewport, sendKeys } from '@web/test-runner-commands';\n\nimport { allUpdates } from '@patternfly/pfe-tools/test/utils.js';\n\nimport { PfBackToTop } from '../pf-back-to-top.js';\nimport { type A11yTreeSnapshot, a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\n\nconst takeProps = (props: string[]) => (obj: object) =>\n  Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)));\n\ndescribe('<pf-back-to-top>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-back-to-top')).to.be.an.instanceof(PfBackToTop);\n  });\n\n  describe('simply instantiating', function() {\n    let element: PfBackToTop;\n\n    beforeEach(async function() {\n      element = await createFixture<PfBackToTop>(html`<pf-back-to-top></pf-back-to-top>`);\n    });\n\n    it('should upgrade', function() {\n      const klass = customElements.get('pf-back-to-top');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfBackToTop);\n    });\n  });\n\n  describe('when rendered in a viewport with a height smaller then content length', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    beforeEach(async function() {\n      await setViewport({ width: 320, height: 640 });\n      window.scrollTo({ top: 0, behavior: 'instant' });\n      await nextFrame();\n      const container = await createFixture<PfBackToTop>(html`\n        <div id=\"top\">\n          <div style=\"height: 2000px;\"></div>\n          <pf-back-to-top href=\"#top\">Back to top</pf-back-to-top>\n        </div>\n      `);\n      element = container.querySelector('pf-back-to-top')!;\n      snapshot = await a11ySnapshot();\n\n      await allUpdates(element);\n    });\n\n    it('should be hidden on init', function() {\n      const { children } = snapshot;\n      expect(children).to.be.undefined;\n    });\n\n    it('should not be accessible', function() {\n      expect(snapshot.children).to.be.undefined;\n    });\n\n    describe('when scrolled 401px', function() {\n      beforeEach(async function() {\n        window.scrollTo({ top: 401, behavior: 'instant' });\n        await nextFrame();\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n\n      it('should be accessible', async function() {\n        await expect(element).to.be.accessible();\n      });\n\n      describe('pressing the tab key', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'Tab' });\n          await allUpdates(element);\n          await nextFrame();\n        });\n\n        it('should focus the component', function() {\n          expect(document.activeElement).to.equal(element);\n        });\n      });\n    });\n\n    describe('when the always visible property is true', function() {\n      beforeEach(async function() {\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        element.alwaysVisible = true;\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n\n      it('should be accessible', async function() {\n        await expect(element).to.be.accessible();\n      });\n\n      describe('pressing the tab key', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'Tab' });\n          await allUpdates(element);\n          await nextFrame();\n        });\n        it('should focus the component', function() {\n          expect(document.activeElement).to.equal(element);\n        });\n      });\n    });\n\n    describe('when the scroll distance is set to 1000', function() {\n      beforeEach(async function() {\n        element.scrollDistance = 1000;\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be hidden', function() {\n        const { children } = snapshot;\n        expect(children).to.be.undefined;\n      });\n\n      describe('when scrolled 1001px', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 1001, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should be visible', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n        });\n      });\n    });\n  });\n\n  describe('when rendered in an element with an overflowed height', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    beforeEach(async function() {\n      window.scrollTo({ top: 0, behavior: 'instant' });\n      await nextFrame();\n      const container = await createFixture<PfBackToTop>(html`\n        <div id=\"top\" style=\"height: 500px; overflow-y: scroll;\">\n          <div style=\"height: 2000px;\"></div>\n          <pf-back-to-top href=\"#top\" scrollable-selector=\"#top\">Back to top</pf-back-to-top>\n        </div>\n      `);\n      element = container.querySelector('pf-back-to-top')!;\n      await allUpdates(element);\n\n      snapshot = await a11ySnapshot({ selector: 'pf-back-to-top' });\n    });\n\n    it('should be hidden on init', function() {\n      const { children } = snapshot;\n      expect(children).to.be.undefined;\n    });\n\n    describe('when scrolled 401px', function() {\n      beforeEach(async function() {\n        const scrollableElement = document.querySelector('#top')!;\n        scrollableElement.scrollTo({ top: 401, behavior: 'instant' });\n        scrollableElement.dispatchEvent(new Event('scroll'));\n        await nextFrame();\n        await allUpdates(element);\n        snapshot = await a11ySnapshot();\n      });\n\n      it('should be visible', function() {\n        expect(snapshot.children?.at(0)?.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n      });\n    });\n  });\n\n  describe('when no text is provided', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    describe('as a link', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top href=\"#top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Back to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);\n        });\n      });\n    });\n\n    describe('as a button', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Back to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Back to top' }]);\n        });\n      });\n    });\n  });\n\n  describe('when a label is provided', function() {\n    let element: PfBackToTop;\n    let snapshot: A11yTreeSnapshot;\n\n    describe('as a link', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top href=\"#top\" label=\"Return to top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Return to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Return to top' }]);\n        });\n      });\n    });\n\n    describe('as a button', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 320, height: 640 });\n        window.scrollTo({ top: 0, behavior: 'instant' });\n        await nextFrame();\n        const container = await createFixture<PfBackToTop>(html`\n          <div id=\"top\">\n            <div style=\"height: 2000px;\"></div>\n            <pf-back-to-top label=\"Return to top\"></pf-back-to-top>\n          </div>\n        `);\n        element = container.querySelector('pf-back-to-top')!;\n        await allUpdates(element);\n      });\n\n      describe('when scrolled', function() {\n        beforeEach(async function() {\n          window.scrollTo({ top: 401, behavior: 'instant' });\n          await nextFrame();\n          await allUpdates(element);\n          snapshot = await a11ySnapshot();\n        });\n\n        it('should have a label of \"Return to top\"', function() {\n          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Return to top' }]);\n        });\n      });\n    });\n  });\n});\n"]}

package/pf-background-image/pf-background-image.css

@@ -1,6 +1,7 @@
 :host {
   display: flex;
 
+  /** Background image for the element */
   --_background-image: var(--pf-c-background-image--BackgroundImage);
 }
 
@@ -23,8 +24,10 @@
   width: 100%;
   height: 100%;
   content: "";
+  /** Background color for the background image */
   background-color: var(--pf-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));
   background-image: var(--_background-image);
+  /** SVG filter applied to the background image */
   filter: var(--pf-c-background-image--Filter, url("#image_overlay"));
   background-repeat:  no-repeat;
   background-size: cover;
@@ -43,24 +46,28 @@ slot[part="content"] {
 
 @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   #container::after {
+    /** Background image for 2x DPI screens */
     background-image: var(--pf-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));
   }
 }
 
 @media screen and (min-width: 576px) {
   #container::after {
+    /** Background image for small screens */
     background-image: var(--pf-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));
   }
 }
 
 @media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {
   #container::after {
+    /** Background image for small screens with 2x DPI */
     background-image: var(--pf-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));
   }
 }
 
 @media screen and (min-width: 992px) {
   #container::after {
+    /** Background image for large screens */
     background-image: var(--pf-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));
   }
 }

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

@@ -2,14 +2,7 @@ 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=#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
+ * @alias Background Image
  */
 export declare class PfBackgroundImage extends LitElement {
     #private;