@patternfly/pfe-button - npm Package Compare versions

Comparing version 1.0.0-prerelease.56 to 1.0.0

dist/pfe-button.js

 import PFElement from '../../pfelement/dist/pfelement.js';
 
 /*!
- * PatternFly Elements: PfeButton 1.0.0-prerelease.39
+ * PatternFly Elements: PfeButton 1.0.0
  * @license
@@ -53,19 +53,20 @@ * Copyright 2020 Red Hat, Inc.
 class PfeButton extends PFElement {
+
+  // Injected at build-time
   static get version() {
-    return "1.0.0-prerelease.39";
+    return "1.0.0";
   }
 
+  // Injected at build-time
   get html() {
-    return `<style>:host{display:inline-block}:host([hidden]){display:none}:host([pfe-variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:16px;font-size:var(--pfe-button--FontSize,var(--pfe-theme--font-size,16px));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);padding:calc(16px / 2) 16px;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,16px)/ 2) var(--pfe-theme--container-padding,16px));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([pfe-variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:"";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([pfe-variant=primary]) button:focus,:host([pfe-variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([pfe-variant=secondary]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--ui-accent, #06c);--pfe-button__after--BorderColor:var(--pfe-theme--color--ui-accent, #06c);--pfe-button__after--Border--hover:var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)}:host([pfe-variant=tertiary]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--text, #151515);--pfe-button__after--BorderColor:var(--pfe-theme--color--text, #151515);--pfe-button__after--Border--hover:var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)}:host([pfe-variant=danger]){--pfe-button--BackgroundColor:var(--pfe-theme--color--feedback--critical--lighter, #c9190b);--pfe-button--BackgroundColor--hover:var(--pfe-theme--color--feedback--critical, #a30000)}:host([pfe-variant=control]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--text, #151515);--pfe-button--BorderRadius:0;--pfe-button__after--BorderColor:var(--pfe-theme--color--ui--border--lightest, #f0f0f0);--pfe-button__after--BorderColor--hover:var(--pfe-theme--color--ui--border--lightest, #f0f0f0)}:host([pfe-variant=control]) button::after{border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([pfe-variant=control]) button:focus::after,:host([pfe-variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([pfe-variant=control][disabled]){--pfe-button--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0)}:host([disabled]){--pfe-button--BackgroundColor:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-button--BackgroundColor--hover:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-button--Color:var(--pfe-theme--color--ui-disabled--text, #6a6e73);--pfe-button__after--Border:0;--pfe-button__after--Border--hover:0;pointer-events:none}
-/*# sourceMappingURL=pfe-button.min.css.map */
-</style><span id="internalBtn"></span>`;
+    return `
+<style>:host{display:inline-block}:host([hidden]){display:none}:host([variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:16px;font-size:var(--pfe-button--FontSize,var(--pfe-theme--font-size,16px));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);padding:calc(16px / 2) 16px;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,16px)/ 2) var(--pfe-theme--container-padding,16px));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:"";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([variant=danger]) button{background-color:#c9190b;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--feedback--critical--lighter,#c9190b))}:host([variant=danger]) button:focus,:host([variant=danger]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000))}:host([variant=control]) button,:host([variant=secondary]) button,:host([variant=tertiary]) button{background-color:transparent;background-color:var(--pfe-button--BackgroundColor,transparent)}:host([variant=control]) button:focus,:host([variant=control]) button:hover,:host([variant=secondary]) button:focus,:host([variant=secondary]) button:hover,:host([variant=tertiary]) button:focus,:host([variant=tertiary]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, transparent);--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent))}:host([variant=secondary]) button{color:#06c;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=secondary]) button::after{border-color:#06c;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=tertiary]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515))}:host([variant=tertiary]) button::after{border-color:#151515;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--text,#151515))}:host([variant=control]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515));border-radius:0;border-radius:var(--pfe-button--BorderRadius,0)}:host([variant=control]) button:focus,:host([variant=control]) button:hover{--pfe-button__after--BorderColor:var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0))}:host([variant=control]) button:focus::after,:host([variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([variant=control]) button::after{border-color:#f0f0f0;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui--border--lightest,#f0f0f0));border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([variant=control][disabled]) button{background-color:#f0f0f0;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--surface--lighter,#f0f0f0))}:host([disabled]) button{background-color:#d2d2d2;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-disabled,#d2d2d2));color:#6a6e73;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-disabled--text,#6a6e73));pointer-events:none}:host([disabled]) button::after{border:0;border:var(--pfe-button__after--Border,0)}:host([disabled]) button:focus,:host([disabled]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, 0)} /*# sourceMappingURL=pfe-button.min.css.map */</style>
+<span id="internalBtn"></span>`;
   }
 
-  static get properties() {
-    return {"variant":{"title":"Style variant","type":"string","prefixed":true,"enum":["primary","secondary","tertiary","danger","control"]}};
-  }
-
+  // Injected at build-time
   static get slots() {
     return {"default":{"title":"Default slot","type":"array","namedSlot":false,"items":{"oneOf":[{"$ref":"button"}]}}};
   }
+
   static get tag() {
@@ -87,6 +88,2 @@ return "pfe-button";
 
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-
   static get events() {
@@ -102,4 +99,21 @@ return {
 
-  static get observedAttributes() {
-    return ["disabled"];
+  static get properties() {
+    return {
+      variant: {
+        title: "Style variant",
+        type: String,
+        values: ["primary", "secondary", "tertiary", "danger", "control"]
+      },
+      pfeVariant: {
+        type: String,
+        values: ["primary", "secondary", "tertiary", "danger", "control"],
+        alias: "variant"
+      },
+      disabled: {
+        title: "Disabled",
+        type: Boolean,
+        prefix: false,
+        observer: "_disabledChanged"
+      }
+    };
   }
@@ -121,9 +135,10 @@
 
+  get _externalBtn() {
+    return this.querySelector("button");
+  }
+
   connectedCallback() {
     super.connectedCallback();
-    this._externalBtn = this.querySelector("button");
 
-    if (this.children.length) {
-      this._init();
-    }
+    if (this.hasLightDOM()) this._init();
 
@@ -133,6 +148,3 @@ this._observer.observe(this, parentObserverConfig);
     if (this._externalBtn) {
-      this._externalBtnObserver.observe(
-        this._externalBtn,
-        externalBtnObserverConfig
-      );
+      this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);
     }
@@ -142,2 +154,4 @@ }
   disconnectedCallback() {
+    super.disconnectedCallback();
+
     this.removeEventListener("click", this._clickHandler);
@@ -148,17 +162,11 @@ this._observer.disconnect();
 
-  attributeChangedCallback(attr, oldVal, newVal) {
-    super.attributeChangedCallback(attr, oldVal, newVal);
+  _disabledChanged(oldVal, newVal) {
+    if (!this._externalBtn) {
+      return;
+    }
 
-    switch (attr) {
-      case "disabled":
-        if (!this._externalBtn) {
-          return;
-        }
-
-        if (this.disabled) {
-          this._externalBtn.setAttribute("disabled", "");
-        } else {
-          this._externalBtn.removeAttribute("disabled");
-        }
-        break;
+    if (newVal) {
+      this._externalBtn.setAttribute("disabled", "");
+    } else {
+      this._externalBtn.removeAttribute("disabled");
     }
@@ -178,6 +186,6 @@ }
 
+    // If the external button has a disabled attribute
     if (this._externalBtn.hasAttribute("disabled")) {
+      // Set it on the wrapper too
       this.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("disabled");
     }
@@ -193,6 +201,3 @@
     this._internalBtnContainer.innerHTML = clone.outerHTML;
-    this._externalBtnObserver.observe(
-      this._externalBtn,
-      externalBtnObserverConfig
-    );
+    this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);
 
@@ -203,11 +208,8 @@ this._externalBtn.addEventListener("click", this._externalBtnClickHandler);
   _isValidLightDom() {
-    if (!this.children.length) {
-      console.warn(`${PfeButton.tag}: You must have a button in the light DOM`);
+    if (!this.hasLightDOM()) {
+      this.warn(`You must have a button in the light DOM`);
       return false;
     }
-
     if (this.children[0].tagName !== "BUTTON") {
-      console.warn(
-        `${PfeButton.tag}: The only child in the light DOM must be a button tag`
-      );
+      this.warn(`The only child in the light DOM must be a button tag`);
 
@@ -221,3 +223,3 @@ return false;
   // when the parent changes, make sure the light DOM is valid,
-  // set the _externalBtn, and initialize the component
+  // initialize the component
   _parentObserverHandler() {
@@ -228,3 +230,2 @@ if (!this._isValidLightDom()) {
 
-    this._externalBtn = this.querySelector("button");
     this._init();
@@ -231,0 +232,0 @@ }

dist/pfe-button.json

@@ -30,14 +30,2 @@ {
     },
-    "attributes": {
-      "title": "Attributes",
-      "type": "object",
-      "properties": {
-        "variant": {
-          "title": "Style variant",
-          "type": "string",
-          "prefixed": true,
-          "enum": ["primary", "secondary", "tertiary", "danger", "control"]
-        }
-      }
-    },
     "events": {
@@ -44,0 +32,0 @@ "title": "Events",

dist/pfe-button.min.js

 import t from"../../pfelement/dist/pfelement.min.js";
 /*!
- * PatternFly Elements: PfeButton 1.0.0-prerelease.39
+ * PatternFly Elements: PfeButton 1.0.0
  * @license
@@ -26,3 +26,3 @@ * Copyright 2020 Red Hat, Inc.
 */
-const e={childList:!0},r={characterData:!0,attributes:!0,subtree:!0,childList:!0},o=["style"];class n extends t{static get version(){return"1.0.0-prerelease.39"}get html(){return'<style>:host{display:inline-block}:host([hidden]){display:none}:host([pfe-variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:16px;font-size:var(--pfe-button--FontSize,var(--pfe-theme--font-size,16px));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);padding:calc(16px / 2) 16px;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,16px)/ 2) var(--pfe-theme--container-padding,16px));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([pfe-variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:"";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([pfe-variant=primary]) button:focus,:host([pfe-variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([pfe-variant=secondary]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--ui-accent, #06c);--pfe-button__after--BorderColor:var(--pfe-theme--color--ui-accent, #06c);--pfe-button__after--Border--hover:var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)}:host([pfe-variant=tertiary]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--text, #151515);--pfe-button__after--BorderColor:var(--pfe-theme--color--text, #151515);--pfe-button__after--Border--hover:var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)}:host([pfe-variant=danger]){--pfe-button--BackgroundColor:var(--pfe-theme--color--feedback--critical--lighter, #c9190b);--pfe-button--BackgroundColor--hover:var(--pfe-theme--color--feedback--critical, #a30000)}:host([pfe-variant=control]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--text, #151515);--pfe-button--BorderRadius:0;--pfe-button__after--BorderColor:var(--pfe-theme--color--ui--border--lightest, #f0f0f0);--pfe-button__after--BorderColor--hover:var(--pfe-theme--color--ui--border--lightest, #f0f0f0)}:host([pfe-variant=control]) button::after{border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([pfe-variant=control]) button:focus::after,:host([pfe-variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([pfe-variant=control][disabled]){--pfe-button--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0)}:host([disabled]){--pfe-button--BackgroundColor:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-button--BackgroundColor--hover:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-button--Color:var(--pfe-theme--color--ui-disabled--text, #6a6e73);--pfe-button__after--Border:0;--pfe-button__after--Border--hover:0;pointer-events:none}\n/*# sourceMappingURL=pfe-button.min.css.map */\n</style><span id="internalBtn"></span>'}static get properties(){return{variant:{title:"Style variant",type:"string",prefixed:!0,enum:["primary","secondary","tertiary","danger","control"]}}}static get slots(){return{default:{title:"Default slot",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"button"}]}}}}static get tag(){return"pfe-button"}get schemaUrl(){return"pfe-button.json"}get templateUrl(){return"pfe-button.html"}get styleUrl(){return"pfe-button.scss"}get disabled(){return this.hasAttribute("disabled")}static get events(){return{click:`${this.tag}:click`}}static get PfeType(){return t.PfeTypes.Content}static get observedAttributes(){return["disabled"]}constructor(){super(n,{type:n.PfeType}),this._init=this._init.bind(this),this._parentObserverHandler=this._parentObserverHandler.bind(this),this._clickHandler=this._clickHandler.bind(this),this._internalBtnContainer=this.shadowRoot.querySelector("#internalBtn"),this._observer=new MutationObserver(this._parentObserverHandler),this._externalBtnClickHandler=this._externalBtnClickHandler.bind(this),this._externalBtnObserver=new MutationObserver(this._init),this.addEventListener("click",this._clickHandler)}connectedCallback(){super.connectedCallback(),this._externalBtn=this.querySelector("button"),this.children.length&&this._init(),this._observer.observe(this,e),this._externalBtn&&this._externalBtnObserver.observe(this._externalBtn,r)}disconnectedCallback(){this.removeEventListener("click",this._clickHandler),this._observer.disconnect(),this._externalBtnObserver.disconnect()}attributeChangedCallback(t,e,r){switch(super.attributeChangedCallback(t,e,r),t){case"disabled":if(!this._externalBtn)return;this.disabled?this._externalBtn.setAttribute("disabled",""):this._externalBtn.removeAttribute("disabled")}}_init(){if(!this._isValidLightDom())return;if(!this._externalBtn)return;this._externalBtnObserver.disconnect(),this._externalBtn.hasAttribute("disabled")?this.setAttribute("disabled",""):this.removeAttribute("disabled");const t=this._externalBtn.cloneNode(!0);o.forEach(e=>{t.hasAttribute&&t.removeAttribute(e)}),this._internalBtnContainer.innerHTML=t.outerHTML,this._externalBtnObserver.observe(this._externalBtn,r),this._externalBtn.addEventListener("click",this._externalBtnClickHandler)}_isValidLightDom(){return this.children.length?"BUTTON"===this.children[0].tagName||(console.warn(`${n.tag}: The only child in the light DOM must be a button tag`),!1):(console.warn(`${n.tag}: You must have a button in the light DOM`),!1)}_parentObserverHandler(){this._isValidLightDom()&&(this._externalBtn=this.querySelector("button"),this._init())}_clickHandler(){this._externalBtn.click()}_externalBtnClickHandler(){this.emitEvent(n.events.click)}}t.create(n);export default n;
+const r={childList:!0},e={characterData:!0,attributes:!0,subtree:!0,childList:!0},o=["style"];class a extends t{static get version(){return"1.0.0"}get html(){return'\n<style>:host{display:inline-block}:host([hidden]){display:none}:host([variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:16px;font-size:var(--pfe-button--FontSize,var(--pfe-theme--font-size,16px));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);padding:calc(16px / 2) 16px;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,16px)/ 2) var(--pfe-theme--container-padding,16px));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:"";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([variant=danger]) button{background-color:#c9190b;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--feedback--critical--lighter,#c9190b))}:host([variant=danger]) button:focus,:host([variant=danger]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000))}:host([variant=control]) button,:host([variant=secondary]) button,:host([variant=tertiary]) button{background-color:transparent;background-color:var(--pfe-button--BackgroundColor,transparent)}:host([variant=control]) button:focus,:host([variant=control]) button:hover,:host([variant=secondary]) button:focus,:host([variant=secondary]) button:hover,:host([variant=tertiary]) button:focus,:host([variant=tertiary]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, transparent);--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent))}:host([variant=secondary]) button{color:#06c;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=secondary]) button::after{border-color:#06c;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=tertiary]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515))}:host([variant=tertiary]) button::after{border-color:#151515;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--text,#151515))}:host([variant=control]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515));border-radius:0;border-radius:var(--pfe-button--BorderRadius,0)}:host([variant=control]) button:focus,:host([variant=control]) button:hover{--pfe-button__after--BorderColor:var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0))}:host([variant=control]) button:focus::after,:host([variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([variant=control]) button::after{border-color:#f0f0f0;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui--border--lightest,#f0f0f0));border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([variant=control][disabled]) button{background-color:#f0f0f0;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--surface--lighter,#f0f0f0))}:host([disabled]) button{background-color:#d2d2d2;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-disabled,#d2d2d2));color:#6a6e73;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-disabled--text,#6a6e73));pointer-events:none}:host([disabled]) button::after{border:0;border:var(--pfe-button__after--Border,0)}:host([disabled]) button:focus,:host([disabled]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, 0)} /*# sourceMappingURL=pfe-button.min.css.map */</style>\n<span id="internalBtn"></span>'}static get slots(){return{default:{title:"Default slot",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"button"}]}}}}static get tag(){return"pfe-button"}get schemaUrl(){return"pfe-button.json"}get templateUrl(){return"pfe-button.html"}get styleUrl(){return"pfe-button.scss"}static get events(){return{click:`${this.tag}:click`}}static get PfeType(){return t.PfeTypes.Content}static get properties(){return{variant:{title:"Style variant",type:String,values:["primary","secondary","tertiary","danger","control"]},pfeVariant:{type:String,values:["primary","secondary","tertiary","danger","control"],alias:"variant"},disabled:{title:"Disabled",type:Boolean,prefix:!1,observer:"_disabledChanged"}}}constructor(){super(a,{type:a.PfeType}),this._init=this._init.bind(this),this._parentObserverHandler=this._parentObserverHandler.bind(this),this._clickHandler=this._clickHandler.bind(this),this._internalBtnContainer=this.shadowRoot.querySelector("#internalBtn"),this._observer=new MutationObserver(this._parentObserverHandler),this._externalBtnClickHandler=this._externalBtnClickHandler.bind(this),this._externalBtnObserver=new MutationObserver(this._init),this.addEventListener("click",this._clickHandler)}get _externalBtn(){return this.querySelector("button")}connectedCallback(){super.connectedCallback(),this.hasLightDOM()&&this._init(),this._observer.observe(this,r),this._externalBtn&&this._externalBtnObserver.observe(this._externalBtn,e)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._clickHandler),this._observer.disconnect(),this._externalBtnObserver.disconnect()}_disabledChanged(t,r){this._externalBtn&&(r?this._externalBtn.setAttribute("disabled",""):this._externalBtn.removeAttribute("disabled"))}_init(){if(!this._isValidLightDom())return;if(!this._externalBtn)return;this._externalBtnObserver.disconnect(),this._externalBtn.hasAttribute("disabled")&&this.setAttribute("disabled","");const t=this._externalBtn.cloneNode(!0);o.forEach(r=>{t.hasAttribute&&t.removeAttribute(r)}),this._internalBtnContainer.innerHTML=t.outerHTML,this._externalBtnObserver.observe(this._externalBtn,e),this._externalBtn.addEventListener("click",this._externalBtnClickHandler)}_isValidLightDom(){return this.hasLightDOM()?"BUTTON"===this.children[0].tagName||(this.warn("The only child in the light DOM must be a button tag"),!1):(this.warn("You must have a button in the light DOM"),!1)}_parentObserverHandler(){this._isValidLightDom()&&this._init()}_clickHandler(){this._externalBtn.click()}_externalBtnClickHandler(){this.emitEvent(a.events.click)}}t.create(a);export default a;
 //# sourceMappingURL=pfe-button.min.js.map

dist/pfe-button.umd.js

@@ -83,3 +83,3 @@ (function (global, factory) {
   /*!
-   * PatternFly Elements: PfeButton 1.0.0-prerelease.39
+   * PatternFly Elements: PfeButton 1.0.0
    * @license
@@ -136,5 +136,11 @@ * Copyright 2020 Red Hat, Inc.
       key: "html",
+
+
+      // Injected at build-time
       get: function get$$1() {
-        return "<style>:host{display:inline-block}:host([hidden]){display:none}:host([pfe-variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:16px;font-size:var(--pfe-button--FontSize,var(--pfe-theme--font-size,16px));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);padding:calc(16px / 2) 16px;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,16px)/ 2) var(--pfe-theme--container-padding,16px));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([pfe-variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([pfe-variant=primary]) button:focus,:host([pfe-variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([pfe-variant=secondary]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--ui-accent, #06c);--pfe-button__after--BorderColor:var(--pfe-theme--color--ui-accent, #06c);--pfe-button__after--Border--hover:var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)}:host([pfe-variant=tertiary]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--text, #151515);--pfe-button__after--BorderColor:var(--pfe-theme--color--text, #151515);--pfe-button__after--Border--hover:var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)}:host([pfe-variant=danger]){--pfe-button--BackgroundColor:var(--pfe-theme--color--feedback--critical--lighter, #c9190b);--pfe-button--BackgroundColor--hover:var(--pfe-theme--color--feedback--critical, #a30000)}:host([pfe-variant=control]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--text, #151515);--pfe-button--BorderRadius:0;--pfe-button__after--BorderColor:var(--pfe-theme--color--ui--border--lightest, #f0f0f0);--pfe-button__after--BorderColor--hover:var(--pfe-theme--color--ui--border--lightest, #f0f0f0)}:host([pfe-variant=control]) button::after{border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([pfe-variant=control]) button:focus::after,:host([pfe-variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([pfe-variant=control][disabled]){--pfe-button--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0)}:host([disabled]){--pfe-button--BackgroundColor:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-button--BackgroundColor--hover:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-button--Color:var(--pfe-theme--color--ui-disabled--text, #6a6e73);--pfe-button__after--Border:0;--pfe-button__after--Border--hover:0;pointer-events:none}\n/*# sourceMappingURL=pfe-button.min.css.map */\n</style><span id=\"internalBtn\"></span>";
+        return "\n<style>:host{display:inline-block}:host([hidden]){display:none}:host([variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:16px;font-size:var(--pfe-button--FontSize,var(--pfe-theme--font-size,16px));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);padding:calc(16px / 2) 16px;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,16px)/ 2) var(--pfe-theme--container-padding,16px));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([variant=danger]) button{background-color:#c9190b;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--feedback--critical--lighter,#c9190b))}:host([variant=danger]) button:focus,:host([variant=danger]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000))}:host([variant=control]) button,:host([variant=secondary]) button,:host([variant=tertiary]) button{background-color:transparent;background-color:var(--pfe-button--BackgroundColor,transparent)}:host([variant=control]) button:focus,:host([variant=control]) button:hover,:host([variant=secondary]) button:focus,:host([variant=secondary]) button:hover,:host([variant=tertiary]) button:focus,:host([variant=tertiary]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, transparent);--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent))}:host([variant=secondary]) button{color:#06c;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=secondary]) button::after{border-color:#06c;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=tertiary]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515))}:host([variant=tertiary]) button::after{border-color:#151515;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--text,#151515))}:host([variant=control]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515));border-radius:0;border-radius:var(--pfe-button--BorderRadius,0)}:host([variant=control]) button:focus,:host([variant=control]) button:hover{--pfe-button__after--BorderColor:var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0))}:host([variant=control]) button:focus::after,:host([variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([variant=control]) button::after{border-color:#f0f0f0;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui--border--lightest,#f0f0f0));border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([variant=control][disabled]) button{background-color:#f0f0f0;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--surface--lighter,#f0f0f0))}:host([disabled]) button{background-color:#d2d2d2;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-disabled,#d2d2d2));color:#6a6e73;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-disabled--text,#6a6e73));pointer-events:none}:host([disabled]) button::after{border:0;border:var(--pfe-button__after--Border,0)}:host([disabled]) button:focus,:host([disabled]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, 0)} /*# sourceMappingURL=pfe-button.min.css.map */</style>\n<span id=\"internalBtn\"></span>";
       }
+
+      // Injected at build-time
+
     }, {
@@ -155,18 +161,11 @@ key: "schemaUrl",
       }
-    }, {
-      key: "disabled",
-      get: function get$$1() {
-        return this.hasAttribute("disabled");
-      }
     }], [{
       key: "version",
+
+
+      // Injected at build-time
       get: function get$$1() {
-        return "1.0.0-prerelease.39";
+        return "1.0.0";
       }
     }, {
-      key: "properties",
-      get: function get$$1() {
-        return { "variant": { "title": "Style variant", "type": "string", "prefixed": true, "enum": ["primary", "secondary", "tertiary", "danger", "control"] } };
-      }
-    }, {
       key: "slots",
@@ -194,5 +193,22 @@ get: function get$$1() {
     }, {
-      key: "observedAttributes",
+      key: "properties",
       get: function get$$1() {
-        return ["disabled"];
+        return {
+          variant: {
+            title: "Style variant",
+            type: String,
+            values: ["primary", "secondary", "tertiary", "danger", "control"]
+          },
+          pfeVariant: {
+            type: String,
+            values: ["primary", "secondary", "tertiary", "danger", "control"],
+            alias: "variant"
+          },
+          disabled: {
+            title: "Disabled",
+            type: Boolean,
+            prefix: false,
+            observer: "_disabledChanged"
+          }
+        };
       }
@@ -222,7 +238,4 @@ }]);
         get(PfeButton.prototype.__proto__ || Object.getPrototypeOf(PfeButton.prototype), "connectedCallback", this).call(this);
-        this._externalBtn = this.querySelector("button");
 
-        if (this.children.length) {
-          this._init();
-        }
+        if (this.hasLightDOM()) this._init();
 
@@ -238,2 +251,4 @@ this._observer.observe(this, parentObserverConfig);
       value: function disconnectedCallback() {
+        get(PfeButton.prototype.__proto__ || Object.getPrototypeOf(PfeButton.prototype), "disconnectedCallback", this).call(this);
+
         this.removeEventListener("click", this._clickHandler);
@@ -244,18 +259,12 @@ this._observer.disconnect();
     }, {
-      key: "attributeChangedCallback",
-      value: function attributeChangedCallback(attr, oldVal, newVal) {
-        get(PfeButton.prototype.__proto__ || Object.getPrototypeOf(PfeButton.prototype), "attributeChangedCallback", this).call(this, attr, oldVal, newVal);
+      key: "_disabledChanged",
+      value: function _disabledChanged(oldVal, newVal) {
+        if (!this._externalBtn) {
+          return;
+        }
 
-        switch (attr) {
-          case "disabled":
-            if (!this._externalBtn) {
-              return;
-            }
-
-            if (this.disabled) {
-              this._externalBtn.setAttribute("disabled", "");
-            } else {
-              this._externalBtn.removeAttribute("disabled");
-            }
-            break;
+        if (newVal) {
+          this._externalBtn.setAttribute("disabled", "");
+        } else {
+          this._externalBtn.removeAttribute("disabled");
         }
@@ -276,6 +285,6 @@ }
 
+        // If the external button has a disabled attribute
         if (this._externalBtn.hasAttribute("disabled")) {
+          // Set it on the wrapper too
           this.setAttribute("disabled", "");
-        } else {
-          this.removeAttribute("disabled");
         }
@@ -298,9 +307,8 @@
       value: function _isValidLightDom() {
-        if (!this.children.length) {
-          console.warn(PfeButton.tag + ": You must have a button in the light DOM");
+        if (!this.hasLightDOM()) {
+          this.warn("You must have a button in the light DOM");
           return false;
         }
-
         if (this.children[0].tagName !== "BUTTON") {
-          console.warn(PfeButton.tag + ": The only child in the light DOM must be a button tag");
+          this.warn("The only child in the light DOM must be a button tag");
 
@@ -314,3 +322,3 @@ return false;
       // when the parent changes, make sure the light DOM is valid,
-      // set the _externalBtn, and initialize the component
+      // initialize the component
 
@@ -324,3 +332,2 @@ }, {
 
-        this._externalBtn = this.querySelector("button");
         this._init();
@@ -342,2 +349,7 @@ }
       }
+    }, {
+      key: "_externalBtn",
+      get: function get$$1() {
+        return this.querySelector("button");
+      }
     }]);
@@ -344,0 +356,0 @@ return PfeButton;

dist/pfe-button.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd"],t):e.PfeButton=t(e.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(e,t,r){return t&&o(e.prototype,t),r&&o(e,r),e};function o(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function i(e,t,r){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,t);if(void 0===o){var n=Object.getPrototypeOf(e);return null===n?void 0:i(n,t,r)}if("value"in o)return o.value;var a=o.get;return void 0!==a?a.call(r):void 0}var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},a={childList:!0},l={characterData:!0,attributes:!0,subtree:!0,childList:!0},u=["style"],f=(function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(s,e),r(s,[{key:"html",get:function(){return'<style>:host{display:inline-block}:host([hidden]){display:none}:host([pfe-variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:16px;font-size:var(--pfe-button--FontSize,var(--pfe-theme--font-size,16px));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);padding:calc(16px / 2) 16px;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,16px)/ 2) var(--pfe-theme--container-padding,16px));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([pfe-variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:"";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([pfe-variant=primary]) button:focus,:host([pfe-variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([pfe-variant=secondary]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--ui-accent, #06c);--pfe-button__after--BorderColor:var(--pfe-theme--color--ui-accent, #06c);--pfe-button__after--Border--hover:var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)}:host([pfe-variant=tertiary]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--text, #151515);--pfe-button__after--BorderColor:var(--pfe-theme--color--text, #151515);--pfe-button__after--Border--hover:var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)}:host([pfe-variant=danger]){--pfe-button--BackgroundColor:var(--pfe-theme--color--feedback--critical--lighter, #c9190b);--pfe-button--BackgroundColor--hover:var(--pfe-theme--color--feedback--critical, #a30000)}:host([pfe-variant=control]){--pfe-button--BackgroundColor:transparent;--pfe-button--BackgroundColor--hover:transparent;--pfe-button--Color:var(--pfe-theme--color--text, #151515);--pfe-button--BorderRadius:0;--pfe-button__after--BorderColor:var(--pfe-theme--color--ui--border--lightest, #f0f0f0);--pfe-button__after--BorderColor--hover:var(--pfe-theme--color--ui--border--lightest, #f0f0f0)}:host([pfe-variant=control]) button::after{border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([pfe-variant=control]) button:focus::after,:host([pfe-variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([pfe-variant=control][disabled]){--pfe-button--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0)}:host([disabled]){--pfe-button--BackgroundColor:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-button--BackgroundColor--hover:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-button--Color:var(--pfe-theme--color--ui-disabled--text, #6a6e73);--pfe-button__after--Border:0;--pfe-button__after--Border--hover:0;pointer-events:none}\n/*# sourceMappingURL=pfe-button.min.css.map */\n</style><span id="internalBtn"></span>'}},{key:"schemaUrl",get:function(){return"pfe-button.json"}},{key:"templateUrl",get:function(){return"pfe-button.html"}},{key:"styleUrl",get:function(){return"pfe-button.scss"}},{key:"disabled",get:function(){return this.hasAttribute("disabled")}}],[{key:"version",get:function(){return"1.0.0-prerelease.39"}},{key:"properties",get:function(){return{variant:{title:"Style variant",type:"string",prefixed:!0,enum:["primary","secondary","tertiary","danger","control"]}}}},{key:"slots",get:function(){return{default:{title:"Default slot",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"button"}]}}}}},{key:"tag",get:function(){return"pfe-button"}},{key:"events",get:function(){return{click:this.tag+":click"}}},{key:"PfeType",get:function(){return e.PfeTypes.Content}},{key:"observedAttributes",get:function(){return["disabled"]}}]),r(s,[{key:"connectedCallback",value:function(){i(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"connectedCallback",this).call(this),this._externalBtn=this.querySelector("button"),this.children.length&&this._init(),this._observer.observe(this,a),this._externalBtn&&this._externalBtnObserver.observe(this._externalBtn,l)}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler),this._observer.disconnect(),this._externalBtnObserver.disconnect()}},{key:"attributeChangedCallback",value:function(e,t,r){switch(i(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"attributeChangedCallback",this).call(this,e,t,r),e){case"disabled":if(!this._externalBtn)return;this.disabled?this._externalBtn.setAttribute("disabled",""):this._externalBtn.removeAttribute("disabled")}}},{key:"_init",value:function(){var t;this._isValidLightDom()&&this._externalBtn&&(this._externalBtnObserver.disconnect(),this._externalBtn.hasAttribute("disabled")?this.setAttribute("disabled",""):this.removeAttribute("disabled"),t=this._externalBtn.cloneNode(!0),u.forEach(function(e){t.hasAttribute&&t.removeAttribute(e)}),this._internalBtnContainer.innerHTML=t.outerHTML,this._externalBtnObserver.observe(this._externalBtn,l),this._externalBtn.addEventListener("click",this._externalBtnClickHandler))}},{key:"_isValidLightDom",value:function(){return this.children.length?"BUTTON"===this.children[0].tagName||(console.warn(s.tag+": The only child in the light DOM must be a button tag"),!1):(console.warn(s.tag+": You must have a button in the light DOM"),!1)}},{key:"_parentObserverHandler",value:function(){this._isValidLightDom()&&(this._externalBtn=this.querySelector("button"),this._init())}},{key:"_clickHandler",value:function(){this._externalBtn.click()}},{key:"_externalBtnClickHandler",value:function(){this.emitEvent(s.events.click)}}]),s);function s(){t(this,s);var e=n(this,(s.__proto__||Object.getPrototypeOf(s)).call(this,s,{type:s.PfeType}));return e._init=e._init.bind(e),e._parentObserverHandler=e._parentObserverHandler.bind(e),e._clickHandler=e._clickHandler.bind(e),e._internalBtnContainer=e.shadowRoot.querySelector("#internalBtn"),e._observer=new MutationObserver(e._parentObserverHandler),e._externalBtnClickHandler=e._externalBtnClickHandler.bind(e),e._externalBtnObserver=new MutationObserver(e._init),e.addEventListener("click",e._clickHandler),e}return e.create(f),f});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],e):t.PfeButton=e(t.PFElement)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},r=function(t,e,r){return e&&o(t.prototype,e),r&&o(t,r),t};function o(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function n(t,e,r){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,e);if(void 0!==o){if("value"in o)return o.value;o=o.get;return void 0!==o?o.call(r):void 0}if(t=Object.getPrototypeOf(t),null!==t)return n(t,e,r)}var a=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},i={childList:!0},l={characterData:!0,attributes:!0,subtree:!0,childList:!0},u=["style"],r=(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(c,t),r(c,[{key:"html",get:function(){return'\n<style>:host{display:inline-block}:host([hidden]){display:none}:host([variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:16px;font-size:var(--pfe-button--FontSize,var(--pfe-theme--font-size,16px));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);padding:calc(16px / 2) 16px;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,16px)/ 2) var(--pfe-theme--container-padding,16px));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:"";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([variant=danger]) button{background-color:#c9190b;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--feedback--critical--lighter,#c9190b))}:host([variant=danger]) button:focus,:host([variant=danger]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000))}:host([variant=control]) button,:host([variant=secondary]) button,:host([variant=tertiary]) button{background-color:transparent;background-color:var(--pfe-button--BackgroundColor,transparent)}:host([variant=control]) button:focus,:host([variant=control]) button:hover,:host([variant=secondary]) button:focus,:host([variant=secondary]) button:hover,:host([variant=tertiary]) button:focus,:host([variant=tertiary]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, transparent);--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent))}:host([variant=secondary]) button{color:#06c;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=secondary]) button::after{border-color:#06c;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=tertiary]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515))}:host([variant=tertiary]) button::after{border-color:#151515;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--text,#151515))}:host([variant=control]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515));border-radius:0;border-radius:var(--pfe-button--BorderRadius,0)}:host([variant=control]) button:focus,:host([variant=control]) button:hover{--pfe-button__after--BorderColor:var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0))}:host([variant=control]) button:focus::after,:host([variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([variant=control]) button::after{border-color:#f0f0f0;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui--border--lightest,#f0f0f0));border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([variant=control][disabled]) button{background-color:#f0f0f0;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--surface--lighter,#f0f0f0))}:host([disabled]) button{background-color:#d2d2d2;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-disabled,#d2d2d2));color:#6a6e73;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-disabled--text,#6a6e73));pointer-events:none}:host([disabled]) button::after{border:0;border:var(--pfe-button__after--Border,0)}:host([disabled]) button:focus,:host([disabled]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, 0)} /*# sourceMappingURL=pfe-button.min.css.map */</style>\n<span id="internalBtn"></span>'}},{key:"schemaUrl",get:function(){return"pfe-button.json"}},{key:"templateUrl",get:function(){return"pfe-button.html"}},{key:"styleUrl",get:function(){return"pfe-button.scss"}}],[{key:"version",get:function(){return"1.0.0"}},{key:"slots",get:function(){return{default:{title:"Default slot",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"button"}]}}}}},{key:"tag",get:function(){return"pfe-button"}},{key:"events",get:function(){return{click:this.tag+":click"}}},{key:"PfeType",get:function(){return t.PfeTypes.Content}},{key:"properties",get:function(){return{variant:{title:"Style variant",type:String,values:["primary","secondary","tertiary","danger","control"]},pfeVariant:{type:String,values:["primary","secondary","tertiary","danger","control"],alias:"variant"},disabled:{title:"Disabled",type:Boolean,prefix:!1,observer:"_disabledChanged"}}}}]),r(c,[{key:"connectedCallback",value:function(){n(c.prototype.__proto__||Object.getPrototypeOf(c.prototype),"connectedCallback",this).call(this),this.hasLightDOM()&&this._init(),this._observer.observe(this,i),this._externalBtn&&this._externalBtnObserver.observe(this._externalBtn,l)}},{key:"disconnectedCallback",value:function(){n(c.prototype.__proto__||Object.getPrototypeOf(c.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("click",this._clickHandler),this._observer.disconnect(),this._externalBtnObserver.disconnect()}},{key:"_disabledChanged",value:function(t,e){this._externalBtn&&(e?this._externalBtn.setAttribute("disabled",""):this._externalBtn.removeAttribute("disabled"))}},{key:"_init",value:function(){var e;this._isValidLightDom()&&this._externalBtn&&(this._externalBtnObserver.disconnect(),this._externalBtn.hasAttribute("disabled")&&this.setAttribute("disabled",""),e=this._externalBtn.cloneNode(!0),u.forEach(function(t){e.hasAttribute&&e.removeAttribute(t)}),this._internalBtnContainer.innerHTML=e.outerHTML,this._externalBtnObserver.observe(this._externalBtn,l),this._externalBtn.addEventListener("click",this._externalBtnClickHandler))}},{key:"_isValidLightDom",value:function(){return this.hasLightDOM()?"BUTTON"===this.children[0].tagName||(this.warn("The only child in the light DOM must be a button tag"),!1):(this.warn("You must have a button in the light DOM"),!1)}},{key:"_parentObserverHandler",value:function(){this._isValidLightDom()&&this._init()}},{key:"_clickHandler",value:function(){this._externalBtn.click()}},{key:"_externalBtnClickHandler",value:function(){this.emitEvent(c.events.click)}},{key:"_externalBtn",get:function(){return this.querySelector("button")}}]),c);function c(){e(this,c);var t=a(this,(c.__proto__||Object.getPrototypeOf(c)).call(this,c,{type:c.PfeType}));return t._init=t._init.bind(t),t._parentObserverHandler=t._parentObserverHandler.bind(t),t._clickHandler=t._clickHandler.bind(t),t._internalBtnContainer=t.shadowRoot.querySelector("#internalBtn"),t._observer=new MutationObserver(t._parentObserverHandler),t._externalBtnClickHandler=t._externalBtnClickHandler.bind(t),t._externalBtnObserver=new MutationObserver(t._init),t.addEventListener("click",t._clickHandler),t}return t.create(r),r});
 //# sourceMappingURL=pfe-button.umd.min.js.map

package.json

@@ -14,3 +14,3 @@ {
   },
-  "version": "1.0.0-prerelease.56",
+  "version": "1.0.0",
   "keywords": [
@@ -58,3 +58,3 @@ "web-components",
   },
-  "gitHead": "efed86135e85925182445801ab89570b3bcec5ca"
+  "gitHead": "e1e22f995b03e9134d1fd57a583d7a9b7f0350d9"
 }

README.md

@@ -67,3 +67,3 @@ # PatternFly Element | Button Element
 
-`pfe-variant`: Changes the style of the button. Possible values are
+`variant`: Changes the style of the button. Possible values are
 - primary (default)
@@ -70,0 +70,0 @@ - secondary

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112597

increased by6.04%

Lines of code

674

increased by1.35%

Number of low quality alerts

2

decreased by-33.33%

No dependency changes