@patternfly/elements 3.0.0 → 3.0.2

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
@@ -43,7 +34,7 @@ export declare class PfBanner extends LitElement {
     /** Shorthand for the `icon` slot, the value is icon name */
     sticky: boolean;
     willUpdate(changed: PropertyValues<this>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-banner/pf-banner.js

@@ -10,31 +10,22 @@ const styles = css `:host {\n  display: block;\n  --pf-c-banner--PaddingTop: var
 /**
  * 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;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 *\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 {};

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

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

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

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

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

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

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

@@ -0,0 +1,81 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js';
+import { PfBanner } from '@patternfly/elements/pf-banner/pf-banner.js';
+describe('<pf-banner>', function () {
+    describe('simply instantiating', function () {
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-banner')).to.be.an.instanceof(PfBanner);
+        });
+        it('should upgrade', async function () {
+            const el = await createFixture(html `
+        <pf-banner>Default</pf-banner>
+      `);
+            const klass = customElements.get('pf-banner');
+            expect(el)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfBanner);
+        });
+        describe('without variant attribute', function () {
+            let element;
+            beforeEach(async function () {
+                element = await createFixture(html `
+          <pf-banner>Default</pf-banner>
+        `);
+                await element.updateComplete;
+            });
+            // TODO: remove assertions on shadow roots
+            it('should display default variant', async function () {
+                const container = element.shadowRoot.querySelector('#container');
+                expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff'));
+                expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#4f5255'));
+            });
+        });
+        describe('with variant="info" attribute', function () {
+            let element;
+            beforeEach(async function () {
+                element = await createFixture(html `
+          <pf-banner variant="info">Info</pf-banner>
+        `);
+                await element.updateComplete;
+            });
+            // TODO: remove assertions on shadow roots
+            it('should display info variant', async function () {
+                const container = element.shadowRoot.querySelector('#container');
+                expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));
+                expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#73bcf7'));
+            });
+        });
+        describe('with variant="danger" attribute', function () {
+            let element;
+            beforeEach(async function () {
+                element = await createFixture(html `
+          <pf-banner variant="danger">Info</pf-banner>
+        `);
+                await element.updateComplete;
+            });
+            // TODO: remove assertions on shadow roots
+            it('should display danger variant', async function () {
+                const container = element.shadowRoot.querySelector('#container');
+                expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff'));
+                expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#c9190b'));
+            });
+        });
+        describe('with valid icon attribute', function () {
+            let element;
+            beforeEach(async function () {
+                element = await createFixture(html `
+          <pf-banner icon="info">Info</pf-banner>
+        `);
+                await element.updateComplete;
+            });
+            // TODO: remove assertions on shadow roots
+            it('should render an icon', async function () {
+                const icon = element.shadowRoot.querySelector('pf-icon');
+                expect(icon).to.exist;
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-banner.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-banner.spec.js","sourceRoot":"","sources":["pf-banner.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 { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js';\nimport { PfBanner } from '@patternfly/elements/pf-banner/pf-banner.js';\n\ndescribe('<pf-banner>', function() {\n  describe('simply instantiating', function() {\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-banner')).to.be.an.instanceof(PfBanner);\n    });\n\n    it('should upgrade', async function() {\n      const el = await createFixture<PfBanner>(html`\n        <pf-banner>Default</pf-banner>\n      `);\n      const klass = customElements.get('pf-banner');\n      expect(el)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfBanner);\n    });\n\n    describe('without variant attribute', function() {\n      let element: PfBanner;\n      beforeEach(async function() {\n        element = await createFixture<PfBanner>(html`\n          <pf-banner>Default</pf-banner>\n        `);\n        await element.updateComplete;\n      });\n      // TODO: remove assertions on shadow roots\n      it('should display default variant', async function() {\n        const container = element.shadowRoot!.querySelector('#container')!;\n        expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff'));\n        expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#4f5255'));\n      });\n    });\n\n    describe('with variant=\"info\" attribute', function() {\n      let element: PfBanner;\n      beforeEach(async function() {\n        element = await createFixture<PfBanner>(html`\n          <pf-banner variant=\"info\">Info</pf-banner>\n        `);\n        await element.updateComplete;\n      });\n      // TODO: remove assertions on shadow roots\n      it('should display info variant', async function() {\n        const container = element.shadowRoot!.querySelector('#container')!;\n        expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515'));\n        expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#73bcf7'));\n      });\n    });\n\n    describe('with variant=\"danger\" attribute', function() {\n      let element: PfBanner;\n      beforeEach(async function() {\n        element = await createFixture<PfBanner>(html`\n          <pf-banner variant=\"danger\">Info</pf-banner>\n        `);\n        await element.updateComplete;\n      });\n      // TODO: remove assertions on shadow roots\n      it('should display danger variant', async function() {\n        const container = element.shadowRoot!.querySelector('#container')!;\n        expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff'));\n        expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#c9190b'));\n      });\n    });\n\n    describe('with valid icon attribute', function() {\n      let element: PfBanner;\n      beforeEach(async function() {\n        element = await createFixture<PfBanner>(html`\n          <pf-banner icon=\"info\">Info</pf-banner>\n        `);\n        await element.updateComplete;\n      });\n      // TODO: remove assertions on shadow roots\n      it('should render an icon', async function() {\n        const icon = element.shadowRoot!.querySelector('pf-icon');\n        expect(icon).to.exist;\n      });\n    });\n  });\n});\n"]}

package/pf-button/BaseButton.d.ts

@@ -13,7 +13,13 @@ export declare abstract class BaseButton extends LitElement {
     #private;
     static readonly styles: CSSStyleSheet[];
     static readonly formAssociated = true;
-    static readonly shadowRootOptions: ShadowRootInit;
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
     /** Disables the button */
     disabled: boolean;
     type?: 'button' | 'submit' | 'reset';
@@ -37,7 +43,6 @@ export declare abstract class BaseButton extends LitElement {
     /**
      * Fallback content for the icon slot. When the `icon` attribute is set, it
      * should render an icon corresponding to the value.
-     *
      * @example ```html
      *          <base-icon icon=${this.icon}></base-icon>
      *          ```

package/pf-button/BaseButton.js

@@ -59,7 +59,10 @@ _BaseButton_internals = new WeakMap(), _BaseButton_instances = new WeakSet(), _B
 };
 BaseButton.styles = [styles];
 BaseButton.formAssociated = true;
-BaseButton.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+BaseButton.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
 __decorate([
     property({ reflect: true, type: Boolean })
 ], BaseButton.prototype, "disabled", void 0);

package/pf-button/BaseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AAGA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F;;;;;;;;GAQG;AACH,MAAM,OAAgB,UAAW,SAAQ,UAAU;IAAnD;;;QAOE,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAwB7D,gCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAC;IAkD5C,CAAC;IAhDC,IAAc,OAAO;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,EACJ,QAAQ,EACR,OAAO;QACP,0EAA0E;QAC1E,KAAK,GACN,GAAG,IAAI,CAAC;QACT,OAAO,IAAI,CAAA;4BACa,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;iCAChB,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;;sBAEjD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;wBACpB,uBAAA,IAAI,kDAAS;2BACV,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,6BAAW,CAAC,YAAY;qEACH,IAAI,CAAC,iBAAiB,EAAE;sCACvD,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAqB;;KAEzE,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;IAGC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,OAAO;YACV,OAAO,uBAAA,IAAI,6BAAW,CAAC,KAAK,EAAE,CAAC;QACjC;YACE,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAM,EAAE,CAAC;IACpC,CAAC;AACH,CAAC;AAtEe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAElB,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,4BAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5E,CAA6E;AAGlE;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAsC;AAGtD;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;wCAAe;AAGd;IAAX,QAAQ,EAAE;wCAAe","sourcesContent":["// we will shortly remove this file in #2631\n/* eslint-disable lit-a11y/no-aria-slot */\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './BaseButton.css';\n\n/**\n * Base button class\n * @csspart button - Internal button element\n * @csspart icon - Container for the icon slot\n * @slot icon\n *       Contains the button's icon or state indicator, e.g. a spinner.\n * @slot\n *       Must contain exactly one `<button>` element as the only content not assigned to a named slot.\n */\nexport abstract class BaseButton extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly formAssociated = true;\n\n  static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  /** Disables the button */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @property({ reflect: true }) type?: 'button' | 'submit' | 'reset';\n\n  /** Accessible name for the button, use when the button does not have slotted text */\n  @property() label?: string;\n\n  @property() value?: string;\n\n  @property() name?: string;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Changes the size of the button. */\n  abstract size?: string;\n\n  /**\n   * Use danger buttons for actions a user can take that are potentially\n   * destructive or difficult/impossible to undo, like deleting or removing\n   * user data.\n   */\n  abstract danger: unknown;\n\n  #internals = InternalsController.of(this);\n\n  protected get hasIcon() {\n    return !!this.icon;\n  }\n\n  override render() {\n    const {\n      disabled,\n      hasIcon,\n      // @ts-expect-error: will no longer be a problem after closing issue #2616\n      plain,\n    } = this;\n    return html`\n      <button aria-label=\"${ifDefined(this.label)}\"\n              class=\"pf-button ${classMap({ disabled, hasIcon, plain })}\"\n              part=\"button\"\n              type=\"${ifDefined(this.type)}\"\n              value=\"${ifDefined(this.value)}\"\n              @click=\"${this.#onClick}\"\n              ?disabled=\"${this.disabled || this.#internals.formDisabled}\">\n        <slot id=\"icon\" part=\"icon\" aria-hidden=\"true\" name=\"icon\">${this.renderDefaultIcon()}</slot>\n        <slot id=\"text\" aria-hidden=${String(!!this.label) as 'true' | 'false'}></slot>\n      </button>\n    `;\n  }\n\n  async formDisabledCallback() {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  #onClick() {\n    switch (this.type) {\n      case 'reset':\n        return this.#internals.reset();\n      default:\n        return this.#internals.submit();\n    }\n  }\n\n  /**\n   * Fallback content for the icon slot. When the `icon` attribute is set, it\n   * should render an icon corresponding to the value.\n   *\n   * @example ```html\n   *          <base-icon icon=${this.icon}></base-icon>\n   *          ```\n   */\n  protected abstract renderDefaultIcon(): TemplateResult;\n}\n"]}
+{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AAGA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F;;;;;;;;GAQG;AACH,MAAM,OAAgB,UAAW,SAAQ,UAAU;IAAnD;;;QAUE,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAwB7D,gCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAC;IAiD5C,CAAC;IA/CC,IAAc,OAAO;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,EACJ,QAAQ,EACR,OAAO;QACP,0EAA0E;QAC1E,KAAK,GACN,GAAG,IAAI,CAAC;QACT,OAAO,IAAI,CAAA;4BACa,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;iCAChB,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;;sBAEjD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;wBACpB,uBAAA,IAAI,kDAAS;2BACV,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,6BAAW,CAAC,YAAY;qEACH,IAAI,CAAC,iBAAiB,EAAE;sCACvD,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAqB;;KAEzE,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;IAGC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,OAAO;YACV,OAAO,uBAAA,IAAI,6BAAW,CAAC,KAAK,EAAE,CAAC;QACjC;YACE,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAM,EAAE,CAAC;IACpC,CAAC;AACH,CAAC;AAzEe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAElB,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAEb,4BAAiB,GAAG;IAC3C,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;AAG0C;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAsC;AAGtD;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;wCAAe;AAGd;IAAX,QAAQ,EAAE;wCAAe","sourcesContent":["// we will shortly remove this file in #2631\n/* eslint-disable lit-a11y/no-aria-slot */\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './BaseButton.css';\n\n/**\n * Base button class\n * @csspart button - Internal button element\n * @csspart icon - Container for the icon slot\n * @slot icon\n *       Contains the button's icon or state indicator, e.g. a spinner.\n * @slot\n *       Must contain exactly one `<button>` element as the only content not assigned to a named slot.\n */\nexport abstract class BaseButton extends LitElement {\n  static readonly styles = [styles];\n\n  static readonly formAssociated = true;\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Disables the button */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @property({ reflect: true }) type?: 'button' | 'submit' | 'reset';\n\n  /** Accessible name for the button, use when the button does not have slotted text */\n  @property() label?: string;\n\n  @property() value?: string;\n\n  @property() name?: string;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Changes the size of the button. */\n  abstract size?: string;\n\n  /**\n   * Use danger buttons for actions a user can take that are potentially\n   * destructive or difficult/impossible to undo, like deleting or removing\n   * user data.\n   */\n  abstract danger: unknown;\n\n  #internals = InternalsController.of(this);\n\n  protected get hasIcon() {\n    return !!this.icon;\n  }\n\n  override render() {\n    const {\n      disabled,\n      hasIcon,\n      // @ts-expect-error: will no longer be a problem after closing issue #2616\n      plain,\n    } = this;\n    return html`\n      <button aria-label=\"${ifDefined(this.label)}\"\n              class=\"pf-button ${classMap({ disabled, hasIcon, plain })}\"\n              part=\"button\"\n              type=\"${ifDefined(this.type)}\"\n              value=\"${ifDefined(this.value)}\"\n              @click=\"${this.#onClick}\"\n              ?disabled=\"${this.disabled || this.#internals.formDisabled}\">\n        <slot id=\"icon\" part=\"icon\" aria-hidden=\"true\" name=\"icon\">${this.renderDefaultIcon()}</slot>\n        <slot id=\"text\" aria-hidden=${String(!!this.label) as 'true' | 'false'}></slot>\n      </button>\n    `;\n  }\n\n  async formDisabledCallback() {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  #onClick() {\n    switch (this.type) {\n      case 'reset':\n        return this.#internals.reset();\n      default:\n        return this.#internals.submit();\n    }\n  }\n\n  /**\n   * Fallback content for the icon slot. When the `icon` attribute is set, it\n   * should render an icon corresponding to the value.\n   * @example ```html\n   *          <base-icon icon=${this.icon}></base-icon>\n   *          ```\n   */\n  protected abstract renderDefaultIcon(): TemplateResult;\n}\n"]}

package/pf-button/pf-button.d.ts

@@ -9,18 +9,14 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * process, or creating a new object. Buttons can also be used to take a user to a
  * new location, like another page inside of a web application, or an external site
  * such as help or documentation..
- *
  * @summary Allows users to perform an action when triggered
- *
  * @cssprop {<length>} --pf-c-button--FontSize   {@default `1rem`}
  * @cssprop            --pf-c-button--FontWeight {@default `400`}
  * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}
- *
  * @cssprop {<length>} --pf-c-button--PaddingTop    {@default `0.375rem`}
  * @cssprop {<length>} --pf-c-button--PaddingLeft   {@default `1rem`}
  * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}
  * @cssprop {<length>} --pf-c-button--PaddingRight  {@default `1rem`}
- *
  * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius  {@default `3px`}
  * @cssprop {<color>}  --pf-c-button--after--BorderColor         {@default `transparent`}
  * @cssprop {<length>} --pf-c-button--after--BorderRadius        {@default `3px`}
@@ -28,7 +24,6 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}
  * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth  {@default `2px`}
  * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth  {@default `2px`}
- *
  * @cssprop {<color>}  --pf-c-button--m-primary--Color                   {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-primary--BackgroundColor         {@default `#06c`}
  * @cssprop {<color>}  --pf-c-button--m-primary--active--Color           {@default `#fff`}
@@ -37,7 +32,6 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-primary--focus--BackgroundColor  {@default `#004080`}
  * @cssprop {<color>}  --pf-c-button--m-primary--hover--Color            {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-primary--hover--BackgroundColor  {@default `#004080`}
- *
  * @cssprop {<color>}  --pf-c-button--m-secondary--Color                   {@default `#06c`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--active--Color           {@default `#06c`}
@@ -49,7 +43,6 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-secondary--hover--Color            {@default `#06c`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BackgroundColor  {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BorderColor      {@default `#06c`}
- *
  * @cssprop {<color>}  --pf-c-button--m-tertiary--Color                   {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-tertiary--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-tertiary--active--Color           {@default `#151515`}
@@ -61,7 +54,6 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--Color            {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BackgroundColor  {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BorderColor      {@default `#151515`}
- *
  * @cssprop {<color>}  --pf-c-button--m-danger--Color                   {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-danger--BackgroundColor         {@default `#c9190b`}
  * @cssprop {<color>}  --pf-c-button--m-danger--active--Color           {@default `#fff`}
@@ -70,7 +62,6 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-danger--focus--BackgroundColor  {@default `#a30000`}
  * @cssprop {<color>}  --pf-c-button--m-danger--hover--Color            {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-danger--hover--BackgroundColor  {@default `#a30000`}
- *
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--Color                   {@default `#c9190b`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BorderColor             {@default `#c9190b`}
@@ -83,7 +74,6 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--Color            {@default `#a30000`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BackgroundColor  {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BorderColor      {@default `#c9190b`}
- *
  * @cssprop {<color>}  --pf-c-button--m-control--disabled--BackgroundColor        {@default `#f0f0f0`}
  * @cssprop {<length>} --pf-c-button--m-control--BorderRadius                     {@default `0`}
  * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth               {@default `1px`}
@@ -105,11 +95,9 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-control--hover--BackgroundColor           {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-control--hover--BorderBottomColor         {@default `#06c`}
  * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth  {@default `2px`}
- *
  * @cssprop {<color>}  --pf-c-button--disabled--Color              {@default `#6a6e73`}
  * @cssprop {<color>}  --pf-c-button--disabled--BackgroundColor    {@default `#d2d2d2`}
  * @cssprop {<color>}  --pf-c-button--disabled--after--BorderColor {@default `transparent`}
- *
  * @cssprop {<color>}  --pf-c-button--m-warning--Color                   {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-warning--BackgroundColor         {@default `#f0ab00`}
  * @cssprop {<color>}  --pf-c-button--m-warning--active--Color           {@default `#151515`}
@@ -118,7 +106,6 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-warning--focus--BackgroundColor  {@default `#c58c00`}
  * @cssprop {<color>}  --pf-c-button--m-warning--hover--Color            {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-warning--hover--BackgroundColor  {@default `#c58c00`}
- *
  * @cssprop {<color>}  --pf-c-button--m-plain--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-plain--Color                   {@default `#6a6e73`}
  * @cssprop {<color>}  --pf-c-button--m-plain--hover--BackgroundColor  {@default `transparent`}
@@ -127,12 +114,9 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * @cssprop {<color>}  --pf-c-button--m-plain--focus--Color            {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-plain--active--Color           {@default `#151515`}
- *
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--Color           {@default `#d2d2d2`}
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}
- *
  * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}
- *
  */
 export declare class PfButton extends LitElement {
     #private;
@@ -178,7 +162,7 @@ export declare class PfButton extends LitElement {
     icon?: string;
     connectedCallback(): void;
     protected willUpdate(): void;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     formDisabledCallback(): Promise<void>;
 }
 declare global {

package/pf-button/pf-button.js

@@ -20,18 +20,14 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * process, or creating a new object. Buttons can also be used to take a user to a
  * new location, like another page inside of a web application, or an external site
  * such as help or documentation..
- *
  * @summary Allows users to perform an action when triggered
- *
  * @cssprop {<length>} --pf-c-button--FontSize   {@default `1rem`}
  * @cssprop            --pf-c-button--FontWeight {@default `400`}
  * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}
- *
  * @cssprop {<length>} --pf-c-button--PaddingTop    {@default `0.375rem`}
  * @cssprop {<length>} --pf-c-button--PaddingLeft   {@default `1rem`}
  * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}
  * @cssprop {<length>} --pf-c-button--PaddingRight  {@default `1rem`}
- *
  * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius  {@default `3px`}
  * @cssprop {<color>}  --pf-c-button--after--BorderColor         {@default `transparent`}
  * @cssprop {<length>} --pf-c-button--after--BorderRadius        {@default `3px`}
@@ -39,7 +35,6 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}
  * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth  {@default `2px`}
  * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth  {@default `2px`}
- *
  * @cssprop {<color>}  --pf-c-button--m-primary--Color                   {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-primary--BackgroundColor         {@default `#06c`}
  * @cssprop {<color>}  --pf-c-button--m-primary--active--Color           {@default `#fff`}
@@ -48,7 +43,6 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<color>}  --pf-c-button--m-primary--focus--BackgroundColor  {@default `#004080`}
  * @cssprop {<color>}  --pf-c-button--m-primary--hover--Color            {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-primary--hover--BackgroundColor  {@default `#004080`}
- *
  * @cssprop {<color>}  --pf-c-button--m-secondary--Color                   {@default `#06c`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--active--Color           {@default `#06c`}
@@ -60,7 +54,6 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<color>}  --pf-c-button--m-secondary--hover--Color            {@default `#06c`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BackgroundColor  {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BorderColor      {@default `#06c`}
- *
  * @cssprop {<color>}  --pf-c-button--m-tertiary--Color                   {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-tertiary--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-tertiary--active--Color           {@default `#151515`}
@@ -72,7 +65,6 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--Color            {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BackgroundColor  {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BorderColor      {@default `#151515`}
- *
  * @cssprop {<color>}  --pf-c-button--m-danger--Color                   {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-danger--BackgroundColor         {@default `#c9190b`}
  * @cssprop {<color>}  --pf-c-button--m-danger--active--Color           {@default `#fff`}
@@ -81,7 +73,6 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<color>}  --pf-c-button--m-danger--focus--BackgroundColor  {@default `#a30000`}
  * @cssprop {<color>}  --pf-c-button--m-danger--hover--Color            {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-danger--hover--BackgroundColor  {@default `#a30000`}
- *
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--Color                   {@default `#c9190b`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BorderColor             {@default `#c9190b`}
@@ -94,7 +85,6 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--Color            {@default `#a30000`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BackgroundColor  {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BorderColor      {@default `#c9190b`}
- *
  * @cssprop {<color>}  --pf-c-button--m-control--disabled--BackgroundColor        {@default `#f0f0f0`}
  * @cssprop {<length>} --pf-c-button--m-control--BorderRadius                     {@default `0`}
  * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth               {@default `1px`}
@@ -116,11 +106,9 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<color>}  --pf-c-button--m-control--hover--BackgroundColor           {@default `#fff`}
  * @cssprop {<color>}  --pf-c-button--m-control--hover--BorderBottomColor         {@default `#06c`}
  * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth  {@default `2px`}
- *
  * @cssprop {<color>}  --pf-c-button--disabled--Color              {@default `#6a6e73`}
  * @cssprop {<color>}  --pf-c-button--disabled--BackgroundColor    {@default `#d2d2d2`}
  * @cssprop {<color>}  --pf-c-button--disabled--after--BorderColor {@default `transparent`}
- *
  * @cssprop {<color>}  --pf-c-button--m-warning--Color                   {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-warning--BackgroundColor         {@default `#f0ab00`}
  * @cssprop {<color>}  --pf-c-button--m-warning--active--Color           {@default `#151515`}
@@ -129,7 +117,6 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<color>}  --pf-c-button--m-warning--focus--BackgroundColor  {@default `#c58c00`}
  * @cssprop {<color>}  --pf-c-button--m-warning--hover--Color            {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-warning--hover--BackgroundColor  {@default `#c58c00`}
- *
  * @cssprop {<color>}  --pf-c-button--m-plain--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-plain--Color                   {@default `#6a6e73`}
  * @cssprop {<color>}  --pf-c-button--m-plain--hover--BackgroundColor  {@default `transparent`}
@@ -138,12 +125,9 @@ const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-butt
  * @cssprop {<color>}  --pf-c-button--m-plain--focus--Color            {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-plain--active--Color           {@default `#151515`}
- *
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--Color           {@default `#d2d2d2`}
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}
- *
  * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}
- *
  */
 let PfButton = class PfButton extends LitElement {
     constructor() {
@@ -246,12 +230,20 @@ _PfButton_onKeydown = function _PfButton_onKeydown(event) {
         case ' ':
             event.preventDefault();
             event.stopPropagation();
-            if (this.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))) {
+            if (this.dispatchEvent(new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }))) {
                 __classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onClick).call(this);
             }
             break;
         case 'Enter':
-            if (this.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))) {
+            if (this.dispatchEvent(new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }))) {
                 __classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onClick).call(this);
             }
     }