@patternfly/elements 2.4.0 → 3.0.1

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

@@ -1,4 +1,4 @@
-import { BaseButton } from './BaseButton.js';
+import { LitElement } from 'lit';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-spinner/pf-spinner.js';
 export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' | 'link');
@@ -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,24 +114,29 @@ 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 BaseButton {
-    static readonly styles: import("lit").CSSResult[];
+export declare class PfButton extends LitElement {
+    #private;
+    static readonly formAssociated = true;
+    static readonly styles: CSSStyleSheet[];
     /** Represents the state of a stateful button */
     loading: boolean;
     /** Applies plain styles */
     plain: boolean;
     /** Not as urgent as danger */
     warning: boolean;
+    /** Changes the size of the button. */
     size?: 'small' | 'large';
     /** Icon set for the `icon` property */
     iconSet?: string;
+    /**
+     * Use danger buttons for actions a user can take that are potentially
+     * destructive or difficult/impossible to undo, like deleting or removing
+     * user data.
+     */
     danger: boolean;
     /**
      * Changes the style of the button.
@@ -157,8 +149,21 @@ export declare class PfButton extends BaseButton {
      * - Tertiary: Tertiary buttons are flexible and can be used as needed.
      */
     variant: ButtonVariant;
-    protected get hasIcon(): boolean;
-    protected renderDefaultIcon(): import("lit-html").TemplateResult<1>;
+    inline: boolean;
+    block: boolean;
+    /** Disables the button */
+    disabled: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    /** Accessible name for the button, use when the button does not have slotted text */
+    label?: string;
+    value?: string;
+    name?: string;
+    /** Shorthand for the `icon` slot, the value is icon name */
+    icon?: string;
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    formDisabledCallback(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-button/pf-button.js

@@ -1,13 +1,18 @@
-import { __decorate } from "tslib";
-import { html } from 'lit';
+var _PfButton_instances, _PfButton_internals, _PfButton_slots, _PfButton_disabled_get, _PfButton_onClick, _PfButton_onKeydown;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { BaseButton } from './BaseButton.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import '@patternfly/elements/pf-icon/pf-icon.js';
 import '@patternfly/elements/pf-spinner/pf-spinner.js';
 import { css } from "lit";
-const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-button--m-primary--BackgroundColor,var(--pf-global--primary-color--100,#06c));font-size:var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-c-button--FontWeight,var(--pf-global--FontWeight--normal,400));line-height:var(--pf-c-button--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));padding:var(--pf-c-button--PaddingTop,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-button--PaddingBottom,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem))}:host,button{border-radius:var(--pf-c-button--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}::slotted(pf-icon),pf-icon{color:currentColor}button::after{border-color:var(--pf-c-button--after--BorderColor,transparent);border-width:var(--pf-c-button--after--BorderWidth,var(--pf-global--BorderWidth--sm,1px));border-radius:var(--pf-c-button--after--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}button:active{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--active--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--active--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--active--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--active--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--active--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}button:focus{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--focus--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--focus--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--focus--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--focus--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--focus--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}button:hover{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--hover--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--hover--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--hover--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--hover--Color,\n    var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--hover--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000))}:host([warning]) button{color:var(--pf-c-button--m-warning--Color,var(--pf-global--Color--dark-100,#151515));background-color:var(--pf-c-button--m-warning--BackgroundColor,var(--pf-global--warning-color--100,#f0ab00))}:host([warning]) button:active{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--active--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--active--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) button:focus{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--focus--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--focus--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) button:hover{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--hover--Color,\n    var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--hover--BackgroundColor,\n    var(--pf-global--palette--gold-500, #c58c00))}:host([disabled][warning]) button{pointer-events:none;cursor:default;color:var(--pf-c-button--disabled--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-button--disabled--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host([plain]){--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent)}:host([plain]) button{--pf-c-button--after--BorderWidth:0;--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));--pf-c-button--disabled--Color:var(--pf-c-button--m-plain--disabled--Color,\n    var(--pf-global--disabled-color--200, #d2d2d2));color:var(--pf-c-button--m-plain--Color,var(--pf-global--Color--200,#6a6e73));background-color:var(--pf-c-button--m-plain--BackgroundColor,transparent)}:host([plain]) button:active{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--active--BackgroundColor,\n    tranparent)}:host([plain]) button:focus{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--focus--BackgroundColor,\n    transparent)}:host([plain]) button:hover{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--hover--BackgroundColor,\n    transparent)}:host([loading][plain]) [part=icon],:host([plain]) .hasIcon [part=icon]{left:16px}:host([plain]) button:disabled,:host([plain]) button[aria-disabled=true],:host([plain][disabled]),:host([plain][disabled]) button,:host([plain][disabled][variant=link]) button{color:var(--pf-c-button--disabled--Color,var(--pf-c-button--m-plain--disabled--Color,var(--pf-global--disabled--color--200,#d2d2d2)))}.hasIcon{gap:calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,var(--pf-global--spacer--xs,.25rem)))}.hasIcon [part=icon]{--pf-icon--size:16px;position:relative}:host([icon-position=right]) .hasIcon [part=icon],:host([icon-position=right][loading]) [part=icon]{order:1}:host([icon-position=right]) .hasIcon button{padding-left:var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem));padding-right:calc(16px + 8px + var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)))}:host([loading]) button{position:relative;display:flex;align-items:center}:host([loading]) button [part=icon]{display:inline-block;z-index:1;position:absolute;cursor:pointer;top:var(--pf-c-button__progress--Top,50%);left:var(--pf-c-button__progress--Left,var(--pf-global--spacer--md,1rem));line-height:1;transform:translate(var(--pf-c-button__progress--TranslateX,0),var(--pf-c-button__progress--TranslateY,-50%));margin-inline-end:var(--pf-c-button__icon--m-start--MarginRight,var(--pf-global--spacer--xs,.25rem))}:host([loading][danger]),:host([loading][variant=primary]:not([plain])){--pf-c-spinner--Color:white}:host([loading]:not([plain])){--pf-c-button--PaddingRight:var(--pf-c-button--m-in-progress--PaddingRight,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingLeft:var(--pf-c-button--m-in-progress--PaddingLeft,\n    calc(\n      var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,\n        calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2))}:host([loading]:not([plain])) button{padding-left:calc(12px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))}:host([variant=secondary]){--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--Color,\n    var(--pf-global--danger-color--100, #c9190b));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent)}:host([variant=secondary]) button{color:var(--pf-c-button--m-secondary--Color,var(--pf-global--primary-color--100,#06c));background-color:var(--pf-c-button--m-secondary--BackgroundColor,transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c))}:host([variant=secondary]) button:active{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--active--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--active--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--active--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent)}:host([variant=secondary]) button:focus{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--focus--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--focus--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--focus--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent)}:host([variant=secondary]) button:hover{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--hover--Color,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--hover--BackgroundColor,\n    transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--hover--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--hover--Color,\n    var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent)}:host([variant=secondary][danger]) button{color:var(--pf-c-button--m-secondary--m-danger--Color,var(--pf-global--danger--color--100,#c9190b));background-color:var(--pf-c-button--m-secondary--m-danger--BackgroundColor,transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:active{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:focus{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:hover{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,\n    var(--pf-global--danger--color--100, #c9190b))}:host([variant=tertiary]) button{--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));color:var(--pf-c-button--m-tertiary--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-button--m-tertiary--BackgroundColor,transparent)}:host([variant=tertiary]) button:active{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--active--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=tertiary]) button:focus{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--focus--BackgroundColor,\n    transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--focus--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=tertiary]) button:hover{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--hover--after--BorderColor,\n    var(--pf-global--Color--100, #151515))}:host([variant=control]) button{--pf-c-button--BorderRadius:var(--pf-c-button--m-control--BorderRadius, 0);--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-control--disabled--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));--pf-c-button--after--BorderRadius:0;--pf-c-button--after--BorderWidth:var(--pf-c-button--m-control--after--BorderWidth,\n    var(--pf-global--BorderWidth--sm, 1px));--pf-c-button--after--BorderColor:var(--pf-c-button--m-control--after--BorderTopColor,\n      var(--pf-global--BorderColor--300, #f0f0f0)) var(--pf-c-button--m-control--after--BorderRightColor,\n      var(--pf-global--BorderColor--300, #f0f0f0)) var(--pf-c-button--m-control--after--BorderBottomColor,\n      var(--pf-global--BorderColor--200, #8a8d90)) var(--pf-c-button--m-control--after--BorderLeftColor,\n      var(--pf-global--BorderColor--300, #f0f0f0));color:var(--pf-c-button--m-control--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-button--m-control--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff))}:host([variant=control]) button:active{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--active--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--active--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--active--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:focus{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--focus--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--focus--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--focus--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:hover{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--hover--Color,\n    var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--hover--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--hover--after--BorderBottomColor,\n    var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:active::after{border-block-end-width:var(--pf-c-button--m-control--active--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=control]) button:focus::after{border-block-end-width:var(--pf-c-button--m-control--focus--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=control]) button:hover::after{border-block-end-width:var(--pf-c-button--m-control--hover--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=link]) button{color:var(--pf-c-button--m-link--Color,var(--pf-global--link--Color,#06c))}:host([variant=link]) button{background-color:var(--pf-c-button--m-link--BackgroundColor,var(--pf-c-button--m-link--hover--BackgroundColor,transparent))}:host([variant=link][inline]),:host([variant=link][inline]) button{display:inline}:host([variant=link][inline]){--pf-c-button--PaddingTop:0;--pf-c-button--PaddingLeft:0;--pf-c-button--PaddingBottom:0;--pf-c-button--PaddingRight:0}:host([variant=link][inline]) button:hover{text-decoration:var(--pf-c-button--m-link--m-inline--hover--TextDecoration,var(--pf-global--link--TextDecoration--hover,underline))}:host([variant=link]){--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-link--disabled--BackgroundColor, transparent)}:host(:hover){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--hover--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--hover--BackgroundColor, transparent)}:host(:focus),:host(:focus-within){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--focus--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--hover--BackgroundColor, transparent)}:host(:not([inline])) button:active{--pf-c-button--m-link--Color:var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--active--BackgroundColor, transparent)}:host(:not([inline]):has(button:active)){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--active--BackgroundColor, transparent)}:host([variant=link][danger]) button{--pf-c-button--m-danger--Color:var(--pf-c-button--m-link--m-danger--Color,\n      var(--pf-global--danger-color--100, #c9190b));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent)}:host([variant=link][danger]) button:hover{--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--hover--Color,\n      var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent)}:host([variant=link][danger]) button:active{--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--active--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent)}:host([variant=link][danger]:has(button:active)){--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--active--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent)}:host([variant=link][danger]:is(:focus,:focus-within)){--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--focus--Color,\n    var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent)}:host(:is(:disabled,[aria-disabled=true])),:host(:is(:disabled,[aria-disabled=true])) button,:host(:is(:disabled,[aria-disabled=true])[danger]) button,:host(:is(:disabled,[aria-disabled=true])[variant=link]) button{color:var(--pf-c-button--disabled--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-button--disabled--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host(:is(:disabled,[aria-disabled=true])) button::after{border-color:var(--pf-c-button--disabled--after--BorderColor,transparent)}:host([block]),:host([block]) button{display:flex;width:100%;justify-content:center}:host([size=large]) button{--pf-c-button--PaddingTop:var(--pf-c-button--m-display-lg--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingRight:var(--pf-c-button--m-display-lg--PaddingRight,\n    var(--pf-global--spacer--xl, 2rem));--pf-c-button--PaddingBottom:var(--pf-c-button--m-display-lg--PaddingBottom,\n    var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingLeft:var(--pf-c-button--m-display-lg--PaddingLeft,\n    var(--pf-global--spacer--xl, 2rem));--pf-c-button--FontWeight:var(--pf-c-button--m-display-lg--FontWeight,\n    var(--pf-global--FontWeight--bold, 700))}:host([size=small]) button{--pf-c-button--FontSize:var(--pf-c-button--m-small--FontSize,\n    var(--pf-global--FontSize--md, 1rem))}:host([danger]) button{color:var(--pf-c-button--m-danger--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-button--m-danger--BackgroundColor,var(--pf-global--danger-color--100,#c9190b))}`;
+const tokensStyles = css `:host {\n\t--pf-c-button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);\n\t--pf-c-button--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);\n\t--pf-c-button--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--LineHeight: var(--pf-global--LineHeight--md, 1.5);\n\t--pf-c-button--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-button--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-button--BackgroundColor: transparent;\n\t--pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n\t--pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n\t--pf-c-button--after--BorderColor: transparent;\n\t--pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);\n\t--pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-button--disabled--after--BorderColor: transparent;\n\t--pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-primary--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n\t--pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n\t--pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n\t--pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-secondary--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--active--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--m-danger--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--m-danger--Color: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--m-danger--hover--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--m-danger--focus--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--m-danger--active--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-tertiary--BackgroundColor: transparent;\n\t--pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--active--BackgroundColor: transparent;\n\t--pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-button--m-warning--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);\n\t--pf-c-button--m-warning--hover--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);\n\t--pf-c-button--m-warning--focus--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);\n\t--pf-c-button--m-warning--active--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-danger--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-link--BackgroundColor: transparent;\n\t--pf-c-button--m-link--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-button--m-link--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-button--m-link--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-button--m-link--active--BackgroundColor: transparent;\n\t--pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-button--m-link--disabled--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-inline--FontSize: inherit;\n\t--pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover, underline);\n\t--pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-button--m-link--m-inline--PaddingTop: 0;\n\t--pf-c-button--m-link--m-inline--PaddingRight: 0;\n\t--pf-c-button--m-link--m-inline--PaddingBottom: 0;\n\t--pf-c-button--m-link--m-inline--PaddingLeft: 0;\n\t--pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs, 0.25rem);\n\t--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));\n\t--pf-c-button--m-link--m-danger--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-danger--hover--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-link--m-danger--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-danger--focus--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-link--m-danger--active--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-danger--active--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-plain--BackgroundColor: transparent;\n\t--pf-c-button--m-plain--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-button--m-plain--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-plain--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-plain--active--BackgroundColor: transparent;\n\t--pf-c-button--m-plain--active--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-button--m-plain--disabled--BackgroundColor: transparent;\n\t--pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--BorderRadius: 0;\n\t--pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);\n\t--pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);\n\t--pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--active--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--m-expanded--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-button--m-small--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-button--m-display-lg--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--m-display-lg--PaddingRight: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-button--m-display-lg--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--m-display-lg--PaddingLeft: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-button--m-display-lg--FontWeight: var(--pf-global--FontWeight--bold, 700);\n\t--pf-c-button--m-link--m-display-lg--FontSize: var(--pf-global--FontSize--lg, 1.125rem);\n\t--pf-c-button__icon--m-start--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-button__icon--m-end--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem));\n\t--pf-c-button__progress--Opacity: 0;\n\t--pf-c-button__progress--TranslateY: -50%;\n\t--pf-c-button__progress--TranslateX: 0;\n\t--pf-c-button__progress--Top: 50%;\n\t--pf-c-button__progress--Left: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--m-progress--TransitionProperty: padding;\n\t--pf-c-button--m-progress--TransitionDuration: var(--pf-global--TransitionDuration, 250ms);\n\t--pf-c-button--m-progress--PaddingRight: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width) / 2);\n\t--pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width) / 2);\n\t--pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width));\n\t--pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-in-progress--m-plain__progress--Left: 50%;\n\t--pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;\n\t--pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n\t--pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\n  --_button-color: var(--pf-c-button--m-primary--Color);\n  --_button-background-color: var(--pf-c-button--m-primary--BackgroundColor);\n}\n`;
+const iconStyles = css `/******************************\n *                            *\n *            ICON            *\n *                            *\n ******************************/\n\n.hasIcon {\n  gap: calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,\n    var(--pf-global--spacer--xs, 0.25rem)));\n}\n\n`;
+const styles = css `:host {\n  position: relative;\n\tfont-size: var(--pf-c-button--FontSize);\n\tfont-weight: var(--pf-c-button--FontWeight);\n\tline-height: var(--pf-c-button--LineHeight);\n\ttext-align: center;\n\twhite-space: nowrap;\n  font-size: var(--pf-c-button--FontSize,\n    var(--pf-global--FontSize--md, 1rem));\n  font-weight: var(--pf-c-button--FontWeight,\n    var(--pf-global--FontWeight--normal, 400));\n  line-height: var(--pf-c-button--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5));\n  padding:\n    var(--pf-c-button--PaddingTop,\n      var(--pf-global--spacer--form-element, 0.375rem))\n    var(--pf-c-button--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-button--PaddingBottom,\n      var(--pf-global--spacer--form-element, 0.375rem))\n    var(--pf-c-button--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n  display: inline-block;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n  font-family: inherit;\n  border-width: 0;\n  border-style: solid;\n  border-radius: var(--pf-c-button--BorderRadius,\n    var(--pf-global--BorderRadius--sm, 3px));\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n:host([inline]) {\n  display: inline;\n  --pf-c-button--PaddingTop: 0;\n  --pf-c-button--PaddingLeft: 0;\n  --pf-c-button--PaddingBottom: 0;\n  --pf-c-button--PaddingRight: 0;\n}\n\npf-icon,\n::slotted(pf-icon) {\n  color: currentcolor;\n  padding-inline-start: var(--_button-icon-padding-inline-start);\n  padding-inline-end: var(--_button-icon-padding-inline-end);\n  vertical-align: var(--_button-icon-vertical-align);\n}\n\n#button {\n  display: contents;\n  color: var(--_button-color);\n  &::before,\n  &::after {\n    position: absolute;\n    inset: 0;\n    content: "";\n  }\n  &::before {\n    background-color: var(--_button-background-color);\n    border-radius: var(--pf-c-button--BorderRadius,\n      var(--pf-global--BorderRadius--sm, 3px));\n  }\n  &::after {\n    pointer-events: none;\n    border-style: solid;\n    border-width: var(--pf-c-button--after--BorderWidth);\n    border-color: var(--pf-c-button--after--BorderColor);\n    border-radius: var(--pf-c-button--after--BorderRadius);\n  }\n}\n\n#text {\n  display: inline;\n  position: relative;\n}\n\n:host(:focus) {\n  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));\n  --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000));\n  /* LINK */\n  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color,\n    var(--pf-global--link--Color--hover, #004080));\n  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);\n  /* PLAIN */\n  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor,\n    transparent);\n}\n\n:host(:hover) {\n  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));\n  --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000));\n  /* LINK */\n  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color,\n    var(--pf-global--link--Color--hover, #004080));\n  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);\n  /* PLAIN */\n  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor,\n    transparent);\n}\n\n:host(:active) {\n  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor,\n    var(--pf-global--primary-color--200, #004080));\n  --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth,\n    var(--pf-global--BorderWidth--md, 2px));\n  /* DANGER */\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor,\n    var(--pf-global--danger-color--200, #a30000));\n  /* LINK */\n  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,\n    var(--pf-global--link--Color--hover, #004080));\n  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);\n}\n\n.disabled,\n:host(:disabled),\n:host([danger]:disabled),\n:host([link]:disabled) .link {\n  pointer-events: none;\n  cursor: default;\n}\n\n[part=icon] {\n  --pf-icon--size: 16px;\n  display: inline-flex;\n  align-items: center;\n  position: absolute;\n  & ::slotted(*) {\n    width: 16px;\n    max-width: 16px;\n    height: 16px;\n    max-height: 16px;\n  }\n}\n\n.hasIcon [part=icon] {\n  cursor: pointer;\n}\n\n.hasIcon #button {\n  position: absolute;\n  inset: 0;\n}\n\n/******************************\n *                            *\n *           PLAIN            *\n *                            *\n ******************************/\n\n#button.plain {\n  --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent);\n  --pf-c-button--after--BorderWidth: 0 !important;\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));\n  --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color,\n    var(--pf-global--disabled-color--200, #d2d2d2));\n  --_button-color: var(--pf-c-button--m-plain--Color,\n    var(--pf-global--Color--200, #6a6e73));\n  --_button-background-color: var(--pf-c-button--m-plain--BackgroundColor,\n    transparent);\n  :host(:active) & {\n    --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color,\n      var(--pf-global--Color--100, #151515));\n    --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor,\n      tranparent);\n  }\n  &:not(.hasIcon) [part=icon],\n  &.loading [part=icon] {\n    left: 16px;\n  }\n  & [part=icon] {\n    display: contents;\n  }\n  &.disabled,\n  &.link.disabled {\n    --_button-color: var(--pf-c-button--disabled--Color,\n      var(--pf-c-button--m-plain--disabled--Color,\n        var(--pf-global--disabled--color--200, #d2d2d2)));\n  }\n}\n\n.hasIcon:not(.plain) [part=icon] {\n  position: relative;\n}\n\n/******************************\n *                            *\n *    ICON POSITION RIGHT     *\n *                            *\n ******************************/\n\n:host([icon-position=right]) .loading [part=icon] {\n  order: 1;\n}\n\n:host([icon-position=right]) #button.hasIcon  {\n  padding-left: var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  padding-right: calc(16px + 8px + var(--pf-c-button--PaddingRight, var(--pf-global--spacer--md, 1rem)));\n}\n\n/******************************\n *                            *\n *          WARNING           *\n *                            *\n ******************************/\n\n#button.warning {\n  --_button-color: var(--pf-c-button--m-warning--Color,\n    var(--pf-global--Color--dark-100, #151515));\n  --_button-background-color: var(--pf-c-button--m-warning--BackgroundColor,\n    var(--pf-global--warning-color--100, #f0ab00));\n  :host(:focus) & {\n    --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color,\n      var(--pf-global--Color--dark-100, #151515));\n    --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--focus--BackgroundColor,\n      var(--pf-global--palette--gold-500, #c58c00));\n  }\n  :host(:hover) & {\n    --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--hover--Color,\n      var(--pf-global--Color--dark-100, #151515));\n    --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor,\n      var(--pf-global--palette--gold-500, #c58c00));\n  }\n  :host(:active) & {\n    --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color,\n      var(--pf-global--Color--dark-100, #151515));\n    --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor,\n      var(--pf-global--palette--gold-500, #c58c00));\n  }\n  &.disabled {\n    --_button-color: var(--pf-c-button--disabled--Color,\n      var(--pf-global--disabled-color--100, #6a6e73));\n    --_button-background-color: var(--pf-c-button--disabled--BackgroundColor,\n      var(--pf-global--disabled-color--200, #d2d2d2));\n  }\n}\n\n/******************************\n *                            *\n *          LOADING           *\n *                            *\n ******************************/\n\n:host([loading]) {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n#button.loading {\n  & [part=icon] {\n    display: inline-block;\n    z-index: 1;\n    position: absolute;\n    cursor: pointer;\n    top: var(--pf-c-button__progress--Top, 50%);\n    left: var(--pf-c-button__progress--Left,\n      var(--pf-global--spacer--md, 1rem));\n    line-height: 1;\n    transform: translate(\n      var(--pf-c-button__progress--TranslateX, 0),\n      var(--pf-c-button__progress--TranslateY, -50%));\n    margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,\n      var(--pf-global--spacer--xs, 0.25rem));\n  }\n  &.primary:not(.plain),\n  &.danger {\n    --pf-c-spinner--Color: white;\n  }\n  &:not(.plain) {\n    padding-left: calc(12px + var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem)));\n    --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight,\n      var(--pf-global--spacer--md, 1rem));\n    --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft,\n      calc(\n        var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,\n          calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2));\n  }\n\n}\n\n/******************************\n *                            *\n *         SECONDARY          *\n *                            *\n ******************************/\n\n#button.secondary {\n  --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color,\n    var(--pf-global--danger-color--100, #c9190b));\n  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);\n  --_button-color: var(--pf-c-button--m-secondary--Color,\n    var(--pf-global--primary-color--100, #06c));\n  --_button-background-color: var(--pf-c-button--m-secondary--BackgroundColor, transparent);\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor,\n    var(--pf-global--primary-color--100, #06c));\n  :host(:focus) & {\n    --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color,\n      var(--pf-global--primary-color--100, #06c));\n    --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);\n    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor,\n      var(--pf-global--primary-color--100, #06c));\n    /* DANGER */\n    --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--focus--Color,\n      var(--pf-global--danger--color--200, #a30000));\n    --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent);\n  }\n  :host(:hover) & {\n    --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color,\n      var(--pf-global--primary-color--100, #06c));\n    --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor,\n      transparent);\n    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor,\n      var(--pf-global--primary-color--100, #06c));\n    /* DANGER */\n    --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color,\n      var(--pf-global--danger--color--200, #a30000));\n    --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent);\n  }\n  :host(:active) & {\n    --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color,\n      var(--pf-global--primary-color--100, #06c));\n    --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);\n    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor,\n      var(--pf-global--primary-color--100, #06c));\n    /* DANGER */\n    --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color,\n      var(--pf-global--danger--color--200, #a30000));\n    --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent);\n  }\n  &.danger {\n    --_button-color: var(--pf-c-button--m-secondary--m-danger--Color,\n      var(--pf-global--danger--color--100, #c9190b));\n    --_button-background-color: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);\n    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor,\n      var(--pf-global--danger--color--100, #c9190b));\n    :host(:focus) & {\n      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,\n        var(--pf-global--danger--color--100, #c9190b));\n    }\n    :host(:hover) & {\n      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,\n        var(--pf-global--danger--color--100, #c9190b));\n    }\n    :host(:active) & {\n      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,\n        var(--pf-global--danger--color--100, #c9190b));\n    }\n  }\n}\n\n/******************************\n *                            *\n *         TERTIARY           *\n *                            *\n ******************************/\n\n#button.tertiary {\n  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,\n    var(--pf-global--Color--100, #151515));\n  --_button-color: var(--pf-c-button--m-tertiary--Color,\n    var(--pf-global--Color--100, #151515));\n  --_button-background-color: var(--pf-c-button--m-tertiary--BackgroundColor, transparent);\n  :host(:focus) & {\n    --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color,\n      var(--pf-global--Color--100, #151515));\n    --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor,\n      transparent);\n    --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor,\n      var(--pf-global--Color--100, #151515));\n  }\n  :host(:hover) & {\n    --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color,\n      var(--pf-global--Color--100, #151515));\n    --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);\n    --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor,\n      var(--pf-global--Color--100, #151515));\n  }\n  :host(:active) & {\n    --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color,\n      var(--pf-global--Color--100, #151515));\n    --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);\n    --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor,\n      var(--pf-global--Color--100, #151515));\n  }\n}\n\n/******************************\n *                            *\n *          CONTROL           *\n *                            *\n ******************************/\n\n#button.control {\n  --pf-c-button--BorderRadius: var(--pf-c-button--m-control--BorderRadius, 0);\n  --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-control--disabled--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));\n  --pf-c-button--after--BorderRadius: 0;\n  --pf-c-button--after--BorderWidth: var(--pf-c-button--m-control--after--BorderWidth,\n    var(--pf-global--BorderWidth--sm, 1px));\n  --pf-c-button--after--BorderColor:\n    var(--pf-c-button--m-control--after--BorderTopColor,\n      var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-button--m-control--after--BorderRightColor,\n      var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-button--m-control--after--BorderBottomColor,\n      var(--pf-global--BorderColor--200, #8a8d90))\n    var(--pf-c-button--m-control--after--BorderLeftColor,\n      var(--pf-global--BorderColor--300, #f0f0f0));\n  --_button-color: var(--pf-c-button--m-control--Color,\n    var(--pf-global--Color--100, #151515));\n  --_button-background-color: var(--pf-c-button--m-control--BackgroundColor,\n    var(--pf-global--BackgroundColor--100, #fff));\n  :host(:focus) & {\n    --pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color,\n      var(--pf-global--Color--100, #151515));\n    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--focus--BackgroundColor,\n      var(--pf-global--BackgroundColor--100, #fff));\n    --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--focus--after--BorderBottomColor,\n      var(--pf-global--active-color--100, #06c));\n    &::after {\n      border-block-end-width: var(--pf-c-button--m-control--focus--after--BorderBottomWidth,\n        var(--pf-global--BorderWidth--md, 2px));\n    }\n  }\n  :host(:hover) & {\n    --pf-c-button--m-control--Color: var(--pf-c-button--m-control--hover--Color,\n      var(--pf-global--Color--100, #151515));\n    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor,\n      var(--pf-global--BackgroundColor--100, #fff));\n    --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--hover--after--BorderBottomColor,\n      var(--pf-global--active-color--100, #06c));\n    &::after {\n      border-block-end-width: var(--pf-c-button--m-control--hover--after--BorderBottomWidth,\n        var(--pf-global--BorderWidth--md, 2px));\n    }\n  }\n  :host(:active) & {\n    --pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color,\n      var(--pf-global--Color--100, #151515));\n    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor,\n      var(--pf-global--BackgroundColor--100, #fff));\n    --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor,\n      var(--pf-global--active-color--100, #06c));\n    &::after {\n      border-block-end-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth,\n        var(--pf-global--BorderWidth--md, 2px));\n    }\n  }\n}\n\n/******************************\n *                            *\n *           LINK             *\n *                            *\n ******************************/\n\n#button.link {\n  --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor, transparent);\n  --_button-color: var(--pf-c-button--m-link--Color, var(--pf-global--link--Color, #06c));\n  --_button-background-color: var(--pf-c-button--m-link--BackgroundColor,\n    var(--pf-c-button--m-link--BackgroundColor, transparent));\n  &.inline {\n    :host(:hover) & {\n      text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration,\n        var(--pf-global--link--TextDecoration--hover, underline));\n    }\n  }\n  &.danger {\n    --pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color,\n        var(--pf-global--danger-color--100, #c9190b));\n    --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent);\n    :host(:hover) & {\n      --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--hover--Color,\n          var(--pf-global--danger-color--200, #a30000));\n      --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent);\n    }\n    :host(:focus) & {\n      --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--focus--Color,\n        var(--pf-global--danger-color--200, #a30000));\n      --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent);\n    }\n    :host(:active) & {\n      --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color,\n        var(--pf-global--danger-color--200, #a30000));\n      --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);\n    }\n  }\n}\n\n/******************************\n *                            *\n *         DISABLED           *\n *                            *\n ******************************/\n\n:host(:is(:disabled,[disabled])) {\n  pointer-events: none;\n  cursor: default;\n}\n\n#button.disabled {\n  &:not(.plain) {\n    --_button-color: var(--pf-c-button--disabled--Color,\n      var(--pf-global--disabled-color--100, #6a6e73));\n    --_button-background-color: var(--pf-c-button--disabled--BackgroundColor,\n      var(--pf-global--disabled-color--200, #d2d2d2));\n  }\n  &::after {\n    border-color: var(--pf-c-button--disabled--after--BorderColor, transparent);\n  }\n}\n\n/******************************\n *                            *\n *           BLOCK            *\n *                            *\n ******************************/\n\n:host([block]) {\n  display: flex;\n  width: 100%;\n  justify-content: center;\n}\n\n/******************************\n *                            *\n *           LARGE            *\n *                            *\n ******************************/\n\n:host([size="large"]) {\n  --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop,\n    var(--pf-global--spacer--md, 1rem));\n  --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight,\n    var(--pf-global--spacer--xl, 2rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom,\n    var(--pf-global--spacer--md, 1rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft,\n    var(--pf-global--spacer--xl, 2rem));\n  --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight,\n    var(--pf-global--FontWeight--bold, 700));\n}\n\n/******************************\n *                            *\n *           SMALL            *\n *                            *\n ******************************/\n\n:host([size="small"]) {\n  --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize,\n    var(--pf-global--FontSize--md, 1rem));\n}\n\n/******************************\n *                            *\n *          DANGER            *\n *                            *\n ******************************/\n\n#button.danger {\n  --_button-color: var(--pf-c-button--m-danger--Color,\n    var(--pf-global--Color--light-100, #fff));\n  --_button-background-color: var(--pf-c-button--m-danger--BackgroundColor,\n    var(--pf-global--danger-color--100, #c9190b));\n}\n\n`;
 /**
  * A **button** is a box area or text that communicates and triggers user actions when
  * clicked or selected. Buttons can be used to communicate and immediately trigger
@@ -15,18 +20,14 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * 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`}
@@ -34,7 +35,6 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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`}
@@ -43,7 +43,6 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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`}
@@ -55,7 +54,6 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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`}
@@ -67,7 +65,6 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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`}
@@ -76,7 +73,6 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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`}
@@ -89,7 +85,6 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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`}
@@ -111,11 +106,9 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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`}
@@ -124,7 +117,6 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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`}
@@ -133,22 +125,25 @@ const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-gl
  * @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 BaseButton {
+let PfButton = class PfButton extends LitElement {
     constructor() {
         super(...arguments);
+        _PfButton_instances.add(this);
         /** Represents the state of a stateful button */
         this.loading = false;
         /** Applies plain styles */
         this.plain = false;
         /** Not as urgent as danger */
         this.warning = false;
+        /**
+         * Use danger buttons for actions a user can take that are potentially
+         * destructive or difficult/impossible to undo, like deleting or removing
+         * user data.
+         */
         this.danger = false;
         /**
          * Changes the style of the button.
@@ -161,24 +156,104 @@ let PfButton = class PfButton extends BaseButton {
          * - Tertiary: Tertiary buttons are flexible and can be used as needed.
          */
         this.variant = 'primary';
+        this.inline = false;
+        this.block = false;
+        /** Disables the button */
+        this.disabled = false;
+        _PfButton_internals.set(this, InternalsController.of(this, { role: 'button' }));
+        _PfButton_slots.set(this, new SlotController(this, 'icon', null));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', __classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onClick));
+        this.addEventListener('keydown', __classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onKeydown));
+        this.tabIndex = 0;
     }
-    get hasIcon() {
-        return !!this.icon || !!this.loading;
+    willUpdate() {
+        __classPrivateFieldGet(this, _PfButton_internals, "f").ariaLabel = this.label || null;
+        __classPrivateFieldGet(this, _PfButton_internals, "f").ariaDisabled = String(!!this.disabled);
     }
-    renderDefaultIcon() {
+    render() {
+        const hasIcon = !!this.icon || !!this.loading || __classPrivateFieldGet(this, _PfButton_slots, "f").hasSlotted('icon');
+        const { warning, variant, danger, loading, plain, inline, block, size } = this;
+        const disabled = __classPrivateFieldGet(this, _PfButton_instances, "a", _PfButton_disabled_get);
         return html `
-      <pf-icon
-          icon="${ifDefined(this.icon)}"
-          set="${ifDefined(this.iconSet)}"
-          ?hidden="${!this.icon}"></pf-icon>
-      <pf-spinner
-          ?hidden="${!this.loading}"
-          size="md"
-          aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-spinner>
+      <div id="button"
+           class="${classMap({
+            [variant]: true,
+            [size ?? '']: !!size,
+            inline,
+            block,
+            danger,
+            disabled,
+            hasIcon,
+            loading,
+            plain,
+            warning,
+        })}">
+        <slot id="icon" part="icon" name="icon" ?hidden="${!hasIcon}">
+          <pf-icon role="presentation"
+                   icon="${ifDefined(this.icon)}"
+                   set="${ifDefined(this.iconSet)}"
+                   ?hidden="${!this.icon}"></pf-icon>
+          <pf-spinner size="md"
+                      ?hidden="${!this.loading}"
+                      aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-spinner>
+        </slot>
+        <slot id="text"></slot>
+      </div>
     `;
     }
+    async formDisabledCallback() {
+        await this.updateComplete;
+        this.requestUpdate();
+    }
+};
+_PfButton_internals = new WeakMap();
+_PfButton_slots = new WeakMap();
+_PfButton_instances = new WeakSet();
+_PfButton_disabled_get = function _PfButton_disabled_get() {
+    return this.disabled || __classPrivateFieldGet(this, _PfButton_internals, "f").formDisabled;
+};
+_PfButton_onClick = function _PfButton_onClick() {
+    if (!__classPrivateFieldGet(this, _PfButton_instances, "a", _PfButton_disabled_get)) {
+        switch (this.type) {
+            case 'reset':
+                return __classPrivateFieldGet(this, _PfButton_internals, "f").reset();
+            default:
+                return __classPrivateFieldGet(this, _PfButton_internals, "f").submit();
+        }
+    }
+};
+_PfButton_onKeydown = function _PfButton_onKeydown(event) {
+    switch (event.key) {
+        case ' ':
+            event.preventDefault();
+            event.stopPropagation();
+            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,
+            }))) {
+                __classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onClick).call(this);
+            }
+    }
 };
-PfButton.styles = [...BaseButton.styles, styles];
+PfButton.formAssociated = true;
+PfButton.styles = [
+    tokensStyles,
+    iconStyles,
+    styles,
+];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfButton.prototype, "loading", void 0);
@@ -200,6 +275,30 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], PfButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfButton.prototype, "inline", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfButton.prototype, "block", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfButton.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], PfButton.prototype, "type", void 0);
+__decorate([
+    property()
+], PfButton.prototype, "label", void 0);
+__decorate([
+    property()
+], PfButton.prototype, "value", void 0);
+__decorate([
+    property()
+], PfButton.prototype, "name", void 0);
+__decorate([
+    property()
+], PfButton.prototype, "icon", void 0);
 PfButton = __decorate([
     customElement('pf-button')
 ], PfButton);