smoothly 0.1.77 → 0.1.81

package/dist/cjs/smoothly-dialog-demo.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
-const SmoothlyDialogDemo = class {
+let SmoothlyDialogDemo = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-c973259c.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-de5d1ee1.js');
 
 const styleCss = ".sc-smoothly-dialog-h{display:block;position:fixed;left:0;top:0;width:100%;height:100%;z-index:1;background:rgba(var(--smoothly-default-color), var(--smoothly-semitransparent)) !important}[hidden].sc-smoothly-dialog-h{display:none}.sc-smoothly-dialog-h>header.sc-smoothly-dialog{border-top-left-radius:8px;border-top-right-radius:8px;margin-top:2em;color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color));border-color:rgb(var(--smoothly-primary-color))}.sc-smoothly-dialog-h:not([header]) header.sc-smoothly-dialog{border:none}.sc-smoothly-dialog-h>*.sc-smoothly-dialog{position:relative;color:rgb(var(--smoothly-default-contrast));background-color:rgb(var(--smoothly-default-color));border-color:rgb(var(--smoothly-color));border-width:1px;border-style:solid;max-width:40em;width:calc(100vw - 4em - 2px);max-height:calc(100vh - 6em - 2px);height:auto;margin-left:auto;margin-right:auto;border-collapse:collapse}.sc-smoothly-dialog-h>main.sc-smoothly-dialog{border-bottom-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:2em;border:1px solid rgb(var(--smoothly-default-contrast));box-sizing:border-box;overflow:hidden}.sc-smoothly-dialog-h:not([header]) main.sc-smoothly-dialog{border-radius:8px}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog{position:absolute;right:-2em;top:-2em;z-index:1;border-color:transparent}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog:hover{border-color:transparent}.sc-smoothly-dialog-h smoothly-icon.sc-smoothly-dialog{background-color:rgb(var(--smoothly-color));border-radius:50%}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>*.sc-smoothly-dialog{margin:10px}";
 
-const SmoothlyDialog = class {
+let SmoothlyDialog = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.open = true;

package/dist/cjs/smoothly-display-amount.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-e37f73fe.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-fc82954f.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
 
-const SmoothlyDisplayAmount = class {
+let SmoothlyDisplayAmount = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }

package/dist/cjs/smoothly-display-date-time.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
 
-const SmoothlyDisplayDateTime = class {
+let SmoothlyDisplayDateTime = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }

package/dist/cjs/smoothly-display-demo.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-c973259c.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-de5d1ee1.js');
 
-const SmoothlyDisplayDemo = class {
+let SmoothlyDisplayDemo = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.notice = index.createEvent(this, "notice", 7);
@@ -16,7 +16,7 @@ const SmoothlyDisplayDemo = class {
   }
   render() {
     return [
-      index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" }))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")),
+      index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")),
     ];
   }
 };

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-7c9d0102.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-42db74b3.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
 
-const SmoothlyDisplay = class {
+let SmoothlyDisplay = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-c973259c.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-de5d1ee1.js');
 
 const styleCss = ".sc-smoothly-frame-h{display:block;width:100%;height:100%}[hidden].sc-smoothly-frame-h{display:none}.sc-smoothly-frame-h>iframe.sc-smoothly-frame{border:none;padding:none;margin:none}";
 
-const SmoothlyFrame = class {
+let SmoothlyFrame = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.trigger = index.createEvent(this, "trigger", 7);

package/dist/cjs/smoothly-icon-demo.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = "icon-demo.sc-smoothly-icon-demo{display:block}icon-demo[hidden].sc-smoothly-icon-demo{display:none}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo>*.sc-smoothly-icon-demo{margin:1cm}";
 
-const SmoothlyIconDemo = class {
+let SmoothlyIconDemo = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.page = 0;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[hidden].sc-smoothly-icon-h{display:none}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}";
 
-const SmoothlyIcon = class {
+let SmoothlyIcon = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.fill = "solid";

package/dist/cjs/smoothly-input-date-range.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-e37f73fe.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-fc82954f.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-input-date-range-h{position:relative;display:block}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-range-h>smoothly-input.sc-smoothly-input-date-range{padding:0}";
 
-const InputDateRange = class {
+let InputDateRange = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChanged = index.createEvent(this, "valueChanged", 7);

package/dist/cjs/smoothly-input-date.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-e37f73fe.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-fc82954f.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
 
-const InputDate = class {
+let InputDate = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChanged = index.createEvent(this, "valueChanged", 7);

package/dist/cjs/smoothly-input-demo.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
-const SmoothlyInputDemo = class {
+let SmoothlyInputDemo = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }

package/dist/cjs/smoothly-input-month.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-e37f73fe.js');
-const generate = require('./generate-7f7f7d99.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-fc82954f.js');
+const generate = require('./generate-14aca5d2.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
 
-const MonthSelector = class {
+let MonthSelector = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChanged = index.createEvent(this, "valueChanged", 7);

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
-const index$1 = require('./index-7c9d0102.js');
+const index = require('./index-138c41c2.js');
+const index$1 = require('./index-42db74b3.js');
 require('./_commonjsHelpers-10109b76.js');
 
 const styleCss = ".sc-smoothly-input-h{display:block;position:relative}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-text-tint));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;width:calc(100% - 0.4em);background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+smoothly-icon.sc-smoothly-input{display:block}.has-value.sc-smoothly-input-h>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}.sc-smoothly-input-h:focus-within>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 30px unset inset !important;-webkit-box-shadow:0 0 0 30px unset inset !important}input.sc-smoothly-input:-webkit-autofill{-webkit-text-fill-color:unset !important}input.sc-smoothly-input:-internal-autofill-previewed,input.sc-smoothly-input:-internal-autofill-selected,textarea.sc-smoothly-input:-internal-autofill-previewed,textarea.sc-smoothly-input:-internal-autofill-selected,select.sc-smoothly-input:-internal-autofill-previewed,select.sc-smoothly-input:-internal-autofill-selected{background-color:none !important;background-image:none !important;color:unset !important}";
 
-const SmoothlyInput = class {
+let SmoothlyInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.smoothlyChanged = index.createEvent(this, "smoothlyChanged", 7);
@@ -88,7 +88,7 @@ const SmoothlyInput = class {
           end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
           direction: backend.selectionDirection ? backend.selectionDirection : "none",
         } });
-      if ((!((event.ctrlKey || event.metaKey) && event.key == "v") && event.key.length == 1) ||
+      if ((!((event.ctrlKey || event.metaKey) && (event.key == "v" || event.key == "c")) && event.key.length == 1) ||
         event.key == "ArrowLeft" ||
         event.key == "ArrowRight" ||
         event.key == "Delete" ||
@@ -111,14 +111,21 @@ const SmoothlyInput = class {
       this.processKey({ key: letter }, backend);
   }
   onInput(event) {
-    const backend = event.target;
-    let data = backend.value;
-    if (data) {
-      event.preventDefault();
-      this.processKey({ key: "a", ctrlKey: true }, backend);
-      data = this.expiresAutocompleteFix(backend, data);
-      for (const letter of data)
-        this.processKey({ key: letter }, backend);
+    var _a;
+    if (event.inputType == "insertReplacementText") {
+      this.processKey({ key: "a", ctrlKey: true }, event.target);
+      [...((_a = event.data) !== null && _a !== void 0 ? _a : "")].forEach(c => this.processKey({ key: c }, event.target));
+    }
+    else {
+      const backend = event.target;
+      let data = backend.value;
+      if (data) {
+        event.preventDefault();
+        this.processKey({ key: "a", ctrlKey: true }, backend);
+        data = this.expiresAutocompleteFix(backend, data);
+        for (const letter of data)
+          this.processKey({ key: letter }, backend);
+      }
     }
   }
   expiresAutocompleteFix(backend, value) {

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-item-h{padding:.5em;cursor:pointer;background-color:rgb(var(--smoothly-default-shade));color:rgb(var(--smoothly-default-contrast));border:rgb(var(--smoothly-default-shade) solid 1px)}.sc-smoothly-item-h:hover{background-color:rgb(var(--smoothly-primary-color));color:rgb(var(--smoothly-primary-contrast))}";
 
-const Item = class {
+let Item = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.itemSelected = index.createEvent(this, "itemSelected", 7);
@@ -19,6 +19,10 @@ const Item = class {
     this.selected = true;
     this.itemSelected.emit();
   }
+  componentDidLoad() {
+    if (this.selected)
+      this.itemSelected.emit();
+  }
   async filter(filter) {
     const result = !(this.element.hidden = filter
       ? !((typeof this.value === "string" ? this.value : JSON.stringify(this.value)).toLowerCase().includes(filter) ||

package/dist/cjs/smoothly-menu-options.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ":host{max-height:300px;width:85%;max-height:var(--max-menu-height);border:1px solid black;box-sizing:border-box;background-color:rgb(var(--smoothly-default-shade));overflow-y:auto;cursor:pointer}div:last-child:not(:empty){padding:0.5em 1em;font-style:italic}";
 
-const SmoothlyMenuOptions = class {
+let SmoothlyMenuOptions = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.filteredOptions = [];

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-notification-h{display:block;min-width:32.6%;min-height:3em;border-radius:5px;margin:0.5em}[hidden].sc-smoothly-notification-h{display:none}smoothly-trigger.sc-smoothly-notification{float:right;text-align:right;margin-right:0.2em}";
 
-const Notification = class {
+let Notification = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.remove = index.createEvent(this, "remove", 7);

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;justify-content:flex-start;position:fixed;bottom:3em;left:0;text-align:center;width:100%;z-index:3}";
 
-const Notifier = class {
+let Notifier = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.notices = [];

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0.5em 1em}:host([data-highlight]){background-color:rgb(var(--smoothly-primary-color));color:rgb(var(--smoothly-primary-contrast));stroke:rgb(var(--smoothly-primary-contrast));fill:rgb(var(--smoothly-primary-contrast))}:host([data-highlight]) div:last-child{color:rgba(var(--smoothly-primary-contrast), 0.8)}:host div:last-child{color:rgba(var(--smoothly-default-contrast), 0.8);font-style:italic}";
 
-const SmoothlyOption = class {
+let SmoothlyOption = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.optionHover = index.createEvent(this, "optionHover", 7);

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ":host{--background-color:var(--smoothly-secondary-tint), 1;--color:var(--smoothly-secondary-contrast);--border-color:var(--smoothly-secondary-contrast), 1;--border-highlight-color:var(--smoothly-secondary-contrast), 1;--label-color:var(--smoothly-secondary-contrast), 0.8;--selected-item-border-radius:0.25rem;--selected-item-background-color:var(--smoothly-secondary-color), 1;--selected-item-color:255, 255, 255, 1}:host{display:block;position:relative;width:100%;cursor:pointer;--intergiro-transition:all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);transition:var(--intergiro-transition)}:host>div{display:flex;min-height:3em;background-color:rgba(var(--background-color));align-items:center;border:none;max-height:var(--max-height)}:host>div .icons>smoothly-icon{flex-shrink:0;padding-left:0.6em;stroke:rgba(var(--color), 0.4);fill:rgba(var(--color), 0.4);width:1.5em !important;height:1.5em !important}:host>div .icons>smoothly-icon:hover{fill:rgba(var(--color), 1)}:host>div input{width:100%;background-color:transparent;outline:none;border:none;cursor:pointer;color:rgb(var(--color));padding:0 1em;font-family:var(--smoothly-font-family);font-size:1.05em}:host>div input::placeholder{opacity:1;text-overflow:ellipsis}:host(:not(:focus-within)[multiple]) ul>li:last-child{position:absolute;pointer-events:none}:host([label=\"\"]) ul,:host:not([label]) ul,:host([label-setting=hide]) ul{padding-top:0.1em;padding-bottom:0.1em}label{position:absolute;top:1em;left:1em;color:rgba(var(--label-color));transition:var(--intergiro-transition);font-family:var(--smoothly-font-family);pointer-events:none;transform-origin:left}:host([has-selection]) label{display:var(--label-display)}:host([has-selection]) label,:host(:focus-within) label{transform:translateY(-1.2em) scale(0.7)}:host(:hover) smoothly-icon[data-arrow],:host(:focus-within) smoothly-icon[data-arrow]{stroke:rgba(var(--color), 1)}:host smoothly-icon[data-arrow]{pointer-events:none}:host(:not([is-open])) smoothly-icon[data-arrow=up]{display:none}:host([is-open]) smoothly-icon[data-arrow=down]{display:none}:host(:not([has-selection])) smoothly-icon:not([data-arrow]){display:none}:host smoothly-menu-options{position:absolute;z-index:1}:host(:not([is-open]))>smoothly-menu-options{display:none}";
 
-const SmoothlyPicker = class {
+let SmoothlyPicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.menuClose = index.createEvent(this, "menuClose", 7);

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-popup-h{display:inline-flex;position:relative}[hidden].sc-smoothly-popup-h{display:none}.sc-smoothly-popup-h:not([visible]) aside.sc-smoothly-popup{display:none}.sc-smoothly-popup-h aside.sc-smoothly-popup{display:inline;position:absolute;padding:0.3em;left:var(--left);right:var(--right);background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);border-style:solid;border-width:0.1em;border-radius:0.6em;z-index:3}[direction=down].sc-smoothly-popup-h aside.sc-smoothly-popup{top:2.2em;box-shadow:6px 5px 9px -9px black, 5px 6px 9px -9px black}[direction=up].sc-smoothly-popup-h aside.sc-smoothly-popup{bottom:2.2em;box-shadow:-6px -5px 9px -9px black, -5px -6px 9px -9px black}.sc-smoothly-popup-h:not([visible]) .background.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .background.sc-smoothly-popup{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2}.sc-smoothly-popup-h:not([visible]) .arrow.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .arrow.sc-smoothly-popup{background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);z-index:2;content:\"\";position:absolute;width:12px;height:12px;transform:rotate(45deg);left:calc(var(--left) + 1em);right:calc(var(--right) + 1em)}[direction=down].sc-smoothly-popup-h .arrow.sc-smoothly-popup{top:2em;border-top-style:solid;border-top-width:1px;border-left-style:solid;border-left-width:1px}[direction=up].sc-smoothly-popup-h .arrow.sc-smoothly-popup{bottom:2em;border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px}.sc-smoothly-popup-h .pointer.sc-smoothly-popup{cursor:pointer}";
 
-const SmoothlyPopup = class {
+let SmoothlyPopup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.popup = index.createEvent(this, "popup", 7);

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-138c41c2.js');
+
+const styleCss = ".sc-smoothly-quiet-h{opacity:0.5}";
+
+let SmoothlyQuiet = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { color: this.color }, index.h("slot", null)));
+  }
+};
+SmoothlyQuiet.style = styleCss;
+
+exports.smoothly_quiet = SmoothlyQuiet;

package/dist/cjs/smoothly-radio-group.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = "smoothly-radio-group{display:flex;position:relative;color:none !important;background:none !important;margin:0.5em 0}smoothly-radio-group[hidden]{display:none}smoothly-radio-group[orientation=vertical] *:not(:first-of-type)>input[type=radio]~label{border-top:none}smoothly-radio-group:not([orientation=vertical]) *:not(:first-of-type)>input[type=radio]~label{border-left:none}smoothly-radio-group[orientation=vertical]{flex-direction:column}smoothly-radio-group[orientation=vertical] :first-of-type>input[type=radio]~label{border-radius:4px 4px 0 0}smoothly-radio-group[orientation=vertical] :last-of-type>input[type=radio]~label{border-radius:0 0 4px 4px}smoothly-radio-group:not([orientation=vertical]){flex-direction:row}smoothly-radio-group:not([orientation=vertical]) :first-of-type>input[type=radio]~label{border-radius:4px 0 0 4px}smoothly-radio-group:not([orientation=vertical]) :last-of-type>input[type=radio]~label{border-radius:0 4px 4px 0}";
 
-const SmoothlyToggleGroup = class {
+let SmoothlyToggleGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.orientation = "horizontal";

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-radio-h{display:block;position:relative}[hidden].sc-smoothly-radio-h{display:none}label.sc-smoothly-radio{display:block;width:calc(100% - 2 * 0.4em);padding:0.2em 0.4em 0.2em 0.4em}input[type=radio].sc-smoothly-radio{position:absolute;left:0;top:0;width:calc(100%);height:100%;margin:0;appearance:none;-webkit-appearance:none}input[type=radio].sc-smoothly-radio~label.sc-smoothly-radio{border:1px solid rgb(var(--smoothly-default-color));color:rgba(var(--smoothly-default-contrast), 0.5);background:rgb(var(--smoothly-default-color))}input[type=radio].sc-smoothly-radio:checked~label.sc-smoothly-radio{background-color:rgb(var(--smoothly-default-shade));color:rgb(var(--smoothly-default-contrast))}";
 
-const SmoothlyRadio = class {
+let SmoothlyRadio = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.smoothlySelected = index.createEvent(this, "smoothlySelected", 7);

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = "smoothly-reorder>*{cursor:move;transition:transform 0.3s}smoothly-reorder>*.dragging{transition:none;box-shadow:0 0 10px rgba(var(--smoothly-dark-color));z-index:1;user-select:none}";
 
-const SmoothlyReorder = class {
+let SmoothlyReorder = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.reorder = index.createEvent(this, "reorder", 7);

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
-const SmoothlyRoom = class {
+let SmoothlyRoom = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }

package/dist/cjs/smoothly-select-demo.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-select-demo-h{display:block}[hidden].sc-smoothly-select-demo-h{display:none}button.sc-smoothly-select-demo:focus{outline:none}smoothly-selector.sc-smoothly-select-demo{outline:none}";
 
-const SmoothlySelectDemo = class {
+let SmoothlySelectDemo = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.currencies = ["SEK", "EUR"];

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-select-h{display:block}[hidden].sc-smoothly-select-h{display:none}select.sc-smoothly-select{min-width:1.5em;padding-top:0.5em;border:none;-webkit-appearance:none;background-color:rgb(var(--smoothly-color));padding:0.3em}select.sc-smoothly-select>option.sc-smoothly-select{background-color:inherit}select.sc-smoothly-select:focus{outline:none}";
 
-const SmoothlySelect = class {
+let SmoothlySelect = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.selectionChanged = index.createEvent(this, "selectionChanged", 7);

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:20px;border-radius:5px;padding:5px;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
 
-const Selector = class {
+let Selector = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.selected = index.createEvent(this, "selected", 7);

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-spinner-h{display:block;position:relative}[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h:not([active]){display:none}.sc-smoothly-spinner-h{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(var(--smoothly-default-color), var(--smoothly-semitransparent))}.sc-smoothly-spinner-h>div.sc-smoothly-spinner{opacity:1;position:absolute;left:calc(50% - 5em + 1.1em);top:calc(50% - 5em + 1.1em)}.sc-smoothly-spinner-h>div.sc-smoothly-spinner,.sc-smoothly-spinner-h>div.sc-smoothly-spinner::after{border-radius:50%;width:5em;height:5em}.sc-smoothly-spinner-h>div.sc-smoothly-spinner{content:\"\";color:transparent;position:relative;border-top:1.1em solid rgb(var(--smoothly-primary-tint));border-right:1.1em solid rgb(var(--smoothly-primary-tint));border-bottom:1.1em solid rgb(var(--smoothly-primary-tint));border-left:1.1em solid rgb(var(--smoothly-primary-color));-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
 
-const SmoothlySpinner = class {
+let SmoothlySpinner = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-submit-h{display:block;border-width:1px;border-style:solid;border-radius:3px}[hidden].sc-smoothly-submit-h{display:none}[disabled].sc-smoothly-submit-h{opacity:0.5}button.sc-smoothly-submit{padding:0.2em 0.3em;font-size:110%;font-weight:400}[processing].sc-smoothly-submit-h{border-color:rgb(var(--smoothly-light-color))}[processing].sc-smoothly-submit-h>button.sc-smoothly-submit{color:rgb(var(--smoothly-light-contrast));background:rgb(var(--smoothly-light-color))}.sc-smoothly-submit-h:not([processing]):not([disabled]):hover,.sc-smoothly-submit-h:not([processing]):not([disabled]):focus,.sc-smoothly-submit-h:not([processing]):not([disabled]):active{border-color:rgb(var(--smoothly-submit-border))}[expand=fill].sc-smoothly-submit-h>button.sc-smoothly-submit,[expand=block].sc-smoothly-submit-h>button.sc-smoothly-submit{width:100%}[expand=fill].sc-smoothly-submit-h{border-left:none;border-right:none}";
 
-const SmoothlySubmit = class {
+let SmoothlySubmit = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.submitEvent = index.createEvent(this, "submit", 7);

package/dist/cjs/smoothly-tab-switch.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-tab-switch-h{display:flex;flex-direction:row;margin:1em 1em 0em 0em}";
 
-const SmoothlyTabSwitch = class {
+let SmoothlyTabSwitch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b7e6a72c.js');
+const index = require('./index-138c41c2.js');
 
 const styleCss = ".sc-smoothly-tab-h:not([open])>label.sc-smoothly-tab{background-color:rgb(var(--smoothly-dark-shade))}.hide.sc-smoothly-tab{display:none}label.sc-smoothly-tab{display:block;padding:1em;background-color:rgb(var(--smoothly-default-shade));border-top-left-radius:5px;border-top-right-radius:5px;width:100px}div.sc-smoothly-tab{background-color:rgb(var(--smoothly-default-shade));padding:1em}";
 
-const SmoothlyTab = class {
+let SmoothlyTab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.expansionOpen = index.createEvent(this, "expansionOpen", 7);