@duetds/components - npm Package Compare versions

Comparing version 0.0.1-alpha.23 to 0.0.1-alpha.24

lib/cjs/es5/build/duet-button.entry.js

@@ -40,13 +40,28 @@ "use strict";
     }
-    DuetButton.prototype.handleClick = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    DuetButton.prototype.handleClick = function (e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     };
-    DuetButton.prototype.handleBlur = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    DuetButton.prototype.handleBlur = function (e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     };
-    DuetButton.prototype.handleFocus = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    DuetButton.prototype.handleFocus = function (e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     };
@@ -88,2 +103,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -93,7 +109,7 @@ });
         if (this.url) {
-            return (duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, duet_core_js_1.h("slot", null)));
+            return (duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, duet_core_js_1.h("slot", null)));
             // If URL prop doesn’t exist, render a regular button.
         }
         else {
-            return (duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null)));
+            return (duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null)));
         }
@@ -173,4 +189,4 @@ };
             return [{
-                    "name": "onClick",
-                    "method": "onClick",
+                    "name": "clicked",
+                    "method": "clicked",
                     "bubbles": true,
@@ -180,4 +196,4 @@ "cancelable": true,
                 }, {
-                    "name": "onBlur",
-                    "method": "onBlur",
+                    "name": "blurred",
+                    "method": "blurred",
                     "bubbles": true,
@@ -187,4 +203,4 @@ "cancelable": true,
                 }, {
-                    "name": "onFocus",
-                    "method": "onFocus",
+                    "name": "focused",
+                    "method": "focused",
                     "bubbles": true,
@@ -199,3 +215,3 @@ "cancelable": true,
     Object.defineProperty(DuetButton, "style", {
-        get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled] {\n  cursor: not-allowed;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled] {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n  background: #757575;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.loading[disabled] {\n  opacity: 0.75;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled] {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
         enumerable: true,
@@ -202,0 +218,0 @@ configurable: true

lib/cjs/es5/build/duet-button.sc.entry.js

@@ -40,13 +40,28 @@ "use strict";
     }
-    DuetButton.prototype.handleClick = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    DuetButton.prototype.handleClick = function (e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     };
-    DuetButton.prototype.handleBlur = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    DuetButton.prototype.handleBlur = function (e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     };
-    DuetButton.prototype.handleFocus = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    DuetButton.prototype.handleFocus = function (e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     };
@@ -88,2 +103,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -93,7 +109,7 @@ });
         if (this.url) {
-            return (duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, duet_core_js_1.h("slot", null)));
+            return (duet_core_js_1.h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, duet_core_js_1.h("slot", null)));
             // If URL prop doesn’t exist, render a regular button.
         }
         else {
-            return (duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null)));
+            return (duet_core_js_1.h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, duet_core_js_1.h("slot", null)));
         }
@@ -173,4 +189,4 @@ };
             return [{
-                    "name": "onClick",
-                    "method": "onClick",
+                    "name": "clicked",
+                    "method": "clicked",
                     "bubbles": true,
@@ -180,4 +196,4 @@ "cancelable": true,
                 }, {
-                    "name": "onBlur",
-                    "method": "onBlur",
+                    "name": "blurred",
+                    "method": "blurred",
                     "bubbles": true,
@@ -187,4 +203,4 @@ "cancelable": true,
                 }, {
-                    "name": "onFocus",
-                    "method": "onFocus",
+                    "name": "focused",
+                    "method": "focused",
                     "bubbles": true,
@@ -199,3 +215,3 @@ "cancelable": true,
     Object.defineProperty(DuetButton, "style", {
-        get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n  cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n  background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n  opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
         enumerable: true,
@@ -202,0 +218,0 @@ configurable: true

lib/collection/collection-manifest.json

@@ -82,9 +82,9 @@ {
         {
-          "event": "onBlur"
+          "event": "blurred"
         },
         {
-          "event": "onClick"
+          "event": "clicked"
         },
         {
-          "event": "onFocus"
+          "event": "focused"
         }
@@ -91,0 +91,0 @@ ],

lib/collection/components/duet-button/duet-button.js

@@ -38,13 +38,28 @@ import { applyThemeClasses } from "../../utils/applyThemeClasses";
     }
-    handleClick(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    handleClick(e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleBlur(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    handleBlur(e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleFocus(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    handleFocus(e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     }
@@ -84,2 +99,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -89,3 +105,3 @@ });
         if (this.url) {
-            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier },
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
                 h("slot", null)));
@@ -95,3 +111,3 @@ // If URL prop doesn’t exist, render a regular button.
         else {
-            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier },
+            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
                 h("slot", null)));
@@ -156,4 +172,4 @@ }
     static get events() { return [{
-            "name": "onClick",
-            "method": "onClick",
+            "name": "clicked",
+            "method": "clicked",
             "bubbles": true,
@@ -163,4 +179,4 @@ "cancelable": true,
         }, {
-            "name": "onBlur",
-            "method": "onBlur",
+            "name": "blurred",
+            "method": "blurred",
             "bubbles": true,
@@ -170,4 +186,4 @@ "cancelable": true,
         }, {
-            "name": "onFocus",
-            "method": "onFocus",
+            "name": "focused",
+            "method": "focused",
             "bubbles": true,
@@ -174,0 +190,0 @@ "cancelable": true,

lib/duet/duet-button.entry.js

@@ -40,13 +40,28 @@ const h = window.Duet.h;
     }
-    handleClick(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    handleClick(e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleBlur(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    handleBlur(e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleFocus(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    handleFocus(e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     }
@@ -86,2 +101,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -91,3 +107,3 @@ });
         if (this.url) {
-            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier },
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
                 h("slot", null)));
@@ -97,3 +113,3 @@ // If URL prop doesn’t exist, render a regular button.
         else {
-            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier },
+            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
                 h("slot", null)));
@@ -158,4 +174,4 @@ }
     static get events() { return [{
-            "name": "onClick",
-            "method": "onClick",
+            "name": "clicked",
+            "method": "clicked",
             "bubbles": true,
@@ -165,4 +181,4 @@ "cancelable": true,
         }, {
-            "name": "onBlur",
-            "method": "onBlur",
+            "name": "blurred",
+            "method": "blurred",
             "bubbles": true,
@@ -172,4 +188,4 @@ "cancelable": true,
         }, {
-            "name": "onFocus",
-            "method": "onFocus",
+            "name": "focused",
+            "method": "focused",
             "bubbles": true,
@@ -179,5 +195,5 @@ "cancelable": true,
         }]; }
-    static get style() { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled] {\n  cursor: not-allowed;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled] {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n  background: #757575;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.loading[disabled] {\n  opacity: 0.75;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled] {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+    static get style() { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
 }
 
 export { DuetButton };

lib/duet/duet-button.es5.entry.js

@@ -38,13 +38,28 @@ Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {
         }
-        DuetButton.prototype.handleClick = function (ev) {
-            var send = ev.target ? ev.target : null;
-            this.onClick.emit(send);
+        /**
+         * Handle click event
+         */
+        DuetButton.prototype.handleClick = function (e) {
+            if (!this.disabled) {
+                this.clicked.emit(e);
+            }
+            e.cancelBubble = true;
         };
-        DuetButton.prototype.handleBlur = function (ev) {
-            var send = ev.target ? ev.target : null;
-            this.onBlur.emit(send);
+        /**
+         * Handle blur event
+         */
+        DuetButton.prototype.handleBlur = function (e) {
+            if (!this.disabled) {
+                this.blurred.emit(e);
+            }
+            e.cancelBubble = true;
         };
-        DuetButton.prototype.handleFocus = function (ev) {
-            var send = ev.target ? ev.target : null;
-            this.onFocus.emit(send);
+        /**
+         * Handle focus event
+         */
+        DuetButton.prototype.handleFocus = function (e) {
+            if (!this.disabled) {
+                this.focused.emit(e);
+            }
+            e.cancelBubble = true;
         };
@@ -86,2 +101,3 @@ /**
                 expand: this.expand,
+                disabled: this.disabled,
                 "duet-theme-turva": this.theme === "turva",
@@ -91,7 +107,7 @@ });
             if (this.url) {
-                return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, h("slot", null)));
+                return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)));
                 // If URL prop doesn’t exist, render a regular button.
             }
             else {
-                return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, h("slot", null)));
+                return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)));
             }
@@ -171,4 +187,4 @@ };
                 return [{
-                        "name": "onClick",
-                        "method": "onClick",
+                        "name": "clicked",
+                        "method": "clicked",
                         "bubbles": true,
@@ -178,4 +194,4 @@ "cancelable": true,
                     }, {
-                        "name": "onBlur",
-                        "method": "onBlur",
+                        "name": "blurred",
+                        "method": "blurred",
                         "bubbles": true,
@@ -185,4 +201,4 @@ "cancelable": true,
                     }, {
-                        "name": "onFocus",
-                        "method": "onFocus",
+                        "name": "focused",
+                        "method": "focused",
                         "bubbles": true,
@@ -197,3 +213,3 @@ "cancelable": true,
         Object.defineProperty(DuetButton, "style", {
-            get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled] {\n  cursor: not-allowed;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled] {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n  background: #757575;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.loading[disabled] {\n  opacity: 0.75;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled] {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+            get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
             enumerable: true,
@@ -200,0 +216,0 @@ configurable: true

lib/duet/duet-button.sc.entry.js

@@ -40,13 +40,28 @@ const h = window.Duet.h;
     }
-    handleClick(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    handleClick(e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleBlur(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    handleBlur(e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleFocus(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    handleFocus(e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     }
@@ -86,2 +101,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -91,3 +107,3 @@ });
         if (this.url) {
-            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier },
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
                 h("slot", null)));
@@ -97,3 +113,3 @@ // If URL prop doesn’t exist, render a regular button.
         else {
-            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier },
+            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
                 h("slot", null)));
@@ -158,4 +174,4 @@ }
     static get events() { return [{
-            "name": "onClick",
-            "method": "onClick",
+            "name": "clicked",
+            "method": "clicked",
             "bubbles": true,
@@ -165,4 +181,4 @@ "cancelable": true,
         }, {
-            "name": "onBlur",
-            "method": "onBlur",
+            "name": "blurred",
+            "method": "blurred",
             "bubbles": true,
@@ -172,4 +188,4 @@ "cancelable": true,
         }, {
-            "name": "onFocus",
-            "method": "onFocus",
+            "name": "focused",
+            "method": "focused",
             "bubbles": true,
@@ -179,5 +195,5 @@ "cancelable": true,
         }]; }
-    static get style() { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n  cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n  background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n  opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+    static get style() { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
 }
 
 export { DuetButton };

lib/duet/duet-button.sc.es5.entry.js

@@ -38,13 +38,28 @@ Duet.loadBundle('duet-button', ['exports', './chunk-fdfae928.js'], function (exports, __chunk_1) {
         }
-        DuetButton.prototype.handleClick = function (ev) {
-            var send = ev.target ? ev.target : null;
-            this.onClick.emit(send);
+        /**
+         * Handle click event
+         */
+        DuetButton.prototype.handleClick = function (e) {
+            if (!this.disabled) {
+                this.clicked.emit(e);
+            }
+            e.cancelBubble = true;
         };
-        DuetButton.prototype.handleBlur = function (ev) {
-            var send = ev.target ? ev.target : null;
-            this.onBlur.emit(send);
+        /**
+         * Handle blur event
+         */
+        DuetButton.prototype.handleBlur = function (e) {
+            if (!this.disabled) {
+                this.blurred.emit(e);
+            }
+            e.cancelBubble = true;
         };
-        DuetButton.prototype.handleFocus = function (ev) {
-            var send = ev.target ? ev.target : null;
-            this.onFocus.emit(send);
+        /**
+         * Handle focus event
+         */
+        DuetButton.prototype.handleFocus = function (e) {
+            if (!this.disabled) {
+                this.focused.emit(e);
+            }
+            e.cancelBubble = true;
         };
@@ -86,2 +101,3 @@ /**
                 expand: this.expand,
+                disabled: this.disabled,
                 "duet-theme-turva": this.theme === "turva",
@@ -91,7 +107,7 @@ });
             if (this.url) {
-                return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, h("slot", null)));
+                return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)));
                 // If URL prop doesn’t exist, render a regular button.
             }
             else {
-                return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, h("slot", null)));
+                return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)));
             }
@@ -171,4 +187,4 @@ };
                 return [{
-                        "name": "onClick",
-                        "method": "onClick",
+                        "name": "clicked",
+                        "method": "clicked",
                         "bubbles": true,
@@ -178,4 +194,4 @@ "cancelable": true,
                     }, {
-                        "name": "onBlur",
-                        "method": "onBlur",
+                        "name": "blurred",
+                        "method": "blurred",
                         "bubbles": true,
@@ -185,4 +201,4 @@ "cancelable": true,
                     }, {
-                        "name": "onFocus",
-                        "method": "onFocus",
+                        "name": "focused",
+                        "method": "focused",
                         "bubbles": true,
@@ -197,3 +213,3 @@ "cancelable": true,
         Object.defineProperty(DuetButton, "style", {
-            get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n  cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n  background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n  opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+            get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
             enumerable: true,
@@ -200,0 +216,0 @@ configurable: true

lib/esm/es2017/build/duet-button.entry.js

@@ -40,13 +40,28 @@ import { h } from '../duet.core.js';
     }
-    handleClick(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    handleClick(e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleBlur(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    handleBlur(e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleFocus(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    handleFocus(e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     }
@@ -86,2 +101,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -91,3 +107,3 @@ });
         if (this.url) {
-            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier },
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
                 h("slot", null)));
@@ -97,3 +113,3 @@ // If URL prop doesn’t exist, render a regular button.
         else {
-            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier },
+            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
                 h("slot", null)));
@@ -158,4 +174,4 @@ }
     static get events() { return [{
-            "name": "onClick",
-            "method": "onClick",
+            "name": "clicked",
+            "method": "clicked",
             "bubbles": true,
@@ -165,4 +181,4 @@ "cancelable": true,
         }, {
-            "name": "onBlur",
-            "method": "onBlur",
+            "name": "blurred",
+            "method": "blurred",
             "bubbles": true,
@@ -172,4 +188,4 @@ "cancelable": true,
         }, {
-            "name": "onFocus",
-            "method": "onFocus",
+            "name": "focused",
+            "method": "focused",
             "bubbles": true,
@@ -179,5 +195,5 @@ "cancelable": true,
         }]; }
-    static get style() { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled] {\n  cursor: not-allowed;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled] {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n  background: #757575;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.loading[disabled] {\n  opacity: 0.75;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled] {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+    static get style() { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
 }
 
 export { DuetButton };

lib/esm/es2017/build/duet-button.sc.entry.js

@@ -40,13 +40,28 @@ import { h } from '../duet.core.js';
     }
-    handleClick(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    handleClick(e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleBlur(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    handleBlur(e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     }
-    handleFocus(ev) {
-        const send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    handleFocus(e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     }
@@ -86,2 +101,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -91,3 +107,3 @@ });
         if (this.url) {
-            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), id: this.identifier },
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), id: this.identifier },
                 h("slot", null)));
@@ -97,3 +113,3 @@ // If URL prop doesn’t exist, render a regular button.
         else {
-            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: ev => this.handleClick(ev), onBlur: ev => this.handleBlur(ev), onFocus: ev => this.handleFocus(ev), disabled: this.disabled, id: this.identifier },
+            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: e => this.handleClick(e), onBlur: e => this.handleBlur(e), onFocus: e => this.handleFocus(e), disabled: this.disabled, id: this.identifier },
                 h("slot", null)));
@@ -158,4 +174,4 @@ }
     static get events() { return [{
-            "name": "onClick",
-            "method": "onClick",
+            "name": "clicked",
+            "method": "clicked",
             "bubbles": true,
@@ -165,4 +181,4 @@ "cancelable": true,
         }, {
-            "name": "onBlur",
-            "method": "onBlur",
+            "name": "blurred",
+            "method": "blurred",
             "bubbles": true,
@@ -172,4 +188,4 @@ "cancelable": true,
         }, {
-            "name": "onFocus",
-            "method": "onFocus",
+            "name": "focused",
+            "method": "focused",
             "bubbles": true,
@@ -179,5 +195,5 @@ "cancelable": true,
         }]; }
-    static get style() { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n  cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n  background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n  opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
+    static get style() { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; }
 }
 
 export { DuetButton };

lib/esm/es5/build/duet-button.entry.js

@@ -38,13 +38,28 @@ import { h } from '../duet.core.js';
     }
-    DuetButton.prototype.handleClick = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    DuetButton.prototype.handleClick = function (e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     };
-    DuetButton.prototype.handleBlur = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    DuetButton.prototype.handleBlur = function (e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     };
-    DuetButton.prototype.handleFocus = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    DuetButton.prototype.handleFocus = function (e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     };
@@ -86,2 +101,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -91,7 +107,7 @@ });
         if (this.url) {
-            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, h("slot", null)));
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)));
             // If URL prop doesn’t exist, render a regular button.
         }
         else {
-            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, h("slot", null)));
+            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)));
         }
@@ -171,4 +187,4 @@ };
             return [{
-                    "name": "onClick",
-                    "method": "onClick",
+                    "name": "clicked",
+                    "method": "clicked",
                     "bubbles": true,
@@ -178,4 +194,4 @@ "cancelable": true,
                 }, {
-                    "name": "onBlur",
-                    "method": "onBlur",
+                    "name": "blurred",
+                    "method": "blurred",
                     "bubbles": true,
@@ -185,4 +201,4 @@ "cancelable": true,
                 }, {
-                    "name": "onFocus",
-                    "method": "onFocus",
+                    "name": "focused",
+                    "method": "focused",
                     "bubbles": true,
@@ -197,3 +213,3 @@ "cancelable": true,
     Object.defineProperty(DuetButton, "style", {
-        get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled] {\n  cursor: not-allowed;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled] {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva {\n  background: #757575;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.loading[disabled] {\n  opacity: 0.75;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled] {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled] {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled] {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        get: function () { return ":host {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled], .duet-button.disabled {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva, .duet-button.disabled.duet-theme-turva {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand {\n  width: 100%;\n}\n.duet-button.default {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.primary:hover {\n  background: #004d80;\n}\n.duet-button.primary:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva {\n  background: #c60c30;\n}\n.duet-button.negative {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva {\n  color: #111111;\n}\n.duet-button.negative:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva {\n  background: #e02a0d;\n}\n.duet-button.destructive:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva {\n  color: #c60c30;\n}\n.duet-button.plain:hover {\n  color: #004d80;\n}\n.duet-button.plain:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
         enumerable: true,
@@ -200,0 +216,0 @@ configurable: true

lib/esm/es5/build/duet-button.sc.entry.js

@@ -38,13 +38,28 @@ import { h } from '../duet.core.js';
     }
-    DuetButton.prototype.handleClick = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onClick.emit(send);
+    /**
+     * Handle click event
+     */
+    DuetButton.prototype.handleClick = function (e) {
+        if (!this.disabled) {
+            this.clicked.emit(e);
+        }
+        e.cancelBubble = true;
     };
-    DuetButton.prototype.handleBlur = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onBlur.emit(send);
+    /**
+     * Handle blur event
+     */
+    DuetButton.prototype.handleBlur = function (e) {
+        if (!this.disabled) {
+            this.blurred.emit(e);
+        }
+        e.cancelBubble = true;
     };
-    DuetButton.prototype.handleFocus = function (ev) {
-        var send = ev.target ? ev.target : null;
-        this.onFocus.emit(send);
+    /**
+     * Handle focus event
+     */
+    DuetButton.prototype.handleFocus = function (e) {
+        if (!this.disabled) {
+            this.focused.emit(e);
+        }
+        e.cancelBubble = true;
     };
@@ -86,2 +101,3 @@ /**
             expand: this.expand,
+            disabled: this.disabled,
             "duet-theme-turva": this.theme === "turva",
@@ -91,7 +107,7 @@ });
         if (this.url) {
-            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, id: this.identifier }, h("slot", null)));
+            return (h("a", { href: this.url, class: classes, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, id: this.identifier }, h("slot", null)));
             // If URL prop doesn’t exist, render a regular button.
         }
         else {
-            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (ev) { return _this.handleClick(ev); }, onBlur: function (ev) { return _this.handleBlur(ev); }, onFocus: function (ev) { return _this.handleFocus(ev); }, disabled: this.disabled, id: this.identifier }, h("slot", null)));
+            return (h("button", { type: type, class: classes, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, onClick: function (e) { return _this.handleClick(e); }, onBlur: function (e) { return _this.handleBlur(e); }, onFocus: function (e) { return _this.handleFocus(e); }, disabled: this.disabled, id: this.identifier }, h("slot", null)));
         }
@@ -171,4 +187,4 @@ };
             return [{
-                    "name": "onClick",
-                    "method": "onClick",
+                    "name": "clicked",
+                    "method": "clicked",
                     "bubbles": true,
@@ -178,4 +194,4 @@ "cancelable": true,
                 }, {
-                    "name": "onBlur",
-                    "method": "onBlur",
+                    "name": "blurred",
+                    "method": "blurred",
                     "bubbles": true,
@@ -185,4 +201,4 @@ "cancelable": true,
                 }, {
-                    "name": "onFocus",
-                    "method": "onFocus",
+                    "name": "focused",
+                    "method": "focused",
                     "bubbles": true,
@@ -197,3 +213,3 @@ "cancelable": true,
     Object.defineProperty(DuetButton, "style", {
-        get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button {\n  cursor: not-allowed;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.default[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.default[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.primary[disabled].sc-duet-button {\n  background: #657787;\n}\n.duet-button.primary[disabled].duet-theme-turva.sc-duet-button {\n  background: #757575;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.secondary[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  background: #e1e3e6;\n  color: #657787;\n}\n.duet-button.secondary[disabled].duet-theme-turva.sc-duet-button {\n  background: #e6e6e6;\n  color: #757575;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.loading[disabled].sc-duet-button {\n  opacity: 0.75;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.negative[disabled].sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  color: #00294d;\n  background: white;\n  opacity: 0.5;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.destructive[disabled].sc-duet-button {\n  background: rgba(222, 35, 98, 0.6);\n}\n.duet-button.destructive[disabled].duet-theme-turva.sc-duet-button {\n  color: white;\n  background: rgba(224, 42, 13, 0.6);\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  border-radius: 0;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n.duet-button.plain[disabled].sc-duet-button {\n  opacity: 0.5;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
+        get: function () { return ".sc-duet-button-h {\n  margin-right: 8px;\n  margin-bottom: 12px;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n.duet-button.sc-duet-button {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  padding: 16px 28px 17px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 1rem;\n  background: white;\n  color: #0077b3;\n  border-radius: 20rem;\n  font-weight: 600;\n  line-height: 1;\n  -webkit-transition: 300ms ease;\n  transition: 300ms ease;\n  min-width: 6.875rem;\n  position: relative;\n  display: block;\n  text-align: center;\n  text-decoration: none;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  border: 0;\n}\n.duet-button.duet-theme-turva.sc-duet-button {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-button.sc-duet-button:active {\n  -webkit-transition: none;\n  transition: none;\n  opacity: 0.75;\n}\n.duet-button[disabled].sc-duet-button, .duet-button.disabled.sc-duet-button {\n  cursor: not-allowed !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n  background: #e1e3e6 !important;\n  color: #657787 !important;\n}\n.duet-button[disabled].duet-theme-turva.sc-duet-button, .duet-button.disabled.duet-theme-turva.sc-duet-button {\n  background: #e6e6e6 !important;\n  color: #757575 !important;\n  -webkit-box-shadow: none !important;\n  box-shadow: none !important;\n}\n.duet-button.expand.sc-duet-button {\n  width: 100%;\n}\n.duet-button.default.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e1e3e6;\n  box-shadow: inset 0 0 0 2px #e1e3e6;\n}\n.duet-button.default.duet-theme-turva.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #e6e6e6;\n  box-shadow: inset 0 0 0 2px #e6e6e6;\n  color: #c60c30;\n}\n.duet-button.default.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n}\n.duet-button.default.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n}\n.duet-button.primary.sc-duet-button {\n  color: white;\n  background: #0077b3;\n}\n.duet-button.primary.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.primary.sc-duet-button:hover {\n  background: #004d80;\n}\n.duet-button.primary.sc-duet-button:hover.duet-theme-turva {\n  background: #940925;\n}\n.duet-button.secondary.sc-duet-button {\n  -webkit-box-shadow: inset 0 0 0 2px #00294d;\n  box-shadow: inset 0 0 0 2px #00294d;\n  color: #00294d;\n  background: white;\n}\n.duet-button.secondary.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px #0077b3;\n  box-shadow: inset 0 0 0 2px #0077b3;\n  color: #0077b3;\n}\n.duet-button.secondary.sc-duet-button:hover.duet-theme-turva {\n  -webkit-box-shadow: inset 0 0 0 2px #c60c30;\n  box-shadow: inset 0 0 0 2px #c60c30;\n  color: #c60c30;\n}\n.duet-button.loading.sc-duet-button {\n  background: #0077b3;\n  color: white;\n  text-indent: -9999px;\n  pointer-events: none;\n  overflow: hidden;\n}\n.duet-button.loading.sc-duet-button::after {\n  content: \"\";\n  position: absolute;\n  -webkit-transform-origin: 0% 0%;\n  transform-origin: 0% 0%;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  z-index: 800;\n  border-radius: 50%;\n  -webkit-animation: duetRotate 0.6s linear infinite;\n  animation: duetRotate 0.6s linear infinite;\n  border-top: 2px solid rgba(255, 255, 255, 0.2);\n  border-right: 2px solid rgba(255, 255, 255, 0.2);\n  border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n  border-left: 2px solid white;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n}\n.duet-button.loading.duet-theme-turva.sc-duet-button {\n  background: #c60c30;\n}\n.duet-button.negative.sc-duet-button {\n  color: #00294d;\n  background: white;\n}\n.duet-button.negative.duet-theme-turva.sc-duet-button {\n  color: #111111;\n}\n.duet-button.negative.sc-duet-button:hover {\n  -webkit-box-shadow: inset 0 0 0 2px white;\n  box-shadow: inset 0 0 0 2px white;\n  background: transparent;\n  color: white;\n}\n.duet-button.destructive.sc-duet-button {\n  color: white;\n  background: #de2362;\n}\n.duet-button.destructive.duet-theme-turva.sc-duet-button {\n  background: #e02a0d;\n}\n.duet-button.destructive.sc-duet-button:hover {\n  background: #b21c4e;\n}\n.duet-button.destructive.sc-duet-button:hover.duet-theme-turva {\n  background: #b3220a;\n}\n.duet-button.plain.sc-duet-button {\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  overflow: visible;\n  min-width: 0;\n}\n.duet-button.plain.duet-theme-turva.sc-duet-button {\n  color: #c60c30;\n}\n.duet-button.plain.sc-duet-button:hover {\n  color: #004d80;\n}\n.duet-button.plain.sc-duet-button:hover.duet-theme-turva {\n  color: #940925;\n}\n\n\@-webkit-keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}\n\n\@keyframes duetRotate {\n  0% {\n    -webkit-transform: rotate(0deg) translateX(-50%) translateY(-50%);\n    transform: rotate(0deg) translateX(-50%) translateY(-50%);\n  }\n  100% {\n    -webkit-transform: rotate(360deg) translateX(-50%) translateY(-50%);\n    transform: rotate(360deg) translateX(-50%) translateY(-50%);\n  }\n}"; },
         enumerable: true,
@@ -200,0 +216,0 @@ configurable: true

lib/esm/index.js

@@ -1,6 +0,1 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./es5/index.js"));
+export * from './es5/index.js';

lib/types/components.d.ts

@@ -11,2 +11,6 @@ /* tslint:disable */
 
+import {
+  Event,
+  EventEmitter,
+} from './stencil.core';
 
@@ -102,11 +106,11 @@
     */
-    'onOnBlur'?: (event: CustomEvent<string>) => void;
+    'onBlurred'?: (event: CustomEvent<Event>) => void;
     /**
     * Callback for when the button is clicked.
     */
-    'onOnClick'?: (event: CustomEvent<string>) => void;
+    'onClicked'?: (event: CustomEvent<Event>) => void;
     /**
-    * Callback when button becomes focussed.
+    * Callback when button becomes focused.
     */
-    'onOnFocus'?: (event: CustomEvent<string>) => void;
+    'onFocused'?: (event: CustomEvent<Event>) => void;
     /**
@@ -306,3 +310,3 @@ * Allows the button to submit a form.
     /**
-    * Callback when input becomes focussed.
+    * Callback when input becomes focused.
     */
@@ -309,0 +313,0 @@ 'onOnFocus'?: (event: CustomEvent<string>) => void;

lib/types/components/duet-button/duet-button.d.ts

@@ -57,15 +57,24 @@ import '../../stencil.core';
      */
-    onClick: EventEmitter<string>;
+    clicked: EventEmitter<Event>;
     /**
      * Callback when focus leaves button.
      */
-    onBlur: EventEmitter<string>;
+    blurred: EventEmitter<Event>;
     /**
-     * Callback when button becomes focussed.
+     * Callback when button becomes focused.
      */
-    onFocus: EventEmitter<string>;
-    handleClick(ev: any): void;
-    handleBlur(ev: any): void;
-    handleFocus(ev: any): void;
+    focused: EventEmitter<Event>;
     /**
+     * Handle click event
+     */
+    handleClick(e: Event): void;
+    /**
+     * Handle blur event
+     */
+    handleBlur(e: Event): void;
+    /**
+     * Handle focus event
+     */
+    handleFocus(e: Event): void;
+    /**
      * componentDidLoad() function
@@ -72,0 +81,0 @@ */

lib/types/components/duet-input/duet-input.d.ts

@@ -115,3 +115,3 @@ import '../../stencil.core';
     /**
-     * Callback when input becomes focussed.
+     * Callback when input becomes focused.
      */
@@ -118,0 +118,0 @@ onFocus: EventEmitter<string>;

lib/web-components.json

@@ -5,3 +5,3 @@ {
       "label": "duet-button",
-      "description": "---\ntitle: Button\nname: duet-button\nstatus: prototype\nslot: Button\nintro: Buttons are used for interface actions. They default to appearance that has dark text with gray border. Primary style should be used only once per view for main call-to-action.\ndescription: Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.\nvariations:\n  - primary\n  - loading\n  - secondary\n  - default\n  - negative\n  - destructive\n  - plain\ntags:\n  - docs-components\n---",
+      "description": "---\ntitle: Button\nname: duet-button\nstatus: prototype\nslot: Button\nintro: Buttons are used for interface actions. They default to appearance that has dark text with gray border. Primary style should be used only once per view for main call-to-action.\ndescription: Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.\nvariations:\n  - primary\n  - loading\n  - secondary\n  - default\n  - negative\n  - destructive\n  - disabled\n  - plain\ntags:\n  - docs-components\n---",
       "attributes": [
@@ -8,0 +8,0 @@ {

package.json

 {
   "name": "@duetds/components",
-  "version": "0.0.1-alpha.23",
+  "version": "0.0.1-alpha.24",
   "description": "This package includes Duet Components and related tools.",
@@ -24,8 +24,8 @@ "author": "Viljami Salminen <[e-mail]>",
     "build": "copyfiles --flat src/*.js lib",
-    "start": "npm-run-all --parallel copy:fonts copy:build copy:docs stencil:onchange stencil:start",
-    "stencil:build": "stencil build --docs --es5",
-    "stencil:start": "stencil build --dev --es5 --docs --watch --serve",
-    "stencil:test": "stencil test --spec --e2e",
-    "stencil:test.watch": "stencil test --spec --e2e --watchAll",
-    "stencil:onchange": "onchange \"./src/components/**/*\" -- npm-run-all copy:build",
+    "start": "npm-run-all --parallel copy:fonts copy:build copy:docs duet:onchange duet:start",
+    "duet:build": "stencil build --docs --es5",
+    "duet:start": "stencil build --dev --es5 --docs --watch --serve",
+    "duet:test": "stencil test --spec --e2e",
+    "duet:test.watch": "stencil test --spec --e2e --watchAll",
+    "duet:onchange": "onchange \"./src/components/**/*\" -- npm-run-all copy:build",
     "copy:fonts": "copyfiles --flat node_modules/@duetds/fonts/lib/* src/assets/fonts",
@@ -38,12 +38,23 @@ "copy:build": "copyfiles --up 2 \"./www/build/**/*\" \"../../docs/src/docs/components\" && echo 'Build copied over to docs'",
   },
-  "gitHead": "fd07b00be45bd0eee5c8e8b0d2d8c37aec57bdc1",
+  "husky": {
+    "hooks": {
+      "pre-push": "npm run duet:test"
+    }
+  },
+  "gitHead": "3ef4060eaa017bbf67f8560dd37da7d9ad13c707",
   "devDependencies": {
-    "@duetds/fonts": "^1.0.6",
-    "@duetds/tokens": "^1.1.5",
+    "@duetds/fonts": "^1.0.7",
+    "@duetds/tokens": "^1.1.6",
     "@stencil/core": "^0.18.1",
     "@stencil/sass": "^0.2.1",
     "@stencil/utils": "latest",
+    "@types/jest": "23.3.14",
+    "@types/puppeteer": "^1.12.4",
     "copyfiles": "^2.1.0",
+    "husky": "^2.2.0",
+    "jest": "23.6.0",
+    "jest-cli": "23.6.0",
     "npm-run-all": "^4.1.5",
     "onchange": "^5.2.0",
+    "puppeteer": "1.11.0",
     "rollup-plugin-node-builtins": "^2.1.2",
@@ -50,0 +61,0 @@ "rollup-plugin-node-globals": "^1.4.0"

New alerts

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

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

Improved metrics

Lines of code

20188

increased by0.57%

Worsened metrics

Total package byte prevSize

1868550

decreased by-0.37%

Dev dependency count

16

increased by60%

No dependency changes