@patternfly/elements 3.0.1 → 4.0.0

package/pf-button/pf-button.js

@@ -12,131 +12,15 @@ import '@patternfly/elements/pf-spinner/pf-spinner.js';
 import { css } from "lit";
 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
- * actions a user can take in an application, like submitting a form, canceling a
- * 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`}
- * @cssprop {<length>} --pf-c-button--after--BorderWidth         {@default `1px`}
- * @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`}
- * @cssprop {<color>}  --pf-c-button--m-primary--active--BackgroundColor {@default `#004080`}
- * @cssprop {<color>}  --pf-c-button--m-primary--focus--Color            {@default `#fff`}
- * @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`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--active--BackgroundColor {@default `transparent`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--active--BorderColor     {@default `#06c`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--focus--Color            {@default `#06c`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--focus--BackgroundColor  {@default `transparent`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--focus--BorderColor      {@default `#06c`}
- * @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`}
- * @cssprop {<color>}  --pf-c-button--m-tertiary--active--BackgroundColor {@default `transparent`}
- * @cssprop {<color>}  --pf-c-button--m-tertiary--active--BorderColor     {@default `#151515`}
- * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--Color            {@default `#151515`}
- * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--BackgroundColor  {@default `transparent`}
- * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--BorderColor      {@default `#151515`}
- * @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`}
- * @cssprop {<color>}  --pf-c-button--m-danger--active--BackgroundColor {@default `#a30000`}
- * @cssprop {<color>}  --pf-c-button--m-danger--focus--Color            {@default `#fff`}
- * @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`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--Color           {@default `#a30000`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--BackgroundColor {@default `transparent`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--BorderColor     {@default `#c9190b`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--Color            {@default `#a30000`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--BackgroundColor  {@default `transparent`}
- * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--BorderColor      {@default `#c9190b`}
- * @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`}
- * @cssprop {<color>}  --pf-c-button--m-control--after--BorderTopColor            {@default `#f0f0f0`}
- * @cssprop {<color>}  --pf-c-button--m-control--after--BorderRightColor          {@default `#f0f0f0`}
- * @cssprop {<color>}  --pf-c-button--m-control--after--BorderBottomColor         {@default `#8a8d90`}
- * @cssprop {<color>}  --pf-c-button--m-control--after--BorderLeftColor           {@default `#f0f0f0`}
- * @cssprop {<color>}  --pf-c-button--m-control--Color                            {@default `#151515`}
- * @cssprop {<color>}  --pf-c-button--m-control--BackgroundColor                  {@default `#fff`}
- * @cssprop {<color>}  --pf-c-button--m-control--active--Color                    {@default `#151515`}
- * @cssprop {<color>}  --pf-c-button--m-control--active--BackgroundColor          {@default `#fff`}
- * @cssprop {<color>}  --pf-c-button--m-control--active--BorderBottomColor        {@default `#06c`}
- * @cssprop {<length>} --pf-c-button--m-control--active--after--BorderBottomWidth {@default `2px`}
- * @cssprop {<color>}  --pf-c-button--m-control--focus--Color                     {@default `#151515`}
- * @cssprop {<color>}  --pf-c-button--m-control--focus--BackgroundColor           {@default `#fff`}
- * @cssprop {<color>}  --pf-c-button--m-control--focus--BorderBottomColor         {@default `#06c`}
- * @cssprop {<length>} --pf-c-button--m-control--focus--after--BorderBottomWidth  {@default `2px`}
- * @cssprop {<color>}  --pf-c-button--m-control--hover--Color                     {@default `#151515`}
- * @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`}
- * @cssprop {<color>}  --pf-c-button--m-warning--active--BackgroundColor {@default `#c58c00`}
- * @cssprop {<color>}  --pf-c-button--m-warning--focus--Color            {@default `#151515`}
- * @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`}
- * @cssprop {<color>}  --pf-c-button--m-plain--hover--Color            {@default `#151515`}
- * @cssprop {<color>}  --pf-c-button--m-plain--focus--BackgroundColor  {@default `transparent`}
- * @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'`}
- */
+const styles = css `:host {\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  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#icon {\n  margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,\n      var(--pf-global--spacer--xs, 0.25rem));\n}\n\n#button {\n  display: inline-block;\n  color: var(--_button-color);\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  &::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  &.anchor {\n    text-decoration: none;\n    &::after {\n      pointer-events: all;\n    }\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]) #button {\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`;
 let PfButton = class PfButton extends LitElement {
     constructor() {
         super(...arguments);
         _PfButton_instances.add(this);
+        /** Disables the button */
+        this.disabled = false;
         /** Represents the state of a stateful button */
         this.loading = false;
-        /** Applies plain styles */
-        this.plain = false;
         /** Not as urgent as danger */
         this.warning = false;
         /**
@@ -145,6 +29,8 @@ let PfButton = class PfButton extends LitElement {
          * user data.
          */
         this.danger = false;
+        /** Applies plain styles */
+        this.plain = false;
         /**
          * Changes the style of the button.
          * - Primary: Used for the most important call to action on a page. Try to
@@ -158,55 +44,85 @@ let PfButton = class PfButton extends LitElement {
         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_internals.set(this, InternalsController.of(this, { role: this.variant === 'link' ? 'none' : '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;
     }
     willUpdate() {
         __classPrivateFieldGet(this, _PfButton_internals, "f").ariaLabel = this.label || null;
         __classPrivateFieldGet(this, _PfButton_internals, "f").ariaDisabled = String(!!this.disabled);
+        const isLink = this.variant === 'link' && this.href;
+        if (isLink) {
+            this.removeAttribute('tabindex');
+            __classPrivateFieldGet(this, _PfButton_internals, "f").role = 'none';
+        }
+        else {
+            this.tabIndex = 0;
+            __classPrivateFieldGet(this, _PfButton_internals, "f").role = 'button';
+        }
+    }
+    async formDisabledCallback() {
+        await this.updateComplete;
+        this.requestUpdate();
     }
     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 { warning, variant, danger, loading, plain, inline, block, size, href, target } = this;
         const disabled = __classPrivateFieldGet(this, _PfButton_instances, "a", _PfButton_disabled_get);
-        return html `
+        const content = html `
+      <slot id="icon"
+            part="icon"
+            name="icon"
+            ?hidden="${!hasIcon}">
+        <pf-icon role="presentation"
+                 icon="${ifDefined(this.icon)}"
+                 set="${ifDefined(this.iconSet)}"
+                 ?hidden="${!this.icon || this.loading}"></pf-icon>
+        <pf-spinner size="md"
+                    ?hidden="${!this.loading}"
+                    aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-spinner>
+      </slot>
+      <slot id="text"></slot>
+    `;
+        if (variant === 'link' && href) {
+            return html `
+        <a id="button"
+           href="${href}"
+           target="${ifDefined(target)}"
+           class="${classMap({
+                [variant]: true,
+                [size ?? '']: !!size,
+                anchor: true,
+                inline,
+                block,
+                danger,
+                disabled,
+                hasIcon,
+                loading,
+                plain,
+                warning,
+            })}">${content}</a>`;
+        }
+        else {
+            return html `
       <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();
+                [variant]: true,
+                [size ?? '']: !!size,
+                inline,
+                block,
+                danger,
+                disabled,
+                hasIcon,
+                loading,
+                plain,
+                warning,
+            })}">${content}</div>`;
+        }
     }
 };
 _PfButton_internals = new WeakMap();
@@ -254,24 +170,37 @@ PfButton.styles = [
     iconStyles,
     styles,
 ];
+PfButton.version = "4.0.0";
 __decorate([
-    property({ type: Boolean, reflect: true })
-], PfButton.prototype, "loading", void 0);
+    property({ reflect: true })
+], PfButton.prototype, "type", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], PfButton.prototype, "plain", void 0);
+    property()
+], PfButton.prototype, "label", void 0);
+__decorate([
+    property()
+], PfButton.prototype, "value", void 0);
+__decorate([
+    property()
+], PfButton.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfButton.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], PfButton.prototype, "warning", void 0);
+], PfButton.prototype, "loading", void 0);
 __decorate([
     property({ reflect: true })
 ], PfButton.prototype, "size", void 0);
 __decorate([
-    property({ attribute: 'icon-set' })
-], PfButton.prototype, "iconSet", void 0);
+    property({ type: Boolean, reflect: true })
+], PfButton.prototype, "warning", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfButton.prototype, "danger", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfButton.prototype, "plain", void 0);
 __decorate([
     property({ reflect: true })
 ], PfButton.prototype, "variant", void 0);
@@ -281,24 +210,18 @@ __decorate([
 __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);
+], PfButton.prototype, "icon", void 0);
 __decorate([
-    property()
-], PfButton.prototype, "value", void 0);
+    property({ attribute: 'icon-set' })
+], PfButton.prototype, "iconSet", void 0);
 __decorate([
-    property()
-], PfButton.prototype, "name", void 0);
+    property({ reflect: true })
+], PfButton.prototype, "href", void 0);
 __decorate([
-    property()
-], PfButton.prototype, "icon", void 0);
+    property({ reflect: true })
+], PfButton.prototype, "target", void 0);
 PfButton = __decorate([
     customElement('pf-button')
 ], PfButton);

package/pf-button/pf-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\n\nimport tokensStyles from './pf-button-tokens.css';\nimport iconStyles from './pf-button-icon.css';\n\nimport styles from './pf-button.css';\n\nexport type ButtonVariant = (\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'control'\n  | 'link'\n);\n\n/**\n * A **button** is a box area or text that communicates and triggers user actions when\n * clicked or selected. Buttons can be used to communicate and immediately trigger\n * actions a user can take in an application, like submitting a form, canceling a\n * process, or creating a new object. Buttons can also be used to take a user to a\n * new location, like another page inside of a web application, or an external site\n * such as help or documentation..\n * @summary Allows users to perform an action when triggered\n * @cssprop {<length>} --pf-c-button--FontSize   {@default `1rem`}\n * @cssprop            --pf-c-button--FontWeight {@default `400`}\n * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-button--PaddingTop    {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft   {@default `1rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight  {@default `1rem`}\n * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius  {@default `3px`}\n * @cssprop {<color>}  --pf-c-button--after--BorderColor         {@default `transparent`}\n * @cssprop {<length>} --pf-c-button--after--BorderRadius        {@default `3px`}\n * @cssprop {<length>} --pf-c-button--after--BorderWidth         {@default `1px`}\n * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth  {@default `2px`}\n * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth  {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--m-primary--Color                   {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--BackgroundColor         {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-primary--active--Color           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--active--BackgroundColor {@default `#004080`}\n * @cssprop {<color>}  --pf-c-button--m-primary--focus--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--focus--BackgroundColor  {@default `#004080`}\n * @cssprop {<color>}  --pf-c-button--m-primary--hover--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-primary--hover--BackgroundColor  {@default `#004080`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--Color                   {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--Color           {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--active--BorderColor     {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--Color            {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--focus--BorderColor      {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--Color            {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--hover--BorderColor      {@default `#06c`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--Color                   {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--Color           {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--active--BorderColor     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--focus--BorderColor      {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-tertiary--hover--BorderColor      {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-danger--Color                   {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--BackgroundColor         {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-danger--active--Color           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--active--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-danger--focus--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--focus--BackgroundColor  {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-danger--hover--Color            {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-danger--hover--BackgroundColor  {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--Color                   {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--BorderColor             {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--Color           {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--active--BorderColor     {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--Color            {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--focus--BorderColor      {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--Color            {@default `#a30000`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-secondary--m-danger--hover--BorderColor      {@default `#c9190b`}\n * @cssprop {<color>}  --pf-c-button--m-control--disabled--BackgroundColor        {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-button--m-control--BorderRadius                     {@default `0`}\n * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth               {@default `1px`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderTopColor            {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderRightColor          {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderBottomColor         {@default `#8a8d90`}\n * @cssprop {<color>}  --pf-c-button--m-control--after--BorderLeftColor           {@default `#f0f0f0`}\n * @cssprop {<color>}  --pf-c-button--m-control--Color                            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--BackgroundColor                  {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--Color                    {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--BackgroundColor          {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--active--BorderBottomColor        {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--active--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--Color                     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--BackgroundColor           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--focus--BorderBottomColor         {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--focus--after--BorderBottomWidth  {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--Color                     {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--BackgroundColor           {@default `#fff`}\n * @cssprop {<color>}  --pf-c-button--m-control--hover--BorderBottomColor         {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth  {@default `2px`}\n * @cssprop {<color>}  --pf-c-button--disabled--Color              {@default `#6a6e73`}\n * @cssprop {<color>}  --pf-c-button--disabled--BackgroundColor    {@default `#d2d2d2`}\n * @cssprop {<color>}  --pf-c-button--disabled--after--BorderColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-warning--Color                   {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--BackgroundColor         {@default `#f0ab00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--active--Color           {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--active--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--focus--BackgroundColor  {@default `#c58c00`}\n * @cssprop {<color>}  --pf-c-button--m-warning--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-warning--hover--BackgroundColor  {@default `#c58c00`}\n * @cssprop {<color>}  --pf-c-button--m-plain--BackgroundColor         {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--Color                   {@default `#6a6e73`}\n * @cssprop {<color>}  --pf-c-button--m-plain--hover--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--hover--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-plain--focus--BackgroundColor  {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--focus--Color            {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>}  --pf-c-button--m-plain--active--Color           {@default `#151515`}\n * @cssprop {<color>}  --pf-c-button--m-plain--disabled--Color           {@default `#d2d2d2`}\n * @cssprop {<color>}  --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}\n * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}\n */\n@customElement('pf-button')\nexport class PfButton extends LitElement {\n  static readonly formAssociated = true;\n\n  static readonly styles = [\n    tokensStyles,\n    iconStyles,\n    styles,\n  ];\n\n  /** Represents the state of a stateful button */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Applies plain styles */\n  @property({ type: Boolean, reflect: true }) plain = false;\n\n  /** Not as urgent as danger */\n  @property({ type: Boolean, reflect: true }) warning = false;\n\n  /** Changes the size of the button. */\n  @property({ reflect: true }) size?: 'small' | 'large';\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: 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  @property({ type: Boolean, reflect: true }) danger = false;\n\n  /**\n   * Changes the style of the button.\n   * - Primary: Used for the most important call to action on a page. Try to\n   *   limit primary buttons to one per page.\n   * - Secondary: Use secondary buttons for general actions on a page, that\n   *   don’t require as much emphasis as primary button actions. For example,\n   *   you can use secondary buttons where there are multiple actions, like in\n   *   toolbars or data lists.\n   * - Tertiary: Tertiary buttons are flexible and can be used as needed.\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'primary';\n\n  @property({ reflect: true, type: Boolean }) inline = false;\n\n  @property({ reflect: true, type: Boolean }) block = false;\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  #internals = InternalsController.of(this, { role: 'button' });\n\n  #slots = new SlotController(this, 'icon', null);\n\n  get #disabled() {\n    return this.disabled || this.#internals.formDisabled;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.tabIndex = 0;\n  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaLabel = this.label || null;\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n\n  protected override render() {\n    const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');\n    const { warning, variant, danger, loading, plain, inline, block, size } = this;\n    const disabled = this.#disabled;\n    return html`\n      <div id=\"button\"\n           class=\"${classMap({\n             [variant]: true,\n             [size ?? '']: !!size,\n             inline,\n             block,\n             danger,\n             disabled,\n             hasIcon,\n             loading,\n             plain,\n             warning,\n           })}\">\n        <slot id=\"icon\" part=\"icon\" name=\"icon\" ?hidden=\"${!hasIcon}\">\n          <pf-icon role=\"presentation\"\n                   icon=\"${ifDefined(this.icon)}\"\n                   set=\"${ifDefined(this.iconSet)}\"\n                   ?hidden=\"${!this.icon}\"></pf-icon>\n          <pf-spinner size=\"md\"\n                      ?hidden=\"${!this.loading}\"\n                      aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n        </slot>\n        <slot id=\"text\"></slot>\n      </div>\n    `;\n  }\n\n  async formDisabledCallback() {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  #onClick() {\n    if (!this.#disabled) {\n      switch (this.type) {\n        case 'reset':\n          return this.#internals.reset();\n        default:\n          return this.#internals.submit();\n      }\n    }\n  }\n\n  #onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case ' ':\n        event.preventDefault();\n        event.stopPropagation();\n        if (this.dispatchEvent(new MouseEvent('click', {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        }))) {\n          this.#onClick();\n        }\n        break;\n      case 'Enter':\n        if (this.dispatchEvent(new MouseEvent('click', {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        }))) {\n          this.#onClick();\n        }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-button': PfButton;\n  }\n}\n"]}
+{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\n\nimport tokensStyles from './pf-button-tokens.css';\nimport iconStyles from './pf-button-icon.css';\n\nimport styles from './pf-button.css';\n\nexport type ButtonVariant = (\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'control'\n  | 'link'\n);\n\n/**\n * A **button** is a box area or text that communicates and triggers user actions when\n * clicked or selected. Buttons can be used to communicate and immediately trigger\n * actions a user can take in an application, like submitting a form, canceling a\n * process, or creating a new object. Buttons can also be used to take a user to a\n * new location, like another page inside of a web application, or an external site\n * such as help or documentation..\n * @summary Allows users to perform an action when triggered\n * @cssprop {<length>} [--pf-c-button--FontSize=1rem]\n * @cssprop            [--pf-c-button--FontWeight=400]\n * @cssprop {<number>} [--pf-c-button--LineHeight=1.5]\n * @cssprop {<length>} [--pf-c-button--PaddingTop=0.375rem]\n * @cssprop {<length>} [--pf-c-button--PaddingLeft=1rem]\n * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.375rem]\n * @cssprop {<length>} [--pf-c-button--PaddingRight=1rem]\n * @cssprop {<length>|<percentage>} [--pf-c-button--BorderRadius=3px]\n * @cssprop {<color>}  [--pf-c-button--after--BorderColor=transparent]\n * @cssprop {<length>} [--pf-c-button--after--BorderRadius=3px]\n * @cssprop {<length>} [--pf-c-button--after--BorderWidth=1px]\n * @cssprop {<length>} [--pf-c-button--active--after--BorderWidth=2px]\n * @cssprop {<length>} [--pf-c-button--hover--after--BorderWidth=2px]\n * @cssprop {<length>} [--pf-c-button--focus--after--BorderWidth=2px]\n * @cssprop {<color>}  [--pf-c-button--m-primary--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-primary--BackgroundColor=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-primary--active--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-primary--active--BackgroundColor=#004080]\n * @cssprop {<color>}  [--pf-c-button--m-primary--focus--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-primary--focus--BackgroundColor=#004080]\n * @cssprop {<color>}  [--pf-c-button--m-primary--hover--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-primary--hover--BackgroundColor=#004080]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--Color=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--active--Color=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--active--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--active--BorderColor=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--Color=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--BorderColor=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--Color=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--BorderColor=#06c]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--BorderColor=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--BorderColor=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--BorderColor=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-danger--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-danger--BackgroundColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-danger--active--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-danger--active--BackgroundColor=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-danger--focus--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-danger--focus--BackgroundColor=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-danger--hover--Color=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-danger--hover--BackgroundColor=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--Color=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--BorderColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--Color=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--BorderColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--Color=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--BorderColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--Color=#a30000]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--BorderColor=#c9190b]\n * @cssprop {<color>}  [--pf-c-button--m-control--disabled--BackgroundColor=#f0f0f0]\n * @cssprop {<length>} [--pf-c-button--m-control--BorderRadius=0]\n * @cssprop {<length>} [--pf-c-button--m-control--after--BorderWidth=1px]\n * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderTopColor=#f0f0f0]\n * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderRightColor=#f0f0f0]\n * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderBottomColor=#8a8d90]\n * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderLeftColor=#f0f0f0]\n * @cssprop {<color>}  [--pf-c-button--m-control--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-control--BackgroundColor=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-control--active--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-control--active--BackgroundColor=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-control--active--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--active--after--BorderBottomWidth=2px]\n * @cssprop {<color>}  [--pf-c-button--m-control--focus--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-control--focus--BackgroundColor=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-control--focus--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--focus--after--BorderBottomWidth=2px]\n * @cssprop {<color>}  [--pf-c-button--m-control--hover--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-control--hover--BackgroundColor=#fff]\n * @cssprop {<color>}  [--pf-c-button--m-control--hover--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--hover--after--BorderBottomWidth=2px]\n * @cssprop {<color>}  [--pf-c-button--disabled--Color=#6a6e73]\n * @cssprop {<color>}  [--pf-c-button--disabled--BackgroundColor=#d2d2d2]\n * @cssprop {<color>}  [--pf-c-button--disabled--after--BorderColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-warning--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-warning--BackgroundColor=#f0ab00]\n * @cssprop {<color>}  [--pf-c-button--m-warning--active--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-warning--active--BackgroundColor=#c58c00]\n * @cssprop {<color>}  [--pf-c-button--m-warning--focus--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-warning--focus--BackgroundColor=#c58c00]\n * @cssprop {<color>}  [--pf-c-button--m-warning--hover--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-warning--hover--BackgroundColor=#c58c00]\n * @cssprop {<color>}  [--pf-c-button--m-plain--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-plain--Color=#6a6e73]\n * @cssprop {<color>}  [--pf-c-button--m-plain--hover--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-plain--hover--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-plain--focus--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-plain--focus--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-plain--active--BackgroundColor=transparent]\n * @cssprop {<color>}  [--pf-c-button--m-plain--active--Color=#151515]\n * @cssprop {<color>}  [--pf-c-button--m-plain--disabled--Color=#d2d2d2]\n * @cssprop {<color>}  [--pf-c-button--m-plain--disabled--BackgroundColor=transparent]\n * @attr {string} [loading-label='loading'] - ARIA label for the loading indicator\n */\n@customElement('pf-button')\nexport class PfButton extends LitElement {\n  static readonly formAssociated = true;\n\n  static readonly styles: CSSStyleSheet[] = [\n    tokensStyles,\n    iconStyles,\n    styles,\n  ];\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  /** Form value for the button */\n  @property() value?: string;\n\n  /** Form element name for the button */\n  @property() name?: string;\n\n  /** Disables the button */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /** Represents the state of a stateful button */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Changes the size of the button. */\n  @property({ reflect: true }) size?: 'small' | 'large';\n\n  /** Not as urgent as danger */\n  @property({ type: Boolean, reflect: true }) warning = false;\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  @property({ type: Boolean, reflect: true }) danger = false;\n\n  /** Applies plain styles */\n  @property({ type: Boolean, reflect: true }) plain = false;\n\n  /**\n   * Changes the style of the button.\n   * - Primary: Used for the most important call to action on a page. Try to\n   *   limit primary buttons to one per page.\n   * - Secondary: Use secondary buttons for general actions on a page, that\n   *   don’t require as much emphasis as primary button actions. For example,\n   *   you can use secondary buttons where there are multiple actions, like in\n   *   toolbars or data lists.\n   * - Tertiary: Tertiary buttons are flexible and can be used as needed.\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'primary';\n\n  @property({ reflect: true, type: Boolean }) inline = false;\n\n  @property({ reflect: true, type: Boolean }) block = false;\n\n  /** Shorthand for the `icon` slot, the value is icon name */\n  @property() icon?: string;\n\n  /** Icon set for the `icon` property */\n  @property({ attribute: 'icon-set' }) iconSet?: string;\n\n  /** Store the URL Link */\n  @property({ reflect: true }) href?: string;\n\n  /**  Redirecting the URL Link to new Tab */\n  @property({ reflect: true }) target?: string;\n\n  #internals = InternalsController.of(this, { role: this.variant === 'link' ? 'none' : 'button' });\n\n  #slots = new SlotController(this, 'icon', null);\n\n  get #disabled() {\n    return this.disabled || this.#internals.formDisabled;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaLabel = this.label || null;\n    this.#internals.ariaDisabled = String(!!this.disabled);\n    const isLink = this.variant === 'link' && this.href;\n    if (isLink) {\n      this.removeAttribute('tabindex');\n      this.#internals.role = 'none';\n    } else {\n      this.tabIndex = 0;\n      this.#internals.role = 'button';\n    }\n  }\n\n  async formDisabledCallback(): Promise<void> {\n    await this.updateComplete;\n    this.requestUpdate();\n  }\n\n  override render(): TemplateResult<1> {\n    const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');\n    const { warning, variant, danger, loading, plain, inline, block, size, href, target } = this;\n\n    const disabled = this.#disabled;\n\n    const content = html`\n      <slot id=\"icon\"\n            part=\"icon\"\n            name=\"icon\"\n            ?hidden=\"${!hasIcon}\">\n        <pf-icon role=\"presentation\"\n                 icon=\"${ifDefined(this.icon)}\"\n                 set=\"${ifDefined(this.iconSet)}\"\n                 ?hidden=\"${!this.icon || this.loading}\"></pf-icon>\n        <pf-spinner size=\"md\"\n                    ?hidden=\"${!this.loading}\"\n                    aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n      </slot>\n      <slot id=\"text\"></slot>\n    `;\n\n    if (variant === 'link' && href) {\n      return html`\n        <a id=\"button\"\n           href=\"${href}\"\n           target=\"${ifDefined(target)}\"\n           class=\"${classMap({\n                        [variant]: true,\n                        [size ?? '']: !!size,\n                        anchor: true,\n                        inline,\n                        block,\n                        danger,\n                        disabled,\n                        hasIcon,\n                        loading,\n                        plain,\n                        warning,\n                      })}\">${content}</a>`;\n    } else {\n      return html`\n      <div id=\"button\"\n           class=\"${classMap({\n             [variant]: true,\n             [size ?? '']: !!size,\n             inline,\n             block,\n             danger,\n             disabled,\n             hasIcon,\n             loading,\n             plain,\n             warning,\n           })}\">${content}</div>`;\n    }\n  }\n\n  #onClick() {\n    if (!this.#disabled) {\n      switch (this.type) {\n        case 'reset':\n          return this.#internals.reset();\n        default:\n          return this.#internals.submit();\n      }\n    }\n  }\n\n  #onKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case ' ':\n        event.preventDefault();\n        event.stopPropagation();\n        if (this.dispatchEvent(new MouseEvent('click', {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        }))) {\n          this.#onClick();\n        }\n        break;\n      case 'Enter':\n        if (this.dispatchEvent(new MouseEvent('click', {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        }))) {\n          this.#onClick();\n        }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-button': PfButton;\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-button';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-button.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pf-button.e2e.js","sourceRoot":"","sources":["pf-button.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-button';\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"]}
+{"version":3,"file":"pf-button.e2e.js","sourceRoot":"","sources":["pf-button.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,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;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-button';\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  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}