@patternfly/elements 4.0.2 → 4.2.0

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;

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

@@ -6,7 +6,80 @@ import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js
 import { property } from 'lit/decorators/property.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { css } from "lit";
-const styles = css `:host {\n  display: flex;\n\n  --_background-image: var(--pf-c-background-image--BackgroundImage);\n}\n\n#outer-container {\n  display: contents;\n}\n\n#container {\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\n#container::after {\n  display: block;\n  position: fixed;\n  top:  0;\n  left: 0;\n  z-index: -1;\n  width: 100%;\n  height: 100%;\n  content: "";\n  background-color: var(--pf-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));\n  background-image: var(--_background-image);\n  filter: var(--pf-c-background-image--Filter, url("#image_overlay"));\n  background-repeat:  no-repeat;\n  background-size: cover;\n}\n\nslot[name="filter"] {\n  display: none;\n}\n\nslot[part="content"] {\n  display: block;\n  position: relative;\n  z-index: 1;\n  color: white;\n}\n\n@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 576px) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));\n  }\n}\n\n@media screen and (min-width: 992px) {\n  #container::after {\n    background-image: var(--pf-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));\n  }\n}\n`;
+const styles = css `:host {
+  display: flex;
+
+  /** Background image for the element */
+  --_background-image: var(--pf-c-background-image--BackgroundImage);
+}
+
+#outer-container {
+  display: contents;
+}
+
+#container {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+#container::after {
+  display: block;
+  position: fixed;
+  top:  0;
+  left: 0;
+  z-index: -1;
+  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;
+}
+
+slot[name="filter"] {
+  display: none;
+}
+
+slot[part="content"] {
+  display: block;
+  position: relative;
+  z-index: 1;
+  color: white;
+}
+
+@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)));
+  }
+}
+`;
 let PfBackgroundImage = class PfBackgroundImage extends LitElement {
     constructor() {
         super(...arguments);
@@ -39,6 +112,7 @@ let PfBackgroundImage = class PfBackgroundImage extends LitElement {
         return html `
       <div id="container" part="container" style="${styleMap(cssProps)}">
         ${!this.filter ? html `` : html `
+          <!-- Overrides the default svg filter for the background image. -->
           <slot name="filter" @slotchange=${__classPrivateFieldGet(this, _PfBackgroundImage_instances, "m", _PfBackgroundImage_onSlotChange)}>
             ${(__classPrivateFieldGet(this, _PfBackgroundImage_svg, "f") && __classPrivateFieldGet(this, _PfBackgroundImage_updated, "f")) ? __classPrivateFieldGet(this, _PfBackgroundImage_svg, "f") : html `
               <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
@@ -74,7 +148,7 @@ _PfBackgroundImage_onSlotChange = function _PfBackgroundImage_onSlotChange() {
     }
 };
 PfBackgroundImage.styles = [styles];
-PfBackgroundImage.version = "4.0.2";
+PfBackgroundImage.version = "4.2.0";
 __decorate([
     property({ reflect: true })
 ], PfBackgroundImage.prototype, "src", void 0);

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

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

package/pf-badge/pf-badge.css

@@ -3,36 +3,49 @@
   white-space: nowrap;
   text-align: center;
   display: inline-block;
+  /** Border radius for badge */
   border-radius: var(--pf-c-badge--BorderRadius,
     var(--pf-global--BorderRadius--lg, 180em));
+  /** Minimum width for badge */
   min-width: var(--pf-c-badge--MinWidth,
     var(--pf-global--spacer--xl, 2rem));
+  /** Left padding for badge */
   padding-left: var(--pf-c-badge--PaddingLeft,
     var(--pf-global--spacer--sm, 0.5rem));
+  /** Right padding for badge */
   padding-right: var(--pf-c-badge--PaddingRight,
     var(--pf-global--spacer--sm, 0.5rem));
+  /** Font size for badge */
   font-size: var(--pf-c-badge--FontSize,
     var(--pf-theme--font-size, 0.75em));
+  /** Font weight for badge */
   font-weight: var(--pf-c-badge--FontWeight,
     var(--pf-theme--font-weight--bold, 700));
+  /** Line height for badge */
   line-height: var(--pf-c-badge--LineHeight,
     var(--pf-global--LineHeight--md, 1.5));
+  /** Color for badge */
   color: var(--pf-c-badge--Color,
     var(--pf-global--palette--black-900, #151515));
+  /** Background color for badge */
   background-color: var(--pf-c-badge--BackgroundColor,
     var(--pf-global--palette--black-200, #f0f0f0));
 }
 
 :host([state="read"]) {
+  /** Color for read badge */
   --pf-c-badge--Color: var(--pf-c-badge--m-read--Color,
     var(--pf-global--palette--black-900, #151515));
+  /** Background color for read badge */
   --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor,
     var(--pf-global--palette--black-200, #f0f0f0));
 }
 
 :host([state="unread"]) {
+  /** Color for unread badge */
   --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color,
     var(--pf-global--palette--white, #fff));
+  /** Background color for unread badge */
   --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor,
     var(--pf-global--palette--blue-400, #06c));
 }

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

@@ -1,19 +1,7 @@
 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=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]
+ * @alias Badge
  */
 export declare class PfBadge extends LitElement {
     static readonly styles: CSSStyleSheet[];

package/pf-badge/pf-badge.js

@@ -3,7 +3,58 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { css } from "lit";
-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`;
+const styles = css `:host {
+  position: relative;
+  white-space: nowrap;
+  text-align: center;
+  display: inline-block;
+  /** Border radius for badge */
+  border-radius: var(--pf-c-badge--BorderRadius,
+    var(--pf-global--BorderRadius--lg, 180em));
+  /** Minimum width for badge */
+  min-width: var(--pf-c-badge--MinWidth,
+    var(--pf-global--spacer--xl, 2rem));
+  /** Left padding for badge */
+  padding-left: var(--pf-c-badge--PaddingLeft,
+    var(--pf-global--spacer--sm, 0.5rem));
+  /** Right padding for badge */
+  padding-right: var(--pf-c-badge--PaddingRight,
+    var(--pf-global--spacer--sm, 0.5rem));
+  /** Font size for badge */
+  font-size: var(--pf-c-badge--FontSize,
+    var(--pf-theme--font-size, 0.75em));
+  /** Font weight for badge */
+  font-weight: var(--pf-c-badge--FontWeight,
+    var(--pf-theme--font-weight--bold, 700));
+  /** Line height for badge */
+  line-height: var(--pf-c-badge--LineHeight,
+    var(--pf-global--LineHeight--md, 1.5));
+  /** Color for badge */
+  color: var(--pf-c-badge--Color,
+    var(--pf-global--palette--black-900, #151515));
+  /** Background color for badge */
+  background-color: var(--pf-c-badge--BackgroundColor,
+    var(--pf-global--palette--black-200, #f0f0f0));
+}
+
+:host([state="read"]) {
+  /** Color for read badge */
+  --pf-c-badge--Color: var(--pf-c-badge--m-read--Color,
+    var(--pf-global--palette--black-900, #151515));
+  /** Background color for read badge */
+  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor,
+    var(--pf-global--palette--black-200, #f0f0f0));
+}
+
+:host([state="unread"]) {
+  /** Color for unread badge */
+  --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color,
+    var(--pf-global--palette--white, #fff));
+  /** Background color for unread badge */
+  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor,
+    var(--pf-global--palette--blue-400, #06c));
+}
+`;
 let PfBadge = class PfBadge extends LitElement {
     render() {
         const { threshold, number, textContent } = this;
@@ -16,7 +67,7 @@ let PfBadge = class PfBadge extends LitElement {
     }
 };
 PfBadge.styles = [styles];
-PfBadge.version = "4.0.2";
+PfBadge.version = "4.2.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,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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAW/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 * @alias Badge\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-banner/pf-banner.css

@@ -1,25 +1,46 @@
 :host {
   display: block;
+  /** Top padding for banner */
   --pf-c-banner--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right padding for banner */
   --pf-c-banner--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Right padding for banner on medium screens */
   --pf-c-banner--md--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+  /** Bottom padding for banner */
   --pf-c-banner--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Left padding for banner */
   --pf-c-banner--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Left padding for banner on medium screens */
   --pf-c-banner--md--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  /** Font size for banner */
   --pf-c-banner--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Text color for banner */
   --pf-c-banner--Color: var(--pf-global--Color--100, #151515);
+  /** Background color for banner */
   --pf-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400, #4f5255);
+  /** Link color for banner (references banner color) */
   --pf-c-banner--link--Color: var(--pf-c-banner--Color);
+  /** Link text decoration for banner */
   --pf-c-banner--link--TextDecoration: underline;
+  /** Link hover color for banner (references banner color) */
   --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
+  /** Link hover font weight for banner */
   --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+  /** Disabled link color for banner (references banner color) */
   --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
+  /** Disabled link text decoration for banner */
   --pf-c-banner--link--disabled--TextDecoration: none;
+  /** Background color for info banner */
   --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200, #73bcf7);
+  /** Background color for danger banner */
   --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Background color for success banner */
   --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
+  /** Background color for warning banner */
   --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
+  /** Z-index for sticky banner */
   --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md, 300);
+  /** Box shadow for sticky banner */
   --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
 }
 

package/pf-banner/pf-banner.d.ts

@@ -4,25 +4,7 @@ export type BannerVariant = ('default' | 'info' | 'warning' | 'danger' | 'succes
  * 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=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.
- * @slot
- *       Contains the text for the banner
+ * @alias Banner
  */
 export declare class PfBanner extends LitElement {
     #private;

package/pf-banner/pf-banner.js

@@ -6,7 +6,124 @@ import { property } from 'lit/decorators/property.js';
 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`;
+const styles = css `:host {
+  display: block;
+  /** Top padding for banner */
+  --pf-c-banner--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  /** Right padding for banner */
+  --pf-c-banner--PaddingRight: var(--pf-global--spacer--md, 1rem);
+  /** Right padding for banner on medium screens */
+  --pf-c-banner--md--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+  /** Bottom padding for banner */
+  --pf-c-banner--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+  /** Left padding for banner */
+  --pf-c-banner--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  /** Left padding for banner on medium screens */
+  --pf-c-banner--md--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+  /** Font size for banner */
+  --pf-c-banner--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  /** Text color for banner */
+  --pf-c-banner--Color: var(--pf-global--Color--100, #151515);
+  /** Background color for banner */
+  --pf-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400, #4f5255);
+  /** Link color for banner (references banner color) */
+  --pf-c-banner--link--Color: var(--pf-c-banner--Color);
+  /** Link text decoration for banner */
+  --pf-c-banner--link--TextDecoration: underline;
+  /** Link hover color for banner (references banner color) */
+  --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
+  /** Link hover font weight for banner */
+  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold, 700);
+  /** Disabled link color for banner (references banner color) */
+  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
+  /** Disabled link text decoration for banner */
+  --pf-c-banner--link--disabled--TextDecoration: none;
+  /** Background color for info banner */
+  --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200, #73bcf7);
+  /** Background color for danger banner */
+  --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
+  /** Background color for success banner */
+  --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
+  /** Background color for warning banner */
+  --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
+  /** Z-index for sticky banner */
+  --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md, 300);
+  /** Box shadow for sticky banner */
+  --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
+}
+
+#container,
+#container.default {
+  color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding:
+    var(--pf-c-banner--PaddingTop, var(--pf-global--spacer--xs, 0.25rem))
+    var(--pf-c-banner--PaddingRight, var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-banner--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem))
+    var(--pf-c-banner--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  font-size: var(--pf-c-banner--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
+  color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff));
+  white-space: nowrap;
+  background-color: var(--pf-c-banner--BackgroundColor, var(--pf-global--BackgroundColor--dark-400, #4f5255));
+
+  --pf-icon--size: 1em;
+}
+
+#container.info {
+  color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515));
+  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor, var(--pf-global--palette--blue-200, #73bcf7));
+}
+
+#container.danger {
+  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor, var(--pf-global--danger-color--100, #c9190b));
+}
+
+#container.success {
+  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor, var(--pf-global--success-color--100, #3e8635));
+}
+
+#container.warning {
+  color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515));
+  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor, var(--pf-global--warning-color--100, #f0ab00));
+}
+
+#container.hasIcon {
+  display: var(--pf-l-flex--Display, flex);
+  flex-wrap: var(--pf-l-flex--FlexWrap, wrap);
+  align-items: var(--pf-l-flex--AlignItems, baseline);
+  gap: var(--pf-l-flex--spacer, var(--pf-l-flex--spacer--sm, var(--pf-global--spacer--sm, 0.5rem)));
+}
+
+:host([sticky]) {
+  position: sticky;
+  top: 0;
+  z-index: var(--pf-c-banner--m-sticky--ZIndex, var(--pf-global--ZIndex--md, 300));
+  box-shadow:
+    var(--pf-c-banner--m-sticky--BoxShadow,
+    var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)));
+}
+
+pf-icon,
+::slotted(pf-icon),
+::slotted(svg) {
+  position: relative;
+  inset-block-start: 0.125em;
+}
+
+::slotted(svg) {
+  height: 1em;
+  width: 1em;
+  fill: currentcolor;
+}
+
+@media (min-width: 768px) {
+  #container {
+    --pf-c-banner--PaddingRight: var(--pf-c-banner--md--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));
+    --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
+  }
+}
+`;
 let PfBanner = class PfBanner extends LitElement {
     constructor() {
         super(...arguments);
@@ -24,11 +141,14 @@ let PfBanner = class PfBanner extends LitElement {
         const { variant, icon } = this;
         const hasIcon = !!icon || __classPrivateFieldGet(this, _PfBanner_slots, "f").hasSlotted('icon');
         return html `
+      <!-- The container of the banner -->
       <div id="container" part="container"
             class=${classMap({ hasIcon, [variant ?? '']: !!variant })}>
+        <!-- Contains the labels's icon, e.g. web-icon-alert-success. -->
         <slot name="icon" part="icon">${!this.icon ? '' : html `
           <pf-icon icon="${this.icon}"></pf-icon>`}
         </slot>
+        <!-- Contains the text for the banner -->
         <slot id="text"></slot>
       </div>
     `;
@@ -36,7 +156,7 @@ let PfBanner = class PfBanner extends LitElement {
 };
 _PfBanner_slots = new WeakMap();
 PfBanner.styles = [styles];
-PfBanner.version = "4.0.2";
+PfBanner.version = "4.2.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,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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmB9E,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;;;oBAGK,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;;wCAE7B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;2BACnC,IAAI,CAAC,IAAI,cAAc;;;;;KAK7C,CAAC;IACJ,CAAC;;;AAnCe,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 * @alias 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      <!-- The container of the banner -->\n      <div id=\"container\" part=\"container\"\n            class=${classMap({ hasIcon, [variant ?? '']: !!variant })}>\n        <!-- Contains the labels's icon, e.g. web-icon-alert-success. -->\n        <slot name=\"icon\" part=\"icon\">${!this.icon ? '' : html`\n          <pf-icon icon=\"${this.icon}\"></pf-icon>`}\n        </slot>\n        <!-- Contains the text for the banner -->\n        <slot id=\"text\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-banner': PfBanner;\n  }\n}\n"]}