@patternfly/elements 2.4.0 → 3.0.1

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

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+/**
+ * A **background image** allows you to place an image in the background of your page or area of a page.
+ * @summary Allows users to place an image in the background of your page or area of a page.
+ * @slot filter - Overrides the default svg filter for the background image.
+ * @cssprop {<color>} --pf-c-background-image--BackgroundColor {@default `#151515`}
+ * @cssprop --pf-c-background-image--BackgroundImage
+ * @cssprop --pf-c-background-image--BackgroundImage-2x
+ * @cssprop --pf-c-background-image--BackgroundImage--sm
+ * @cssprop --pf-c-background-image--BackgroundImage--sm-2x
+ * @cssprop --pf-c-background-image--BackgroundImage--lg
+ * @cssprop --pf-c-background-image--Filter {@default `url("#image_overlay")`}
+ */
+export declare class PfBackgroundImage extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    /**
+     * The URL for the image shown on mobile
+     */
+    src?: string;
+    /**
+     * The image shown on mobile with 2x DPI
+     */
+    src2x?: string;
+    /**
+     * The URL for the image shown on small screens (min-width: 576px)
+     */
+    srcSm?: string;
+    /**
+     * The URL for the image shown on small screens (min-width: 576px) with 2x DPI
+     */
+    srcSm2x?: string;
+    /**
+     * The URL for the image shown on large screens (min-width: 992px)
+     */
+    srcLg?: string;
+    /**
+     * Apply SVG Filter to the image
+     */
+    filter: boolean;
+    private _svg?;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-background-image': PfBackgroundImage;
+    }
+}

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

@@ -0,0 +1,114 @@
+var _PfBackgroundImage_instances, _PfBackgroundImage_svg, _PfBackgroundImage_updated, _PfBackgroundImage_onSlotChange;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+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`;
+/**
+ * A **background image** allows you to place an image in the background of your page or area of a page.
+ * @summary Allows users to place an image in the background of your page or area of a page.
+ * @slot filter - Overrides the default svg filter for the background image.
+ * @cssprop {<color>} --pf-c-background-image--BackgroundColor {@default `#151515`}
+ * @cssprop --pf-c-background-image--BackgroundImage
+ * @cssprop --pf-c-background-image--BackgroundImage-2x
+ * @cssprop --pf-c-background-image--BackgroundImage--sm
+ * @cssprop --pf-c-background-image--BackgroundImage--sm-2x
+ * @cssprop --pf-c-background-image--BackgroundImage--lg
+ * @cssprop --pf-c-background-image--Filter {@default `url("#image_overlay")`}
+ */
+let PfBackgroundImage = class PfBackgroundImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfBackgroundImage_instances.add(this);
+        /**
+         * Apply SVG Filter to the image
+         */
+        this.filter = false;
+        _PfBackgroundImage_svg.set(this, void 0);
+        _PfBackgroundImage_updated.set(this, false);
+    }
+    render() {
+        const cssProps = {
+            '--_background-image': this.src,
+            '--_background-image-2x': this.src2x,
+            '--_background-image-sm': this.srcSm,
+            '--_background-image-sm-2x': this.srcSm2x,
+            '--_background-image-lg': this.srcLg,
+        };
+        Object.entries(cssProps).forEach(([key, value]) => {
+            // if the value is undefined, remove the css property
+            if (!value) {
+                delete cssProps[key];
+            }
+            else {
+                // otherwise, add the value with the url() css function
+                cssProps[key] = `url(${value})`;
+            }
+        });
+        return html `
+      <div id="container" part="container" style="${styleMap(cssProps)}">
+        ${!this.filter ? html `` : html `
+          <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">
+                <filter id="image_overlay">
+                  <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>
+                  <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
+                    <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
+                    <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
+                    <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
+                    <feFuncA type="table" tableValues="0 1"></feFuncA>
+                  </feComponentTransfer>
+                </filter>
+              </svg>
+            `}
+          </slot>
+        `}
+      </div>
+    `;
+    }
+};
+_PfBackgroundImage_svg = new WeakMap();
+_PfBackgroundImage_updated = new WeakMap();
+_PfBackgroundImage_instances = new WeakSet();
+_PfBackgroundImage_onSlotChange = function _PfBackgroundImage_onSlotChange() {
+    const [svg] = this._svg;
+    if (svg) {
+        __classPrivateFieldSet(this, _PfBackgroundImage_svg, svg, "f");
+        __classPrivateFieldSet(this, _PfBackgroundImage_updated, true, "f");
+        this.requestUpdate();
+    }
+    else {
+        __classPrivateFieldSet(this, _PfBackgroundImage_updated, false, "f");
+    }
+};
+PfBackgroundImage.styles = [styles];
+__decorate([
+    property({ reflect: true })
+], PfBackgroundImage.prototype, "src", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'src-2x' })
+], PfBackgroundImage.prototype, "src2x", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'src-sm' })
+], PfBackgroundImage.prototype, "srcSm", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'src-sm-2x' })
+], PfBackgroundImage.prototype, "srcSm2x", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'src-lg' })
+], PfBackgroundImage.prototype, "srcLg", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfBackgroundImage.prototype, "filter", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'filter', selector: 'svg' })
+], PfBackgroundImage.prototype, "_svg", void 0);
+PfBackgroundImage = __decorate([
+    customElement('pf-background-image')
+], PfBackgroundImage);
+export { PfBackgroundImage };
+//# sourceMappingURL=pf-background-image.js.map

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-background-image';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-background-image.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-background-image.e2e.js","sourceRoot":"","sources":["pf-background-image.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,qBAAqB,CAAC;AAEtC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-background-image';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,89 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfBackgroundImage } from '@patternfly/elements/pf-background-image/pf-background-image.js';
+import { setViewport } from '@web/test-runner-commands';
+const example = html `
+  <pf-background-image filter
+    src="/components/background-image/demo/pfbg.jpg"
+    src-2x="/components/background-image/demo/pfbg_576.jpg"
+    src-sm="/components/background-image/demo/pfbg_768.jpg"
+    src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
+    src-lg="/components/background-image/demo/pfbg_1200.jpg"
+    >
+  </pf-background-image>
+`;
+function isMobile() {
+    const matches = !!window.matchMedia('(max-width: 575px)').matches;
+    return matches;
+}
+function isTablet() {
+    const matches = !!window.matchMedia('(min-width: 576px)').matches;
+    return matches;
+}
+function isDesktop() {
+    const matches = !!window.matchMedia('(min-width: 992px)').matches;
+    return matches;
+}
+describe('<pf-background-image>', function () {
+    describe('simply instantiating', function () {
+        let element;
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-background-image')).to.be.an.instanceof(PfBackgroundImage);
+        });
+        it('should upgrade', async function () {
+            element = await createFixture(html `<pf-background-image></pf-background-image>`);
+            const klass = customElements.get('pf-background-image');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfBackgroundImage);
+        });
+        describe('adjusting window size', function () {
+            describe('when the window is less than 576px wide', function () {
+                beforeEach(async function () {
+                    await setViewport({ width: 320, height: 500 });
+                    await element.updateComplete;
+                    expect(isMobile()).to.be.true;
+                });
+                it('should background image', async function () {
+                    const element = await createFixture(example);
+                    await element.updateComplete;
+                    const container = element.shadowRoot.querySelector('#container');
+                    const afterStyles = getComputedStyle(container, '::after');
+                    expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg.jpg');
+                });
+            });
+        });
+        describe('when the window is less greater then 576px wide', function () {
+            beforeEach(async function () {
+                await setViewport({ width: 576, height: 500 });
+                await element.updateComplete;
+                expect(isTablet()).to.be.true;
+            });
+            it('should background image', async function () {
+                const element = await createFixture(example);
+                await element.updateComplete;
+                const container = element.shadowRoot.querySelector('#container');
+                const afterStyles = getComputedStyle(container, '::after');
+                /* the image sizes are not named based off viewport but their own intrinsic size */
+                expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_768.jpg');
+            });
+        });
+        describe('when the window is less greater then 992px wide', function () {
+            beforeEach(async function () {
+                await setViewport({ width: 992, height: 500 });
+                await element.updateComplete;
+                expect(isDesktop()).to.be.true;
+            });
+            it('should background image', async function () {
+                const element = await createFixture(example);
+                await element.updateComplete;
+                const container = element.shadowRoot.querySelector('#container');
+                const afterStyles = getComputedStyle(container, '::after');
+                /* the image sizes are not named based off viewport but their own intrinsic size */
+                expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_1200.jpg');
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-background-image.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-background-image.spec.js","sourceRoot":"","sources":["pf-background-image.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfBackgroundImage } from '@patternfly/elements/pf-background-image/pf-background-image.js';\nimport { setViewport } from '@web/test-runner-commands';\n\nconst example = html`\n  <pf-background-image filter\n    src=\"/components/background-image/demo/pfbg.jpg\"\n    src-2x=\"/components/background-image/demo/pfbg_576.jpg\"\n    src-sm=\"/components/background-image/demo/pfbg_768.jpg\"\n    src-sm-2x=\"/components/background-image/demo/pfbg_768@2x.jpg\"\n    src-lg=\"/components/background-image/demo/pfbg_1200.jpg\"\n    >\n  </pf-background-image>\n`;\n\nfunction isMobile() {\n  const matches = !!window.matchMedia('(max-width: 575px)').matches;\n  return matches;\n}\n\nfunction isTablet() {\n  const matches = !!window.matchMedia('(min-width: 576px)').matches;\n  return matches;\n}\n\nfunction isDesktop() {\n  const matches = !!window.matchMedia('(min-width: 992px)').matches;\n  return matches;\n}\n\ndescribe('<pf-background-image>', function() {\n  describe('simply instantiating', function() {\n    let element: PfBackgroundImage;\n\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-background-image')).to.be.an.instanceof(PfBackgroundImage);\n    });\n\n    it('should upgrade', async function() {\n      element = await createFixture<PfBackgroundImage>(html`<pf-background-image></pf-background-image>`);\n      const klass = customElements.get('pf-background-image');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfBackgroundImage);\n    });\n\n    describe('adjusting window size', function() {\n      describe('when the window is less than 576px wide', function() {\n        beforeEach(async function() {\n          await setViewport({ width: 320, height: 500 });\n          await element.updateComplete;\n          expect(isMobile()).to.be.true;\n        });\n\n        it('should background image', async function() {\n          const element = await createFixture<PfBackgroundImage>(example);\n          await element.updateComplete;\n          const container = element.shadowRoot!.querySelector('#container')!;\n          const afterStyles = getComputedStyle(container, '::after');\n          expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg.jpg');\n        });\n      });\n    });\n\n    describe('when the window is less greater then 576px wide', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 576, height: 500 });\n        await element.updateComplete;\n        expect(isTablet()).to.be.true;\n      });\n\n      it('should background image', async function() {\n        const element = await createFixture<PfBackgroundImage>(example);\n        await element.updateComplete;\n        const container = element.shadowRoot!.querySelector('#container')!;\n        const afterStyles = getComputedStyle(container, '::after');\n        /* the image sizes are not named based off viewport but their own intrinsic size */\n        expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_768.jpg');\n      });\n    });\n\n    describe('when the window is less greater then 992px wide', function() {\n      beforeEach(async function() {\n        await setViewport({ width: 992, height: 500 });\n        await element.updateComplete;\n        expect(isDesktop()).to.be.true;\n      });\n\n      it('should background image', async function() {\n        const element = await createFixture<PfBackgroundImage>(example);\n        await element.updateComplete;\n        const container = element.shadowRoot!.querySelector('#container')!;\n        const afterStyles = getComputedStyle(container, '::after');\n        /* the image sizes are not named based off viewport but their own intrinsic size */\n        expect(afterStyles.getPropertyValue('background-image')).to.contain('/components/background-image/demo/pfbg_1200.jpg');\n      });\n    });\n  });\n});\n\n"]}

package/pf-badge/BaseBadge.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 export declare abstract class BaseBadge extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     abstract state?: string;
     /**
      * Sets a numeric value for a badge.

package/pf-badge/BaseBadge.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { css } from "lit";
-const style = css `:host{position:relative;white-space:nowrap;text-align:center;display:inline-block}`;
-class BaseBadge extends LitElement {
+const style = css `:host {\n  position: relative;\n  white-space: nowrap;\n  text-align: center;\n  display: inline-block;\n}`;
+export class BaseBadge extends LitElement {
     render() {
         const { threshold, number, textContent } = this;
         const displayText = (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
@@ -13,5 +13,4 @@ class BaseBadge extends LitElement {
     }
 }
 BaseBadge.styles = [style];
-export { BaseBadge };
 //# sourceMappingURL=BaseBadge.js.map

package/pf-badge/BaseBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseBadge.js","sourceRoot":"","sources":["BaseBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,MAAsB,SAAU,SAAQ,UAAU;IAmBvC,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;;AA3Be,gBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;SADb,SAAS","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseBadge.css';\n\nexport abstract class BaseBadge extends LitElement {\n  static readonly styles = [style];\n\n  abstract state?: string;\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  abstract 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  abstract threshold?: number;\n\n  override render() {\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"]}
+{"version":3,"file":"BaseBadge.js","sourceRoot":"","sources":["BaseBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,MAAM,OAAgB,SAAU,SAAQ,UAAU;IAmBvC,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;;AA3Be,gBAAM,GAAG,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseBadge.css';\n\nexport abstract class BaseBadge extends LitElement {\n  static readonly styles = [style];\n\n  abstract state?: string;\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  abstract 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  abstract threshold?: number;\n\n  override render() {\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"]}

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

@@ -23,7 +23,7 @@ import { BaseBadge } from './BaseBadge.js';
  * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor   {@default `#06c`}
  */
 export declare class PfBadge extends BaseBadge {
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     /**
      * Denotes the state-of-affairs this badge represents
      * Options include read and unread

package/pf-badge/pf-badge.js

@@ -3,7 +3,7 @@ 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{border-radius:var(--pf-c-badge--BorderRadius,var(--pf-global--BorderRadius--lg,180em));min-width:var(--pf-c-badge--MinWidth,var(--pf-global--spacer--xl,2rem));padding-left:var(--pf-c-badge--PaddingLeft,var(--pf-global--spacer--sm,.5rem));padding-right:var(--pf-c-badge--PaddingRight,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-badge--FontSize,\n    var(--pf-theme--font-size, .75em));font-weight:var(--pf-c-badge--FontWeight,var(--pf-theme--font-weight--bold,700));line-height:var(--pf-c-badge--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));color:var(--pf-c-badge--Color,var(--pf-global--palette--black-900,#151515));background-color:var(--pf-c-badge--BackgroundColor,var(--pf-global--palette--black-200,#f0f0f0))}:host([state=read]){--pf-c-badge--Color:var(--pf-c-badge--m-read--Color,\n    var(--pf-global--palette--black-900, #151515));--pf-c-badge--BackgroundColor:var(--pf-c-badge--m-read--BackgroundColor,\n    var(--pf-global--palette--black-200, #f0f0f0))}:host([state=unread]){--pf-c-badge--Color:var(--pf-c-badge--m-unread--Color,\n    var(--pf-global--palette--white, #fff));--pf-c-badge--BackgroundColor:var(--pf-c-badge--m-unread--BackgroundColor,\n    var(--pf-global--palette--blue-400, #06c))}`;
+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.
  *

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;AAIH,IAAa,OAAO,GAApB,MAAa,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;SAZY,OAAO","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,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"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-badge';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-badge.e2e.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,52 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { hexToRgb, getColor } from '@patternfly/pfe-tools/test/hex-to-rgb.js';
+import { PfBadge } from '@patternfly/elements/pf-badge/pf-badge.js';
+// Background colors for the various states
+const states = {
+    default: '#f0f0f0',
+    read: '#f0f0f0',
+    unread: '#0066cc',
+};
+const element = html `<pf-badge number="10">10</pf-badge>`;
+describe('<pf-badge>', function () {
+    it('imperatively instantiates', function () {
+        expect(document.createElement('pf-badge')).to.be.an.instanceof(PfBadge);
+    });
+    it('should upgrade', async function () {
+        const el = await createFixture(element);
+        expect(el, 'pf-badge should be an instance of PfBadge')
+            .to.be.an
+            .instanceOf(customElements.get('pf-badge'))
+            .and
+            .to.be.an.instanceof(PfBadge);
+    });
+    it('should display text equivalent to the number attribute', async function () {
+        const el = await createFixture(html `<pf-badge number="100">10</pf-badge>`);
+        await nextFrame();
+        expect(el.shadowRoot.querySelector('span').textContent).to.equal('100');
+    });
+    it('should add \'+\' sign if the value exceeds the threshold', async function () {
+        const el = await createFixture(html `<pf-badge number="900" threshold="100">900</pf-badge>`);
+        await nextFrame();
+        expect(el.shadowRoot.querySelector('span').textContent).to.equal('100+');
+    });
+    it('shouldn\'t add a \'+\' sign if the value doesn\'t exceed the threshold', async function () {
+        const el = await createFixture(html `<pf-badge number="900" threshold="1000">900</pf-badge>`);
+        await el.updateComplete;
+        expect(el.textContent).to.equal('900');
+        expect(el.shadowRoot.querySelector('span').textContent).to.equal('900');
+    });
+    // This is the one that created an error:
+    Object.entries(states).forEach(([state, color]) => {
+        it(`should have a background color of '${color}' when state is ${state}`, async function () {
+            const el = await createFixture(element);
+            if (state !== 'default') {
+                el.setAttribute('state', state);
+            }
+            const [r, g, b] = getColor(el, 'background-color');
+            expect([r, g, b]).to.deep.equal(hexToRgb(color));
+        });
+    });
+});
+//# sourceMappingURL=pf-badge.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-badge.spec.js","sourceRoot":"","sources":["pf-badge.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { hexToRgb, getColor } from '@patternfly/pfe-tools/test/hex-to-rgb.js';\nimport { PfBadge } from '@patternfly/elements/pf-badge/pf-badge.js';\n\n// Background colors for the various states\nconst states = {\n  default: '#f0f0f0',\n  read: '#f0f0f0',\n  unread: '#0066cc',\n};\n\nconst element = html`<pf-badge number=\"10\">10</pf-badge>`;\n\ndescribe('<pf-badge>', function() {\n  it('imperatively instantiates', function() {\n    expect(document.createElement('pf-badge')).to.be.an.instanceof(PfBadge);\n  });\n\n  it('should upgrade', async function() {\n    const el = await createFixture<PfBadge>(element);\n    expect(el, 'pf-badge should be an instance of PfBadge')\n        .to.be.an\n        .instanceOf(customElements.get('pf-badge'))\n        .and\n        .to.be.an.instanceof(PfBadge);\n  });\n\n  it('should display text equivalent to the number attribute', async function() {\n    const el = await createFixture<PfBadge>(html`<pf-badge number=\"100\">10</pf-badge>`);\n    await nextFrame();\n    expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('100');\n  });\n\n  it('should add \\'+\\' sign if the value exceeds the threshold', async function() {\n    const el = await createFixture<PfBadge>(html`<pf-badge number=\"900\" threshold=\"100\">900</pf-badge>`);\n    await nextFrame();\n    expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('100+');\n  });\n\n  it('shouldn\\'t add a \\'+\\' sign if the value doesn\\'t exceed the threshold', async function() {\n    const el = await createFixture<PfBadge>(html`<pf-badge number=\"900\" threshold=\"1000\">900</pf-badge>`);\n    await el.updateComplete;\n    expect(el.textContent).to.equal('900');\n    expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('900');\n  });\n\n  // This is the one that created an error:\n  Object.entries(states).forEach(([state, color]) => {\n    it(`should have a background color of '${color}' when state is ${state}`, async function() {\n      const el = await createFixture<PfBadge>(element);\n\n      if (state !== 'default') {\n        el.setAttribute('state', state);\n      }\n\n      const [r, g, b] = getColor(el, 'background-color');\n      expect([r, g, b]).to.deep.equal(hexToRgb(color));\n    });\n  });\n});\n"]}

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

@@ -3,31 +3,22 @@ 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  {@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
@@ -35,7 +26,7 @@ export type BannerVariant = ('default' | 'info' | 'warning' | 'danger' | 'succes
  */
 export declare class PfBanner extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     /** Changes the visual appearance of the banner. */
     variant?: BannerVariant;
     /** Shorthand for the `icon` slot, the value is icon name */

package/pf-banner/pf-banner.js

@@ -6,35 +6,26 @@ 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{display:block;--pf-c-banner--PaddingTop:var(--pf-global--spacer--xs, 0.25rem);--pf-c-banner--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-banner--md--PaddingRight:var(--pf-global--spacer--lg, 1.5rem);--pf-c-banner--PaddingBottom:var(--pf-global--spacer--xs, 0.25rem);--pf-c-banner--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-banner--md--PaddingLeft:var(--pf-global--spacer--lg, 1.5rem);--pf-c-banner--FontSize:var(--pf-global--FontSize--sm, 0.875rem);--pf-c-banner--Color:var(--pf-global--Color--100, #151515);--pf-c-banner--BackgroundColor:var(--pf-global--BackgroundColor--dark-400, #4f5255);--pf-c-banner--link--Color:var(--pf-c-banner--Color);--pf-c-banner--link--TextDecoration:underline;--pf-c-banner--link--hover--Color:var(--pf-c-banner--Color);--pf-c-banner--link--hover--FontWeight:var(--pf-global--FontWeight--semi-bold, 700);--pf-c-banner--link--disabled--Color:var(--pf-c-banner--Color);--pf-c-banner--link--disabled--TextDecoration:none;--pf-c-banner--m-info--BackgroundColor:var(--pf-global--palette--blue-200, #73bcf7);--pf-c-banner--m-danger--BackgroundColor:var(--pf-global--danger-color--100, #c9190b);--pf-c-banner--m-success--BackgroundColor:var(--pf-global--success-color--100, #3e8635);--pf-c-banner--m-warning--BackgroundColor:var(--pf-global--warning-color--100, #f0ab00);--pf-c-banner--m-sticky--ZIndex:var(--pf-global--ZIndex--md, 300);--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,#fff));overflow:hidden;text-overflow:ellipsis;padding:var(--pf-c-banner--PaddingTop,var(--pf-global--spacer--xs,.25rem)) var(--pf-c-banner--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-banner--PaddingBottom,var(--pf-global--spacer--xs,.25rem)) var(--pf-c-banner--PaddingLeft,var(--pf-global--spacer--md,1rem));font-size:var(--pf-c-banner--FontSize, var(--pf-global--FontSize--sm, .875rem));color:var(--pf-global--Color--100,var(--pf-global--Color--light-100,#fff));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,.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 .5rem .5rem -.375rem rgba(3,3,3,.18)))}::slotted(pf-icon),::slotted(svg),pf-icon{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))}}`;
+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

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QASE,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;YACpC,MAAM,CAAC,yCAAyC,CAAC,CAAC;SACnD;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;SAlCY,QAAQ","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 *\n * @summary Allows users to display a stylized banner.\n *\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 *\n * @cssprop {<length>} --pf-c-banner--md--PaddingRight  {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-banner--md--PaddingLeft  {@default `1.5rem`}\n *\n * @cssprop {<length>} --pf-c-banner--FontSize {@default `0.875rem`}\n *\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 *\n * @cssprop --pf-c-banner--m-sticky--ZIndex  {@default `300`}\n *\n * @cssprop --pf-c-banner--m-sticky--BoxShadow {@default `0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)`}\n *\n * @csspart container - The container of the banner\n *\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,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"]}

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

@@ -0,0 +1 @@
+export {};