smoothly 0.3.41 → 0.3.42

package/dist/cjs/smoothly-accordion_53.cjs.entry.js

@@ -130,6 +130,8 @@ const SmoothlyAppDemo = class {
         index$1.redirect("/routing/pathParameter1");
       } }, "Internal"), index.h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
         index$1.redirect("https://google.com");
+      } }, "External"), index.h("smoothly-button", { disabled: true, style: { "max-width": "300px" }, onClick: () => {
+        index$1.redirect("https://google.com");
       } }, "External")), index.h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, index.h("h2", null, "Regex routing")), index.h("smoothly-room", { path: "old", label: "Old", to: "select" }), index.h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, index.h("smoothly-picker", { label: "All Animals Selected", style: { minWidth: "100px" }, labelSetting: "hide", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, "select-none-name": "Select All", options: [
         { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
         { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },
@@ -21700,7 +21702,7 @@ const SmoothlyInputDemo = class {
   }
   render() {
     return [
-      index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Form")), index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly Input"), index.h("h3", null, "Card"), index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input-date", null), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), index.h("h3", null, "Contact"), index.h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input-date", { name: "some-date" }, "Calendar"), index.h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)")), index.h("fieldset", null, index.h("h2", null, "Smoothly Radio"), index.h("h3", null, "Deselectable Radio List with button"), index.h("smoothly-radio-button", { deselectable: true, decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, index.h("span", null, "Option 3")), index.h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, index.h("span", null, "Option 4 (Disabled)"))), index.h("h3", null, "Radio List with button"), index.h("smoothly-radio-button", { decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("h3", null, "Radio List ", index.h("b", null, "without button")), index.h("smoothly-radio-button", null, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, index.h("span", null, "Option 3"))), index.h("smoothly-radio", { name: "option", value: "1" }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3" }, "option 3")), index.h("fieldset", null, index.h("h2", null, "Smoothly Accordion"), index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), index.h("fieldset", null, index.h("h2", null, "Smoothly checkbox"), index.h("smoothly-checkbox", { selectAll: true, intermediate: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true })), index.h("fieldset", null, index.h("h2", null, "Smoothly addresses"), index.h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), index.h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), index.h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), index.h("footer", null, index.h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), index.h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
+      index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Form")), index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly Input"), index.h("h3", null, "Card"), index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input-date", null), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), index.h("h3", null, "Contact"), index.h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input-date", { name: "some-date" }, "Calendar"), index.h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)")), index.h("fieldset", null, index.h("h2", null, "Smoothly Radio"), index.h("h3", null, "Deselectable Radio List with button"), index.h("smoothly-radio-button", { deselectable: true, decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, index.h("span", null, "Option 3")), index.h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, index.h("span", null, "Option 4 (Disabled)"))), index.h("h3", null, "Radio List with button"), index.h("smoothly-radio-button", { decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("h3", null, "Radio List ", index.h("b", null, "without button")), index.h("smoothly-radio-button", null, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, index.h("span", null, "Option 3"))), index.h("smoothly-radio", { name: "option", value: "1" }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3" }, "option 3")), index.h("fieldset", null, index.h("h2", null, "Smoothly Accordion"), index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), index.h("fieldset", null, index.h("h2", null, "Smoothly checkbox"), index.h("smoothly-checkbox", { selectAll: true, intermediate: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true })), index.h("fieldset", null, index.h("h2", null, "Smoothly addresses"), index.h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), index.h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), index.h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), index.h("footer", null, index.h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), index.h("smoothly-submit", { disabled: true, expand: "block", onClick: e => console.log(e), onSubmit: (e) => alert(e), color: "success" }, "Submit"), index.h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
       index.h("smoothly-backtotop", null),
     ];
   }
@@ -22687,6 +22689,9 @@ const SmoothlySubmit = class {
       this.processing = false;
     }
   }
+  handleClick(e) {
+    this.disabled && e.stopImmediatePropagation();
+  }
   async submit() {
     let result;
     if ((result = !!this.form))
@@ -22694,10 +22699,7 @@ const SmoothlySubmit = class {
     return result;
   }
   render() {
-    return [
-      index.h("smoothly-spinner", { active: this.processing }),
-      index.h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, index.h("slot", null)),
-    ];
+    return (index.h(index.Host, { onClick: (e) => this.handleClick(e) }, index.h("smoothly-spinner", { active: this.processing }), index.h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, index.h("slot", null))));
   }
 };
 function hasNameAndValue(element) {

package/dist/collection/components/app-demo/index.js

@@ -10,6 +10,8 @@ export class SmoothlyAppDemo {
         redirect("/routing/pathParameter1");
       } }, "Internal"), h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
         redirect("https://google.com");
+      } }, "External"), h("smoothly-button", { disabled: true, style: { "max-width": "300px" }, onClick: () => {
+        redirect("https://google.com");
       } }, "External")), h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, h("h2", null, "Regex routing")), h("smoothly-room", { path: "old", label: "Old", to: "select" }), h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, h("smoothly-picker", { label: "All Animals Selected", style: { minWidth: "100px" }, labelSetting: "hide", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, "select-none-name": "Select All", options: [
         { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
         { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },

package/dist/collection/components/input-demo/index.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 export class SmoothlyInputDemo {
   render() {
     return [
-      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Input"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", { name: "some-date" }, "Calendar"), h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, h("span", null, "Option 3")), h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, h("span", null, "Option 4 (Disabled)"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
+      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Input"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", { name: "some-date" }, "Calendar"), h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, h("span", null, "Option 3")), h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, h("span", null, "Option 4 (Disabled)"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-submit", { disabled: true, expand: "block", onClick: e => console.log(e), onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
       h("smoothly-backtotop", null),
     ];
   }

package/dist/collection/components/submit/index.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { Data } from "./Data";
 export class SmoothlySubmit {
   constructor() {
@@ -36,6 +36,9 @@ export class SmoothlySubmit {
       this.processing = false;
     }
   }
+  handleClick(e) {
+    this.disabled && e.stopImmediatePropagation();
+  }
   async submit() {
     let result;
     if ((result = !!this.form))
@@ -43,10 +46,7 @@ export class SmoothlySubmit {
     return result;
   }
   render() {
-    return [
-      h("smoothly-spinner", { active: this.processing }),
-      h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, h("slot", null)),
-    ];
+    return (h(Host, { onClick: (e) => this.handleClick(e) }, h("smoothly-spinner", { active: this.processing }), h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, h("slot", null))));
   }
   static get is() { return "smoothly-submit"; }
   static get encapsulation() { return "scoped"; }

package/dist/custom-elements/index.js

@@ -1774,6 +1774,8 @@ const SmoothlyAppDemo$1 = class extends HTMLElement {
         redirect("/routing/pathParameter1");
       } }, "Internal"), h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
         redirect("https://google.com");
+      } }, "External"), h("smoothly-button", { disabled: true, style: { "max-width": "300px" }, onClick: () => {
+        redirect("https://google.com");
       } }, "External")), h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, h("h2", null, "Regex routing")), h("smoothly-room", { path: "old", label: "Old", to: "select" }), h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, h("smoothly-picker", { label: "All Animals Selected", style: { minWidth: "100px" }, labelSetting: "hide", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, "select-none-name": "Select All", options: [
         { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
         { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },
@@ -47322,7 +47324,7 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
   }
   render() {
     return [
-      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Input"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", { name: "some-date" }, "Calendar"), h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, h("span", null, "Option 3")), h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, h("span", null, "Option 4 (Disabled)"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
+      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Input"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", { name: "some-date" }, "Calendar"), h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, h("span", null, "Option 3")), h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, h("span", null, "Option 4 (Disabled)"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-submit", { disabled: true, expand: "block", onClick: e => console.log(e), onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
       h("smoothly-backtotop", null),
     ];
   }
@@ -48442,6 +48444,9 @@ const SmoothlySubmit$1 = class extends HTMLElement {
       this.processing = false;
     }
   }
+  handleClick(e) {
+    this.disabled && e.stopImmediatePropagation();
+  }
   async submit() {
     let result;
     if ((result = !!this.form))
@@ -48449,10 +48454,7 @@ const SmoothlySubmit$1 = class extends HTMLElement {
     return result;
   }
   render() {
-    return [
-      h("smoothly-spinner", { active: this.processing }),
-      h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, h("slot", null)),
-    ];
+    return (h(Host, { onClick: (e) => this.handleClick(e) }, h("smoothly-spinner", { active: this.processing }), h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, h("slot", null))));
   }
   static get style() { return styleCss$d; }
 };

package/dist/esm/smoothly-accordion_53.entry.js

@@ -126,6 +126,8 @@ const SmoothlyAppDemo = class {
         redirect("/routing/pathParameter1");
       } }, "Internal"), h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
         redirect("https://google.com");
+      } }, "External"), h("smoothly-button", { disabled: true, style: { "max-width": "300px" }, onClick: () => {
+        redirect("https://google.com");
       } }, "External")), h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, h("h2", null, "Regex routing")), h("smoothly-room", { path: "old", label: "Old", to: "select" }), h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, h("smoothly-picker", { label: "All Animals Selected", style: { minWidth: "100px" }, labelSetting: "hide", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, "select-none-name": "Select All", options: [
         { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
         { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },
@@ -21696,7 +21698,7 @@ const SmoothlyInputDemo = class {
   }
   render() {
     return [
-      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Input"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", { name: "some-date" }, "Calendar"), h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, h("span", null, "Option 3")), h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, h("span", null, "Option 4 (Disabled)"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
+      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Input"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", { name: "some-date" }, "Calendar"), h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, h("span", null, "Option 3")), h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, h("span", null, "Option 4 (Disabled)"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-submit", { disabled: true, expand: "block", onClick: e => console.log(e), onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
       h("smoothly-backtotop", null),
     ];
   }
@@ -22683,6 +22685,9 @@ const SmoothlySubmit = class {
       this.processing = false;
     }
   }
+  handleClick(e) {
+    this.disabled && e.stopImmediatePropagation();
+  }
   async submit() {
     let result;
     if ((result = !!this.form))
@@ -22690,10 +22695,7 @@ const SmoothlySubmit = class {
     return result;
   }
   render() {
-    return [
-      h("smoothly-spinner", { active: this.processing }),
-      h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, h("slot", null)),
-    ];
+    return (h(Host, { onClick: (e) => this.handleClick(e) }, h("smoothly-spinner", { active: this.processing }), h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, h("slot", null))));
   }
 };
 function hasNameAndValue(element) {