@patternfly/elements 2.4.0 → 3.0.1

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.css

@@ -1,8 +1,3 @@
-:host {
-  display: inline-block;
-  height: max-content;
-}
-
 :host([hidden]) {
   display: none !important;
 }
@@ -11,18 +6,18 @@
   display: none !important;
 }
 
-button {
+.pf-button {
   cursor: pointer;
   position: relative;
   font-family: inherit;
 }
 
-button {
+.pf-button {
   border-width: 0;
   border-style: solid;
 }
 
-button::after {
+.pf-button::after {
   position: absolute;
   inset: 0 0 0 0;
   content: "";
@@ -31,9 +26,9 @@ button::after {
 
 :host(:is(:disabled, [aria-disabled=true])),
 :host(:is(:disabled, [aria-disabled=true])) #container,
-:host(:is(:disabled, [aria-disabled=true])) button,
-:host(:is(:disabled, [aria-disabled=true])[danger]) button,
-:host(:is(:disabled, [aria-disabled=true])[variant=link]) button {
+:host(:is(:disabled, [aria-disabled=true])) .pf-button,
+:host(:is(:disabled, [aria-disabled=true])[danger]) .pf-button,
+:host(:is(:disabled, [aria-disabled=true])[variant=link]) .pf-button {
   pointer-events: none;
   cursor: default;
 }
@@ -43,13 +38,13 @@ button::after {
   pointer-events: none;
 }
 
-.hasIcon {
+.pf-button.hasIcon {
   position: relative;
   display: flex;
   align-items: center;
 }
 
-.hasIcon [part=icon] {
+.pf-button.hasIcon [part=icon] {
   display: inline-flex;
   align-items: center;
   position: absolute;

package/pf-button/BaseButton.d.ts

@@ -11,9 +11,15 @@ import { LitElement } from 'lit';
  */
 export declare abstract class BaseButton extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    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';
@@ -33,11 +39,10 @@ export declare abstract class BaseButton extends LitElement {
     abstract danger: unknown;
     protected get hasIcon(): boolean;
     render(): TemplateResult<1>;
-    protected formDisabledCallback(): Promise<void>;
+    formDisabledCallback(): Promise<void>;
     /**
      * 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

@@ -6,7 +6,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { css } from "lit";
-const styles = css `:host{display:inline-block;height:max-content}:host([hidden]){display:none!important}[hidden]{display:none!important}button{cursor:pointer;position:relative;font-family:inherit}button{border-width:0;border-style:solid}button::after{position:absolute;inset:0 0 0 0;content:"";border-style:solid}:host(:is(:disabled,[aria-disabled=true])),:host(:is(:disabled,[aria-disabled=true])) #container,:host(:is(:disabled,[aria-disabled=true])) button,:host(:is(:disabled,[aria-disabled=true])[danger]) button,:host(:is(:disabled,[aria-disabled=true])[variant=link]) button{pointer-events:none;cursor:default}[part=icon]{display:none;pointer-events:none}.hasIcon{position:relative;display:flex;align-items:center}.hasIcon [part=icon]{display:inline-flex;align-items:center;position:absolute;width:16px}:host(:not([disabled])) .hasIcon [part=icon]{cursor:pointer}[part=icon] ::slotted(*){width:16px;max-width:16px;height:16px;max-height:16px}.hasIcon button{position:absolute;inset:0}`;
+const styles = css `:host([hidden]) {\n  display: none !important;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n.pf-button {\n  cursor: pointer;\n  position: relative;\n  font-family: inherit;\n}\n\n.pf-button {\n  border-width: 0;\n  border-style: solid;\n}\n\n.pf-button::after {\n  position: absolute;\n  inset: 0 0 0 0;\n  content: "";\n  border-style: solid;\n}\n\n:host(:is(:disabled, [aria-disabled=true])),\n:host(:is(:disabled, [aria-disabled=true])) #container,\n:host(:is(:disabled, [aria-disabled=true])) .pf-button,\n:host(:is(:disabled, [aria-disabled=true])[danger]) .pf-button,\n:host(:is(:disabled, [aria-disabled=true])[variant=link]) .pf-button {\n  pointer-events: none;\n  cursor: default;\n}\n\n[part=icon] {\n  display: none;\n  pointer-events: none;\n}\n\n.pf-button.hasIcon {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.pf-button.hasIcon [part=icon] {\n  display: inline-flex;\n  align-items: center;\n  position: absolute;\n  width: 16px;\n}\n\n:host(:not([disabled])) .hasIcon [part=icon] {\n  cursor: pointer;\n}\n\n[part=icon] ::slotted(*) {\n  width: 16px;\n  max-width: 16px;\n  height: 16px;\n  max-height: 16px;\n}\n\n.hasIcon button {\n  position: absolute;\n  inset: 0;\n}\n`;
 /**
  * Base button class
  * @csspart button - Internal button element
@@ -16,22 +16,24 @@ const styles = css `:host{display:inline-block;height:max-content}:host([hidden]
  * @slot
  *       Must contain exactly one `<button>` element as the only content not assigned to a named slot.
  */
-class BaseButton extends LitElement {
+export class BaseButton extends LitElement {
     constructor() {
         super(...arguments);
         _BaseButton_instances.add(this);
         /** Disables the button */
         this.disabled = false;
-        _BaseButton_internals.set(this, new InternalsController(this));
+        _BaseButton_internals.set(this, InternalsController.of(this));
     }
     get hasIcon() {
         return !!this.icon;
     }
     render() {
-        const { hasIcon } = this;
+        const { disabled, hasIcon, 
+        // @ts-expect-error: will no longer be a problem after closing issue #2616
+        plain, } = this;
         return html `
       <button aria-label="${ifDefined(this.label)}"
-              class="${classMap({ hasIcon })}"
+              class="pf-button ${classMap({ disabled, hasIcon, plain })}"
               part="button"
               type="${ifDefined(this.type)}"
               value="${ifDefined(this.value)}"
@@ -57,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);
@@ -76,5 +81,4 @@ __decorate([
 __decorate([
     property()
 ], BaseButton.prototype, "icon", void 0);
-export { BaseButton };
 //# sourceMappingURL=BaseButton.js.map

package/pf-button/BaseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AACA,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;;;AAG/F;;;;;;;;GAQG;AACH,MAAsB,UAAW,SAAQ,UAAU;IAAnD;;;QAOE,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAwB7D,gCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IA6C7C,CAAC;IA3CC,IAAc,OAAO;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,OAAO,IAAI,CAAA;4BACa,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;uBAC1B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;;sBAEtB,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;IAES,KAAK,CAAC,oBAAoB;QAClC,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;IAGC,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,OAAO;YACV,OAAO,uBAAA,IAAI,6BAAW,CAAC,KAAK,EAAE,CAAC;QACjC;YACE,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAM,EAAE,CAAC;KACnC;AACH,CAAC;AAjEe,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;SApBN,UAAU","sourcesContent":["import 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';\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 = new InternalsController(this);\n\n  protected get hasIcon() {\n    return !!this.icon;\n  }\n\n  override render() {\n    const { hasIcon } = this;\n    return html`\n      <button aria-label=\"${ifDefined(this.label)}\"\n              class=\"${classMap({ hasIcon })}\"\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  protected 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-icon.css

@@ -0,0 +1,11 @@
+/******************************
+ *                            *
+ *            ICON            *
+ *                            *
+ ******************************/
+
+.hasIcon {
+  gap: calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,
+    var(--pf-global--spacer--xs, 0.25rem)));
+}
+

package/pf-button/pf-button-tokens.css

@@ -0,0 +1,173 @@
+:host {
+	--pf-c-button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+	--pf-c-button--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+	--pf-c-button--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-button--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	--pf-c-button--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	--pf-c-button--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-button--BackgroundColor: transparent;
+	--pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	--pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	--pf-c-button--after--BorderColor: transparent;
+	--pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-button--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
+	--pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);
+	--pf-c-button--disabled--after--BorderColor: transparent;
+	--pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-primary--Color: var(--pf-global--Color--light-100, #fff);
+	--pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	--pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100, #fff);
+	--pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	--pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100, #fff);
+	--pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	--pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100, #fff);
+	--pf-c-button--m-secondary--BackgroundColor: transparent;
+	--pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-secondary--hover--BackgroundColor: transparent;
+	--pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-secondary--focus--BackgroundColor: transparent;
+	--pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-secondary--active--BackgroundColor: transparent;
+	--pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-secondary--m-danger--BackgroundColor: transparent;
+	--pf-c-button--m-secondary--m-danger--Color: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
+	--pf-c-button--m-secondary--m-danger--hover--Color: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
+	--pf-c-button--m-secondary--m-danger--focus--Color: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
+	--pf-c-button--m-secondary--m-danger--active--Color: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-button--m-tertiary--BackgroundColor: transparent;
+	--pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-tertiary--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-tertiary--hover--BackgroundColor: transparent;
+	--pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-tertiary--focus--BackgroundColor: transparent;
+	--pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-tertiary--active--BackgroundColor: transparent;
+	--pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
+	--pf-c-button--m-warning--Color: var(--pf-global--Color--dark-100, #151515);
+	--pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-button--m-warning--hover--Color: var(--pf-global--Color--dark-100, #151515);
+	--pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-button--m-warning--focus--Color: var(--pf-global--Color--dark-100, #151515);
+	--pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);
+	--pf-c-button--m-warning--active--Color: var(--pf-global--Color--dark-100, #151515);
+	--pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-button--m-danger--Color: var(--pf-global--Color--light-100, #fff);
+	--pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100, #fff);
+	--pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100, #fff);
+	--pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100, #fff);
+	--pf-c-button--m-link--BackgroundColor: transparent;
+	--pf-c-button--m-link--Color: var(--pf-global--link--Color, #06c);
+	--pf-c-button--m-link--hover--BackgroundColor: transparent;
+	--pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover, #004080);
+	--pf-c-button--m-link--focus--BackgroundColor: transparent;
+	--pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover, #004080);
+	--pf-c-button--m-link--active--BackgroundColor: transparent;
+	--pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover, #004080);
+	--pf-c-button--m-link--disabled--BackgroundColor: transparent;
+	--pf-c-button--m-link--m-inline--FontSize: inherit;
+	--pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover, underline);
+	--pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover, #004080);
+	--pf-c-button--m-link--m-inline--PaddingTop: 0;
+	--pf-c-button--m-link--m-inline--PaddingRight: 0;
+	--pf-c-button--m-link--m-inline--PaddingBottom: 0;
+	--pf-c-button--m-link--m-inline--PaddingLeft: 0;
+	--pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm, 0.5rem));
+	--pf-c-button--m-link--m-danger--BackgroundColor: transparent;
+	--pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100, #c9190b);
+	--pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
+	--pf-c-button--m-link--m-danger--hover--Color: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
+	--pf-c-button--m-link--m-danger--focus--Color: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-link--m-danger--active--BackgroundColor: transparent;
+	--pf-c-button--m-link--m-danger--active--Color: var(--pf-global--danger-color--200, #a30000);
+	--pf-c-button--m-plain--BackgroundColor: transparent;
+	--pf-c-button--m-plain--Color: var(--pf-global--Color--200, #6a6e73);
+	--pf-c-button--m-plain--hover--BackgroundColor: transparent;
+	--pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-plain--focus--BackgroundColor: transparent;
+	--pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-plain--active--BackgroundColor: transparent;
+	--pf-c-button--m-plain--active--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
+	--pf-c-button--m-plain--disabled--BackgroundColor: transparent;
+	--pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-button--m-control--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-control--BorderRadius: 0;
+	--pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+	--pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+	--pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-button--m-control--hover--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-button--m-control--active--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-button--m-control--focus--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-button--m-control--m-expanded--Color: var(--pf-global--Color--100, #151515);
+	--pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-button--m-small--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-button--m-display-lg--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	--pf-c-button--m-display-lg--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-button--m-display-lg--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-button--m-display-lg--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-button--m-display-lg--FontWeight: var(--pf-global--FontWeight--bold, 700);
+	--pf-c-button--m-link--m-display-lg--FontSize: var(--pf-global--FontSize--lg, 1.125rem);
+	--pf-c-button__icon--m-start--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-button__icon--m-end--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem));
+	--pf-c-button__progress--Opacity: 0;
+	--pf-c-button__progress--TranslateY: -50%;
+	--pf-c-button__progress--TranslateX: 0;
+	--pf-c-button__progress--Top: 50%;
+	--pf-c-button__progress--Left: var(--pf-global--spacer--md, 1rem);
+	--pf-c-button--m-progress--TransitionProperty: padding;
+	--pf-c-button--m-progress--TransitionDuration: var(--pf-global--TransitionDuration, 250ms);
+	--pf-c-button--m-progress--PaddingRight: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width) / 2);
+	--pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width) / 2);
+	--pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width));
+	--pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100, #06c);
+	--pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
+	--pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
+	--pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100, #151515);
+	--pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
+	--pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
+	--pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+
+  --_button-color: var(--pf-c-button--m-primary--Color);
+  --_button-background-color: var(--pf-c-button--m-primary--BackgroundColor);
+}