@patternfly/elements 3.0.2 → 4.0.0

package/pf-badge/pf-badge.css

@@ -1,4 +1,8 @@
 :host {
+  position: relative;
+  white-space: nowrap;
+  text-align: center;
+  display: inline-block;
   border-radius: var(--pf-c-badge--BorderRadius,
     var(--pf-global--BorderRadius--lg, 180em));
   min-width: var(--pf-c-badge--MinWidth,

package/pf-badge/pf-badge.d.ts

@@ -1,36 +1,40 @@
-import { BaseBadge } from './BaseBadge.js';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * A **badge** is used to annotate other information like a label or an object name.
- *
- * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}
- *
- * @cssprop {<length>} --pf-c-badge--MinWidth                   {@default `2rem`}
- *
- * @cssprop {<length>} --pf-c-badge--PaddingLeft                {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-badge--PaddingRight               {@default `0.5rem`}
- *
- * @cssprop {<length>} --pf-c-badge--FontSize                   {@default `0.85em`}
- * @cssprop {<length>} --pf-c-badge--LineHeight                 {@default `1.5`}
- * @cssprop {<length>} --pf-c-badge--FontWeight                 {@default `700`}
- *
- * @cssprop {<color>} --pf-c-badge--Color                       {@default `#151515`}
- * @cssprop {<color>} --pf-c-badge--BackgroundColor             {@default `#f0f0f0`}
- *
- * @cssprop {<color>} --pf-c-badge--m-read--Color               {@default `#151515`}
- * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor     {@default `#f0f0f0`}
- *
- * @cssprop {<color>} --pf-c-badge--m-unread--Color             {@default `#fff`}
- * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}
+ * @cssprop {<length>} [--pf-c-badge--BorderRadius=180em]
+ * @cssprop {<length>} [--pf-c-badge--MinWidth=2rem]
+ * @cssprop {<length>} [--pf-c-badge--PaddingLeft=0.5rem]
+ * @cssprop {<length>} [--pf-c-badge--PaddingRight=0.5rem]
+ * @cssprop {<length>} [--pf-c-badge--FontSize=0.85em]
+ * @cssprop {<length>} [--pf-c-badge--LineHeight=1.5]
+ * @cssprop {<length>} [--pf-c-badge--FontWeight=700]
+ * @cssprop {<color>} [--pf-c-badge--Color=#151515]
+ * @cssprop {<color>} [--pf-c-badge--BackgroundColor=#f0f0f0]
+ * @cssprop {<color>} [--pf-c-badge--m-read--Color=#151515]
+ * @cssprop {<color>} [--pf-c-badge--m-read--BackgroundColor=#f0f0f0]
+ * @cssprop {<color>} [--pf-c-badge--m-unread--Color=#fff]
+ * @cssprop {<color>} [--pf-c-badge--m-unread--BackgroundColor=#06c]
  */
-export declare class PfBadge extends BaseBadge {
+export declare class PfBadge extends LitElement {
     static readonly styles: CSSStyleSheet[];
     /**
      * Denotes the state-of-affairs this badge represents
      * Options include read and unread
      */
     state?: 'unread' | 'read';
+    /**
+     * Sets a numeric value for a badge.
+     *
+     * You can pair it with `threshold` attribute to add a `+` sign
+     * if the number exceeds the threshold value.
+     */
     number?: number;
+    /**
+     * Sets a threshold for the numeric value and adds `+` sign if
+     * the numeric value exceeds the threshold value.
+     */
     threshold?: number;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-badge/pf-badge.js

@@ -1,35 +1,22 @@
 import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { BaseBadge } from './BaseBadge.js';
 import { css } from "lit";
-const styles = css `:host {\n  border-radius: var(--pf-c-badge--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 180em));\n  min-width: var(--pf-c-badge--MinWidth,\n    var(--pf-global--spacer--xl, 2rem));\n  padding-left: var(--pf-c-badge--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n  padding-right: var(--pf-c-badge--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-badge--FontSize,\n    var(--pf-theme--font-size, 0.75em));\n  font-weight: var(--pf-c-badge--FontWeight,\n    var(--pf-theme--font-weight--bold, 700));\n  line-height: var(--pf-c-badge--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));\n  color: var(--pf-c-badge--Color,\n    var(--pf-global--palette--black-900, #151515));\n  background-color: var(--pf-c-badge--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0));\n}\n\n:host([state="read"]) {\n  --pf-c-badge--Color: var(--pf-c-badge--m-read--Color,\n    var(--pf-global--palette--black-900, #151515));\n  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0));\n}\n\n:host([state="unread"]) {\n  --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color,\n    var(--pf-global--palette--white, #fff));\n  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor,\n    var(--pf-global--palette--blue-400, #06c));\n}\n`;
-/**
- * A **badge** is used to annotate other information like a label or an object name.
- *
- * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}
- *
- * @cssprop {<length>} --pf-c-badge--MinWidth                   {@default `2rem`}
- *
- * @cssprop {<length>} --pf-c-badge--PaddingLeft                {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-badge--PaddingRight               {@default `0.5rem`}
- *
- * @cssprop {<length>} --pf-c-badge--FontSize                   {@default `0.85em`}
- * @cssprop {<length>} --pf-c-badge--LineHeight                 {@default `1.5`}
- * @cssprop {<length>} --pf-c-badge--FontWeight                 {@default `700`}
- *
- * @cssprop {<color>} --pf-c-badge--Color                       {@default `#151515`}
- * @cssprop {<color>} --pf-c-badge--BackgroundColor             {@default `#f0f0f0`}
- *
- * @cssprop {<color>} --pf-c-badge--m-read--Color               {@default `#151515`}
- * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor     {@default `#f0f0f0`}
- *
- * @cssprop {<color>} --pf-c-badge--m-unread--Color             {@default `#fff`}
- * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}
- */
-let PfBadge = class PfBadge extends BaseBadge {
+const styles = css `:host {\n  position: relative;\n  white-space: nowrap;\n  text-align: center;\n  display: inline-block;\n  border-radius: var(--pf-c-badge--BorderRadius,\n    var(--pf-global--BorderRadius--lg, 180em));\n  min-width: var(--pf-c-badge--MinWidth,\n    var(--pf-global--spacer--xl, 2rem));\n  padding-left: var(--pf-c-badge--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n  padding-right: var(--pf-c-badge--PaddingRight,\n    var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-badge--FontSize,\n    var(--pf-theme--font-size, 0.75em));\n  font-weight: var(--pf-c-badge--FontWeight,\n    var(--pf-theme--font-weight--bold, 700));\n  line-height: var(--pf-c-badge--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));\n  color: var(--pf-c-badge--Color,\n    var(--pf-global--palette--black-900, #151515));\n  background-color: var(--pf-c-badge--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0));\n}\n\n:host([state="read"]) {\n  --pf-c-badge--Color: var(--pf-c-badge--m-read--Color,\n    var(--pf-global--palette--black-900, #151515));\n  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0));\n}\n\n:host([state="unread"]) {\n  --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color,\n    var(--pf-global--palette--white, #fff));\n  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor,\n    var(--pf-global--palette--blue-400, #06c));\n}\n`;
+let PfBadge = class PfBadge extends LitElement {
+    render() {
+        const { threshold, number, textContent } = this;
+        const displayText = (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
+            : (number != null) ? number.toString()
+                : textContent ?? '';
+        return html `
+      <span>${displayText}</span>
+    `;
+    }
 };
-PfBadge.styles = [...BaseBadge.styles, styles];
+PfBadge.styles = [styles];
+PfBadge.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfBadge.prototype, "state", void 0);

package/pf-badge/pf-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAII,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;;AACpB,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;AAM1B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA2B;AAEZ;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAEhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AAXnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAYnB","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseBadge } from './BaseBadge.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A **badge** is used to annotate other information like a label or an object name.\n *\n * @cssprop {<length>} --pf-c-badge--BorderRadius               {@default `180em`}\n *\n * @cssprop {<length>} --pf-c-badge--MinWidth                   {@default `2rem`}\n *\n * @cssprop {<length>} --pf-c-badge--PaddingLeft                {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-badge--PaddingRight               {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-badge--FontSize                   {@default `0.85em`}\n * @cssprop {<length>} --pf-c-badge--LineHeight                 {@default `1.5`}\n * @cssprop {<length>} --pf-c-badge--FontWeight                 {@default `700`}\n *\n * @cssprop {<color>} --pf-c-badge--Color                       {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--BackgroundColor             {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-read--Color               {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor     {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-unread--Color             {@default `#fff`}\n * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends BaseBadge {\n  static readonly styles = [...BaseBadge.styles, styles];\n\n  /**\n   * Denotes the state-of-affairs this badge represents\n   * Options include read and unread\n   */\n  @property({ reflect: true }) state?: 'unread' | 'read';\n\n  @property({ reflect: true, type: Number }) number?: number;\n\n  @property({ reflect: true, type: Number }) threshold?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-badge': PfBadge;\n  }\n}\n"]}
+{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAuB/C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAuB5B,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAChD,MAAM,WAAW,GACb,CAAC,SAAS,IAAI,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,EAAE,GAAG;YAC5E,CAAC,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACtC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC;QACtB,OAAO,IAAI,CAAA;cACD,WAAW;KACpB,CAAC;IACJ,CAAC;;AA/Be,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAMtB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA2B;AAQZ;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAMhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AArBnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A **badge** is used to annotate other information like a label or an object name.\n * @cssprop {<length>} [--pf-c-badge--BorderRadius=180em]\n * @cssprop {<length>} [--pf-c-badge--MinWidth=2rem]\n * @cssprop {<length>} [--pf-c-badge--PaddingLeft=0.5rem]\n * @cssprop {<length>} [--pf-c-badge--PaddingRight=0.5rem]\n * @cssprop {<length>} [--pf-c-badge--FontSize=0.85em]\n * @cssprop {<length>} [--pf-c-badge--LineHeight=1.5]\n * @cssprop {<length>} [--pf-c-badge--FontWeight=700]\n * @cssprop {<color>} [--pf-c-badge--Color=#151515]\n * @cssprop {<color>} [--pf-c-badge--BackgroundColor=#f0f0f0]\n * @cssprop {<color>} [--pf-c-badge--m-read--Color=#151515]\n * @cssprop {<color>} [--pf-c-badge--m-read--BackgroundColor=#f0f0f0]\n * @cssprop {<color>} [--pf-c-badge--m-unread--Color=#fff]\n * @cssprop {<color>} [--pf-c-badge--m-unread--BackgroundColor=#06c]\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /**\n   * Denotes the state-of-affairs this badge represents\n   * Options include read and unread\n   */\n  @property({ reflect: true }) state?: 'unread' | 'read';\n\n  /**\n   * Sets a numeric value for a badge.\n   *\n   * You can pair it with `threshold` attribute to add a `+` sign\n   * if the number exceeds the threshold value.\n   */\n  @property({ reflect: true, type: Number }) number?: number;\n\n  /**\n   * Sets a threshold for the numeric value and adds `+` sign if\n   * the numeric value exceeds the threshold value.\n   */\n  @property({ reflect: true, type: Number }) threshold?: number;\n\n  override render(): TemplateResult<1> {\n    const { threshold, number, textContent } = this;\n    const displayText =\n        (threshold && number && (threshold < number)) ? `${threshold.toString()}+`\n      : (number != null) ? number.toString()\n      : textContent ?? '';\n    return html`\n      <span>${displayText}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-badge': PfBadge;\n  }\n}\n"]}

package/pf-badge/test/pf-badge.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-badge';
 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-badge.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-badge.e2e.js","sourceRoot":"","sources":["pf-badge.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,UAAU,CAAC;AAE3B,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-badge';\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-badge.e2e.js","sourceRoot":"","sources":["pf-badge.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,UAAU,CAAC;AAE3B,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-badge';\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-banner/pf-banner.d.ts

@@ -1,23 +1,23 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 export type BannerVariant = ('default' | 'info' | 'warning' | 'danger' | 'success');
 /**
  * A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users.
  * Banners are un-intrusive and non-dismissible.
  * @summary Allows users to display a stylized banner.
- * @cssprop {<length>} --pf-c-banner--PaddingTop  {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-banner--PaddingRight  {@default `1rem`}
- * @cssprop {<length>} --pf-c-banner--PaddingBottom  {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-banner--PaddingLeft  {@default `1rem`}
- * @cssprop {<length>} --pf-c-banner--md--PaddingRight  {@default `1.5rem`}
- * @cssprop {<length>} --pf-c-banner--md--PaddingLeft  {@default `1.5rem`}
- * @cssprop {<length>} --pf-c-banner--FontSize {@default `0.875rem`}
- * @cssprop {<color>} --pf-c-banner--BackgroundColor  {@default `#4f5255`}
- * @cssprop {<color>} --pf-c-banner--m-info--BackgroundColor  {@default `#73bcf7`}
- * @cssprop {<color>} --pf-c-banner--m-danger--BackgroundColor  {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-banner--m-success--BackgroundColor  {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-banner--m-warning--BackgroundColor  {@default `#f0ab00`}
- * @cssprop --pf-c-banner--m-sticky--ZIndex  {@default `300`}
- * @cssprop --pf-c-banner--m-sticky--BoxShadow {@default `0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)`}
+ * @cssprop {<length>} [--pf-c-banner--PaddingTop=0.25rem]
+ * @cssprop {<length>} [--pf-c-banner--PaddingRight=1rem]
+ * @cssprop {<length>} [--pf-c-banner--PaddingBottom=0.25rem]
+ * @cssprop {<length>} [--pf-c-banner--PaddingLeft=1rem]
+ * @cssprop {<length>} [--pf-c-banner--md--PaddingRight=1.5rem]
+ * @cssprop {<length>} [--pf-c-banner--md--PaddingLeft=1.5rem]
+ * @cssprop {<length>} [--pf-c-banner--FontSize=0.875rem]
+ * @cssprop {<color>} [--pf-c-banner--BackgroundColor=#4f5255]
+ * @cssprop {<color>} [--pf-c-banner--m-info--BackgroundColor=#73bcf7]
+ * @cssprop {<color>} [--pf-c-banner--m-danger--BackgroundColor=#c9190b]
+ * @cssprop {<color>} [--pf-c-banner--m-success--BackgroundColor=#3e8635]
+ * @cssprop {<color>} [--pf-c-banner--m-warning--BackgroundColor=#f0ab00]
+ * @cssprop [--pf-c-banner--m-sticky--ZIndex=300]
+ * @cssprop [--pf-c-banner--m-sticky--BoxShadow=0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)]
  * @csspart container - The container of the banner
  * @slot icon
  *       Contains the labels's icon, e.g. web-icon-alert-success.
@@ -34,7 +34,7 @@ export declare class PfBanner extends LitElement {
     /** Shorthand for the `icon` slot, the value is icon name */
     sticky: boolean;
     willUpdate(changed: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-banner/pf-banner.js

@@ -7,30 +7,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { css } from "lit";
 const styles = css `:host {\n  display: block;\n  --pf-c-banner--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-banner--PaddingRight: var(--pf-global--spacer--md, 1rem);\n  --pf-c-banner--md--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);\n  --pf-c-banner--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);\n  --pf-c-banner--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n  --pf-c-banner--md--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);\n  --pf-c-banner--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-banner--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400, #4f5255);\n  --pf-c-banner--link--Color: var(--pf-c-banner--Color);\n  --pf-c-banner--link--TextDecoration: underline;\n  --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);\n  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);\n  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);\n  --pf-c-banner--link--disabled--TextDecoration: none;\n  --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200, #73bcf7);\n  --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100, #3e8635);\n  --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);\n  --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md, 300);\n  --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);\n}\n\n#container,\n#container.default {\n  color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding:\n    var(--pf-c-banner--PaddingTop, var(--pf-global--spacer--xs, 0.25rem))\n    var(--pf-c-banner--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-banner--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem))\n    var(--pf-c-banner--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  font-size: var(--pf-c-banner--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff));\n  white-space: nowrap;\n  background-color: var(--pf-c-banner--BackgroundColor, var(--pf-global--BackgroundColor--dark-400, #4f5255));\n\n  --pf-icon--size: 1em;\n}\n\n#container.info {\n  color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515));\n  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor, var(--pf-global--palette--blue-200, #73bcf7));\n}\n\n#container.danger {\n  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor, var(--pf-global--danger-color--100, #c9190b));\n}\n\n#container.success {\n  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor, var(--pf-global--success-color--100, #3e8635));\n}\n\n#container.warning {\n  color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515));\n  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor, var(--pf-global--warning-color--100, #f0ab00));\n}\n\n#container.hasIcon {\n  display: var(--pf-l-flex--Display, flex);\n  flex-wrap: var(--pf-l-flex--FlexWrap, wrap);\n  align-items: var(--pf-l-flex--AlignItems, baseline);\n  gap: var(--pf-l-flex--spacer, var(--pf-l-flex--spacer--sm, var(--pf-global--spacer--sm, 0.5rem)));\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n  z-index: var(--pf-c-banner--m-sticky--ZIndex, var(--pf-global--ZIndex--md, 300));\n  box-shadow:\n    var(--pf-c-banner--m-sticky--BoxShadow,\n    var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)));\n}\n\npf-icon,\n::slotted(pf-icon),\n::slotted(svg) {\n  position: relative;\n  inset-block-start: 0.125em;\n}\n\n::slotted(svg) {\n  height: 1em;\n  width: 1em;\n  fill: currentcolor;\n}\n\n@media (min-width: 768px) {\n  #container {\n    --pf-c-banner--PaddingRight: var(--pf-c-banner--md--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));\n    --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  }\n}\n`;
-/**
- * A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users.
- * Banners are un-intrusive and non-dismissible.
- * @summary Allows users to display a stylized banner.
- * @cssprop {<length>} --pf-c-banner--PaddingTop  {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-banner--PaddingRight  {@default `1rem`}
- * @cssprop {<length>} --pf-c-banner--PaddingBottom  {@default `0.25rem`}
- * @cssprop {<length>} --pf-c-banner--PaddingLeft  {@default `1rem`}
- * @cssprop {<length>} --pf-c-banner--md--PaddingRight  {@default `1.5rem`}
- * @cssprop {<length>} --pf-c-banner--md--PaddingLeft  {@default `1.5rem`}
- * @cssprop {<length>} --pf-c-banner--FontSize {@default `0.875rem`}
- * @cssprop {<color>} --pf-c-banner--BackgroundColor  {@default `#4f5255`}
- * @cssprop {<color>} --pf-c-banner--m-info--BackgroundColor  {@default `#73bcf7`}
- * @cssprop {<color>} --pf-c-banner--m-danger--BackgroundColor  {@default `#c9190b`}
- * @cssprop {<color>} --pf-c-banner--m-success--BackgroundColor  {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-banner--m-warning--BackgroundColor  {@default `#f0ab00`}
- * @cssprop --pf-c-banner--m-sticky--ZIndex  {@default `300`}
- * @cssprop --pf-c-banner--m-sticky--BoxShadow {@default `0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)`}
- * @csspart container - The container of the banner
- * @slot icon
- *       Contains the labels's icon, e.g. web-icon-alert-success.
- * @slot
- *       Contains the text for the banner
- */
 let PfBanner = class PfBanner extends LitElement {
     constructor() {
         super(...arguments);
@@ -60,6 +36,7 @@ let PfBanner = class PfBanner extends LitElement {
 };
 _PfBanner_slots = new WeakMap();
 PfBanner.styles = [styles];
+PfBanner.version = "4.0.0";
 __decorate([
     property({ reflect: true })
 ], PfBanner.prototype, "variant", void 0);

package/pf-banner/pf-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-banner.js","sourceRoot":"","sources":["pf-banner.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAYrF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QASL,4DAA4D;QAC/B,WAAM,GAAG,KAAK,CAAC;QAE5C,2DAA2D;QAC3D,0BAAS,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAC;IAqBlD,CAAC;IAnBU,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrC,MAAM,CAAC,yCAAyC,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC/B,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,IAAI,uBAAA,IAAI,uBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACzD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;wCAC7B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;2BACnC,IAAI,CAAC,IAAI,cAAc;;;;KAI7C,CAAC;IACJ,CAAC;;;AAhCe,eAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAyB;AAGzC;IAAX,QAAQ,EAAE;sCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAgB;AAVjC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAkCpB","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\n\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-banner.css';\n\nexport type BannerVariant = (\n  | 'default'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n);\n\n/**\n * A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users.\n * Banners are un-intrusive and non-dismissible.\n * @summary Allows users to display a stylized banner.\n * @cssprop {<length>} --pf-c-banner--PaddingTop  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-banner--PaddingRight  {@default `1rem`}\n * @cssprop {<length>} --pf-c-banner--PaddingBottom  {@default `0.25rem`}\n * @cssprop {<length>} --pf-c-banner--PaddingLeft  {@default `1rem`}\n * @cssprop {<length>} --pf-c-banner--md--PaddingRight  {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-banner--md--PaddingLeft  {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-banner--FontSize {@default `0.875rem`}\n * @cssprop {<color>} --pf-c-banner--BackgroundColor  {@default `#4f5255`}\n * @cssprop {<color>} --pf-c-banner--m-info--BackgroundColor  {@default `#73bcf7`}\n * @cssprop {<color>} --pf-c-banner--m-danger--BackgroundColor  {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-banner--m-success--BackgroundColor  {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-banner--m-warning--BackgroundColor  {@default `#f0ab00`}\n * @cssprop --pf-c-banner--m-sticky--ZIndex  {@default `300`}\n * @cssprop --pf-c-banner--m-sticky--BoxShadow {@default `0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)`}\n * @csspart container - The container of the banner\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n * @slot\n *       Contains the text for the banner\n */\n@customElement('pf-banner')\nexport class PfBanner extends LitElement {\n  static readonly styles = [styles];\n\n  /** Changes the visual appearance of the banner. */\n  @property({ reflect: true }) variant?: BannerVariant;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property({ type: Boolean }) sticky = false;\n\n  /** Represents the state of the anonymous and icon slots */\n  #slots = new SlotController(this, null, 'icon');\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('icon') && this.icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n  }\n\n  override render() {\n    const { variant, icon } = this;\n    const hasIcon = !!icon || this.#slots.hasSlotted('icon');\n    return html`\n      <div id=\"container\" part=\"container\"\n            class=${classMap({ hasIcon, [variant ?? '']: !!variant })}>\n        <slot name=\"icon\" part=\"icon\">${!this.icon ? '' : html`\n          <pf-icon icon=\"${this.icon}\"></pf-icon>`}\n        </slot>\n        <slot id=\"text\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-banner': PfBanner;\n  }\n}\n"]}
+{"version":3,"file":"pf-banner.js","sourceRoot":"","sources":["pf-banner.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AAEjF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAqC9E,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QASL,4DAA4D;QAC/B,WAAM,GAAG,KAAK,CAAC;QAE5C,2DAA2D;QAC3D,0BAAS,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAC;;IAEvC,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrC,MAAM,CAAC,yCAAyC,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC/B,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,IAAI,uBAAA,IAAI,uBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACzD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;wCAC7B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;2BACnC,IAAI,CAAC,IAAI,cAAc;;;;KAI7C,CAAC;IACJ,CAAC;;;AAhCe,eAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGtB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAyB;AAGzC;IAAX,QAAQ,EAAE;sCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAgB;AAVjC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\n\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-banner.css';\n\nexport type BannerVariant = (\n  | 'default'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'success'\n);\n\n/**\n * A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users.\n * Banners are un-intrusive and non-dismissible.\n * @summary Allows users to display a stylized banner.\n * @cssprop {<length>} [--pf-c-banner--PaddingTop=0.25rem]\n * @cssprop {<length>} [--pf-c-banner--PaddingRight=1rem]\n * @cssprop {<length>} [--pf-c-banner--PaddingBottom=0.25rem]\n * @cssprop {<length>} [--pf-c-banner--PaddingLeft=1rem]\n * @cssprop {<length>} [--pf-c-banner--md--PaddingRight=1.5rem]\n * @cssprop {<length>} [--pf-c-banner--md--PaddingLeft=1.5rem]\n * @cssprop {<length>} [--pf-c-banner--FontSize=0.875rem]\n * @cssprop {<color>} [--pf-c-banner--BackgroundColor=#4f5255]\n * @cssprop {<color>} [--pf-c-banner--m-info--BackgroundColor=#73bcf7]\n * @cssprop {<color>} [--pf-c-banner--m-danger--BackgroundColor=#c9190b]\n * @cssprop {<color>} [--pf-c-banner--m-success--BackgroundColor=#3e8635]\n * @cssprop {<color>} [--pf-c-banner--m-warning--BackgroundColor=#f0ab00]\n * @cssprop [--pf-c-banner--m-sticky--ZIndex=300]\n * @cssprop [--pf-c-banner--m-sticky--BoxShadow=0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)]\n * @csspart container - The container of the banner\n * @slot icon\n *       Contains the labels's icon, e.g. web-icon-alert-success.\n * @slot\n *       Contains the text for the banner\n */\n@customElement('pf-banner')\nexport class PfBanner extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /** Changes the visual appearance of the banner. */\n  @property({ reflect: true }) variant?: BannerVariant;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property({ type: Boolean }) sticky = false;\n\n  /** Represents the state of the anonymous and icon slots */\n  #slots = new SlotController(this, null, 'icon');\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('icon') && this.icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n  }\n\n  override render(): TemplateResult<1> {\n    const { variant, icon } = this;\n    const hasIcon = !!icon || this.#slots.hasSlotted('icon');\n    return html`\n      <div id=\"container\" part=\"container\"\n            class=${classMap({ hasIcon, [variant ?? '']: !!variant })}>\n        <slot name=\"icon\" part=\"icon\">${!this.icon ? '' : html`\n          <pf-icon icon=\"${this.icon}\"></pf-icon>`}\n        </slot>\n        <slot id=\"text\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-banner': PfBanner;\n  }\n}\n"]}

package/pf-banner/test/pf-banner.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-banner';
 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-banner.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-banner.e2e.js","sourceRoot":"","sources":["pf-banner.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-banner';\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-banner.e2e.js","sourceRoot":"","sources":["pf-banner.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-banner';\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-button/pf-button.css

@@ -1,5 +1,4 @@
 :host {
-  position: relative;
 	font-size: var(--pf-c-button--FontSize);
 	font-weight: var(--pf-c-button--FontWeight);
 	line-height: var(--pf-c-button--LineHeight);
@@ -11,15 +10,6 @@
     var(--pf-global--FontWeight--normal, 400));
   line-height: var(--pf-c-button--LineHeight,
     var(--pf-global--LineHeight--md, 1.5));
-  padding:
-    var(--pf-c-button--PaddingTop,
-      var(--pf-global--spacer--form-element, 0.375rem))
-    var(--pf-c-button--PaddingRight,
-      var(--pf-global--spacer--md, 1rem))
-    var(--pf-c-button--PaddingBottom,
-      var(--pf-global--spacer--form-element, 0.375rem))
-    var(--pf-c-button--PaddingLeft,
-      var(--pf-global--spacer--md, 1rem));
   display: inline-block;
   height: max-content;
   cursor: pointer;
@@ -52,9 +42,23 @@ pf-icon,
   vertical-align: var(--_button-icon-vertical-align);
 }
 
+#icon {
+  margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,
+      var(--pf-global--spacer--xs, 0.25rem));
+}
+
 #button {
-  display: contents;
+  display: inline-block;
   color: var(--_button-color);
+  padding:
+    var(--pf-c-button--PaddingTop,
+      var(--pf-global--spacer--form-element, 0.375rem))
+    var(--pf-c-button--PaddingRight,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-button--PaddingBottom,
+      var(--pf-global--spacer--form-element, 0.375rem))
+    var(--pf-c-button--PaddingLeft,
+      var(--pf-global--spacer--md, 1rem));
   &::before,
   &::after {
     position: absolute;
@@ -73,6 +77,12 @@ pf-icon,
     border-color: var(--pf-c-button--after--BorderColor);
     border-radius: var(--pf-c-button--after--BorderRadius);
   }
+  &.anchor {
+    text-decoration: none;
+    &::after {
+      pointer-events: all;
+    }
+  }
 }
 
 #text {
@@ -274,7 +284,7 @@ pf-icon,
  *                            *
  ******************************/
 
-:host([loading]) {
+:host([loading]) #button {
   position: relative;
   display: flex;
   align-items: center;