smoothly 0.1.121 → 0.2.2

package/dist/collection/components/table/header/style.css

@@ -1,7 +1,9 @@
 :host {
 	display: table-cell;
-	padding: 0.75rem 0.5rem;
-	background-color: rgb(var(--smoothly-default-color));
-	border: 1px solid rgb(var(--smoothly-dark-color), 0.5);
 	line-height: 2.5rem;
+	background-color: rgb(var(--smoothly-color-shade));
+	border-bottom: 1px solid rgb(var(--smoothly-dark-color));
+	padding-left: 1rem;
+	font-weight: bold;
+	margin-bottom: 5rem;
 }

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

@@ -1,5 +1,8 @@
-import { Component, Element, h } from "@stencil/core";
+import { Component, Element, Event, h, Listen } from "@stencil/core";
 export class Table {
+  handleEvents(event) {
+    event.stopPropagation();
+  }
   render() {
     return [h("slot", null)];
   }
@@ -11,5 +14,34 @@ export class Table {
   static get styleUrls() { return {
     "$": ["style.css"]
   }; }
+  static get events() { return [{
+      "method": "loadMore",
+      "name": "loadMore",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "element"; }
+  static get listeners() { return [{
+      "name": "expansionLoad",
+      "method": "handleEvents",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "expansionOpen",
+      "method": "handleEvents",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/table/row/index.js

@@ -1,27 +1,21 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, h, Listen } from "@stencil/core";
 export class TableRow {
   constructor() {
-    this.align = "left";
+    this.expansions = [];
   }
-  openChanged(value) {
-    if (this.expansionElement)
-      this.element.after(this.expansionElement);
+  onExpansionLoad(event) {
+    this.expansions.push(event.target);
   }
-  onClick(e) {
-    this.open = !this.open;
-    e.stopPropagation();
-  }
-  componentDidRender() {
-    this.expansionOpen.emit(this.expansionElement);
-    if (this.expansionElement && this.open)
-      this.element.after(this.expansionElement);
+  onExpansionOpen(event) {
+    this.expansions.forEach(cell => {
+      if (cell != event.target)
+        cell.open = false;
+    });
+    if (event.detail)
+      this.element.after(event.detail);
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } },
-      h("slot", null),
-      h("tr", { ref: e => (this.expansionElement = e) },
-        h("td", { colSpan: 500, class: !this.open ? "hide" : "" },
-          h("slot", { name: "detail" })))));
+    return h("slot", null);
   }
   static get is() { return "smoothly-table-row"; }
   static get encapsulation() { return "scoped"; }
@@ -31,74 +25,16 @@ export class TableRow {
   static get styleUrls() { return {
     "$": ["style.css"]
   }; }
-  static get properties() { return {
-    "align": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"left\" | \"center\" | \"right\"",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "align",
-      "reflect": false,
-      "defaultValue": "\"left\""
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "beginOpen": {}
-  }; }
-  static get events() { return [{
-      "method": "expansionOpen",
-      "name": "expansionOpen",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "openChanged"
-    }]; }
   static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
+      "name": "expansionLoad",
+      "method": "onExpansionLoad",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "expansionOpen",
+      "method": "onExpansionOpen",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/table/row/style.css

@@ -1,14 +1,8 @@
 :host {
 	display: table-row;
 	border: 1px solid rgb(var(--smoothly-dark-color), 0.5);
-	cursor: pointer;
+	cursor: default;
 }
-:host:nth-child(even) {
-	background-color: rgb(var(--smoothly-default-color));
-}
-:host:hover {
-	background-color: rgb(var(--smoothly-default-color));
-}
-.hide{
+.hide {
 	display: none;
 }

package/dist/collection/components/table/style.css

@@ -1,9 +1,14 @@
 :host {
 	display: table;
 	text-align: left;
-	border-collapse: collapse;
-	border: 3px solid rgb(var(--smoothly-dark-color), 0.5);
-	width: 100%;
+	border: 1px solid rgb(var(--smoothly-dark-color));
+	width: 80%;
 	box-sizing: border-box;
 	background-color: rgb(var(--smoothly-default-color));
+	margin: 1rem 9.5%;
+	padding-bottom: 0.5rem;
+}
+.slot-detail > div {
+	padding: 10rem 0;
+	margin-left: 10rem;
 }

package/dist/custom-elements/index.js

@@ -1715,7 +1715,7 @@ const SmoothlyBacktotop$1 = class extends HTMLElement {
   static get style() { return styleCss$I; }
 };
 
-const styleCss$H = "[type=link].sc-smoothly-button-h{display:inline}.sc-smoothly-button-h:not([type=link]){display:block}.sc-smoothly-button-h{margin:1em;border-style:solid;border-width:1px;border-radius:3px}[hidden].sc-smoothly-button-h{display:none}[disabled].sc-smoothly-button-h{opacity:0.5}a.sc-smoothly-button,button.sc-smoothly-button{border-color:transparent;background-color:transparent;padding:0.2em 0.3em;font-size:110%;font-weight:400}.sc-smoothly-button-h:not([disabled]):hover,.sc-smoothly-button-h:not([disabled]):focus,.sc-smoothly-button-h:not([disabled]):active{border-color:var(--smoothly-button-border)}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{display:block;text-align:center;text-decoration:inherit}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{width:calc(100% - 0.6em)}.sc-smoothly-button-h>button.sc-smoothly-button{width:100%}[expand=fill].sc-smoothly-button-h{width:100%;border-left:none;border-right:none}";
+const styleCss$H = "[type=link].sc-smoothly-button-h{display:inline}.sc-smoothly-button-h:not([type=link]){display:block}.sc-smoothly-button-h{margin:1em;border-style:solid;border-width:1px;border-radius:3px}[hidden].sc-smoothly-button-h{display:none}[disabled].sc-smoothly-button-h{opacity:0.5}a.sc-smoothly-button,button.sc-smoothly-button{display:block;border-color:transparent;background-color:transparent;padding:0.2em 0.3em;font-size:110%;font-weight:400}.sc-smoothly-button-h:not([disabled]):hover,.sc-smoothly-button-h:not([disabled]):focus,.sc-smoothly-button-h:not([disabled]):active{border-color:var(--smoothly-button-border)}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{display:block;text-align:center;text-decoration:inherit}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{width:calc(100% - 0.6em)}.sc-smoothly-button-h>button.sc-smoothly-button{width:100%}[expand=fill].sc-smoothly-button-h{width:100%;border-left:none;border-right:none}";
 
 const SmoothlyButton$1 = class extends HTMLElement {
   constructor() {
@@ -47463,7 +47463,9 @@ const SmoothlyInput$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.smoothlyChanged = createEvent(this, "smoothlyChanged", 7);
+    this.smoothlyBlur = createEvent(this, "smoothlyBlur", 7);
+    this.smoothlyChange = createEvent(this, "smoothlyChange", 7);
+    this.smoothlyInput = createEvent(this, "smoothlyInput", 7);
     this.keepFocusOnReRender = false;
     this.type = "text";
     this.required = false;
@@ -47472,6 +47474,7 @@ const SmoothlyInput$1 = class extends HTMLElement {
     this.maxLength = Number.POSITIVE_INFINITY;
     this.autocomplete = true;
     this.disabled = false;
+    this.readonly = false;
   }
   get formatter() {
     let result;
@@ -47497,7 +47500,7 @@ const SmoothlyInput$1 = class extends HTMLElement {
     if (value != before) {
       if (typeof value == "string")
         value = value.trim();
-      this.smoothlyChanged.emit({ name: this.name, value });
+      this.smoothlyInput.emit({ name: this.name, value });
     }
   }
   onCurrency() {
@@ -47547,8 +47550,14 @@ const SmoothlyInput$1 = class extends HTMLElement {
     const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
     this.updateBackend(after, this.inputElement);
   }
-  onBlur(event) { }
+  onBlur(event) {
+    this.smoothlyBlur.emit();
+    if (this.initialValue != this.value)
+      this.smoothlyChange.emit({ name: this.name, value: this.value });
+    this.initialValue = undefined;
+  }
   onFocus(event) {
+    this.initialValue = this.value;
     const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
     if (event.target)
       this.updateBackend(after, event.target);
@@ -47624,8 +47633,10 @@ const SmoothlyInput$1 = class extends HTMLElement {
     return value;
   }
   processKey(event, backend) {
-    const after = dist.Action.apply(this.formatter, this.state, event);
-    this.updateBackend(after, backend);
+    if (!this.readonly) {
+      const after = dist.Action.apply(this.formatter, this.state, event);
+      this.updateBackend(after, backend);
+    }
   }
   updateBackend(after, backend) {
     if (after.value != backend.value)
@@ -47640,7 +47651,7 @@ const SmoothlyInput$1 = class extends HTMLElement {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
-    return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("label", { htmlFor: this.name }, h("slot", null)), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
+    return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("label", { htmlFor: this.name }, h("slot", null)), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
   }
   static get watchers() { return {
     "value": ["valueWatcher"],
@@ -47653,7 +47664,7 @@ function getLocale() {
   return dist$2.Locale.is(result) ? result : dist$2.Language.is(result) ? dist$2.Locale.toLocale(result) : undefined;
 }
 
-const styleCss$w = ".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;top:0px;left:0px;right:0px;bottom:0px;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 styleCss$w = ".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;top:0px;left:0px;right:0px;bottom:0px;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, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
 
 const InputDate = class extends HTMLElement {
   constructor() {
@@ -47671,7 +47682,7 @@ const InputDate = class extends HTMLElement {
   render() {
     var _a;
     return [
-      h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyChanged: e => (this.value = e.detail.value) }, h("slot", null)),
+      h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyInput: e => (this.value = e.detail.value) }, h("slot", null)),
       this.open && !this.disabled
         ? [
           h("div", { onClick: () => (this.open = false) }),
@@ -47717,7 +47728,7 @@ const InputDateRange = class extends HTMLElement {
   render() {
     var _a;
     return [
-      h("section", { onClick: () => (this.open = !this.open) }, h("smoothly-input", { type: "date", value: this.start, showLabel: this.showLabel, onSmoothlyChanged: e => (this.start = e.detail.value) }, "from"), h("span", null, "\u2013"), h("smoothly-input", { type: "date", showLabel: this.showLabel, value: this.end, onSmoothlyChanged: e => (this.end = e.detail.value) }, "to")),
+      h("section", { onClick: () => (this.open = !this.open) }, h("smoothly-input", { type: "date", value: this.start, showLabel: this.showLabel, onSmoothlyInput: e => (this.start = e.detail.value) }, "from"), h("span", null, "\u2013"), h("smoothly-input", { type: "date", showLabel: this.showLabel, value: this.end, onSmoothlyInput: e => (this.end = e.detail.value) }, "to")),
       this.open ? h("div", { onClick: () => (this.open = false) }) : [],
       this.open ? (h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : dist$2.Date.now(), onValueChanged: event => {
           this.value = event.detail;
@@ -47738,7 +47749,7 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
   }
   render() {
     return [
-      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, h("smoothly-input", { type: "text", name: "name" }, "Name"), 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("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("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("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), 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("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", null, "Date")), 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, "Address")), h("main", null, h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), 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("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("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("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), 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("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", null, "Date")), 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("smoothly-backtotop", null),
     ];
   }
@@ -47776,7 +47787,7 @@ const MonthSelector = class extends HTMLElement {
   static get style() { return styleCss$u; }
 };
 
-const styleCss$t = "[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 styleCss$t = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-item-h{padding:0.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 extends HTMLElement {
   constructor() {
@@ -48751,6 +48762,7 @@ const SmoothlyTabSwitch$1 = class extends HTMLElement {
     this.__registerHost();
   }
   openChanged(event) {
+    event.stopPropagation();
     this.selectedElement = event.target;
     this.selectedElement.open = true;
     this.element.after(event.detail);
@@ -48769,12 +48781,16 @@ const SmoothlyTabSwitch$1 = class extends HTMLElement {
   static get style() { return styleCss$a; }
 };
 
-const styleCss$9 = ".sc-smoothly-table-h{display:table;text-align:left;border-collapse:collapse;border:3px solid rgb(var(--smoothly-dark-color), 0.5);width:100%;box-sizing:border-box;background-color:rgb(var(--smoothly-default-color))}";
+const styleCss$9 = ".sc-smoothly-table-h{display:table;text-align:left;border:1px solid rgb(var(--smoothly-dark-color));width:80%;box-sizing:border-box;background-color:rgb(var(--smoothly-default-color));margin:1rem 9.5%;padding-bottom:0.5rem}.slot-detail.sc-smoothly-table>div.sc-smoothly-table{padding:10rem 0;margin-left:10rem}";
 
 const Table = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.loadMore = createEvent(this, "loadMore", 7);
+  }
+  handleEvents(event) {
+    event.stopPropagation();
   }
   render() {
     return [h("slot", null)];
@@ -48783,7 +48799,7 @@ const Table = class extends HTMLElement {
   static get style() { return styleCss$9; }
 };
 
-const styleCss$8 = ".sc-smoothly-table-cell-h{display:table-cell;padding:0.5em}";
+const styleCss$8 = ".sc-smoothly-table-cell-h{display:table-cell;vertical-align:middle;line-height:1.5rem;padding:0.2rem 0 0.2rem 1rem}";
 
 const TableCell = class extends HTMLElement {
   constructor() {
@@ -48805,21 +48821,21 @@ const TableDemo = class extends HTMLElement {
   }
   render() {
     return [
-      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null, "Header C")), h("smoothly-table-expandable-row", null, h("smoothly-table-expandable-cell", null, "Value 1A", h("div", { slot: "detail" }, "1A details")), h("smoothly-table-expandable-cell", null, h("smoothly-display", { type: "price", value: 20, currency: "EUR" }), h("div", { slot: "detail" }, "Budget details.")), h("smoothly-table-expandable-cell", null, h("smoothly-display", { type: "price", value: 18, currency: "EUR" }), h("div", { slot: "detail" }, "Cost details."))), h("smoothly-table-expandable-row", null, h("smoothly-table-expandable-cell", null, "Value 1A", h("div", { slot: "detail" }, "2A details")), h("smoothly-table-expandable-cell", null, h("smoothly-display", { type: "price", value: 30, currency: "EUR" }), h("div", { slot: "detail" }, "Budget details.")), h("smoothly-table-expandable-cell", null, h("smoothly-display", { type: "price", value: 38, currency: "EUR" }), h("div", { slot: "detail" }, "Cost details.")))),
-      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header D"), h("smoothly-table-header", null, "Header E"), h("smoothly-table-header", null, "Header F")), h("smoothly-table-row", null, h("smoothly-table-cell", null, "Value 1A"), h("smoothly-table-cell", null, h("smoothly-display", { type: "price", value: 20, currency: "EUR" })), h("smoothly-table-cell", null, h("smoothly-display", { type: "price", value: 18, currency: "EUR" })), h("div", { slot: "detail" }, "Cost details.")), h("smoothly-table-row", null, h("smoothly-table-cell", null, "Value 1A"), h("smoothly-table-cell", null, h("smoothly-display", { type: "price", value: 20, currency: "EUR" })), h("smoothly-table-cell", null, h("smoothly-display", { type: "price", value: 18, currency: "EUR" })), h("div", { slot: "detail" }, "Cost details."))),
+      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null, "Header C"), h("smoothly-table-header", null, "Header D"), h("smoothly-table-header", null)), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "normal row (exp.cell)", h("div", { slot: "detail" }, "expandable cell 1 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 2 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 3 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 4 content"))), h("smoothly-table-row", null, h("smoothly-table-cell", null, "normal row (nor.cell)\""), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details.")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details."))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "expandable row (nor.cell)"), h("smoothly-table-cell", null, "Normal cell"), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-cell", null, "Normal cell"), h("div", { slot: "detail" }, "expandable row content"))),
+      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null)), h("smoothly-table-expandable-row", null, "A Content", h("div", { slot: "detail" }, h("smoothly-tab-switch", null, h("smoothly-tab", { label: "1", open: true }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null)), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "B Content")))))))),
     ];
   }
   static get style() { return styleCss$7; }
 };
 
-const styleCss$6 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.5em}.hide.sc-smoothly-table-expandable-cell{display:none}";
+const styleCss$6 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;vertical-align:middle;line-height:1.5em;cursor:pointer;padding:0.2em 0 0.2em;border-style:solid solid none solid;border-width:2px;border-color:rgb(var(--smoothly-default-color))}.hide.sc-smoothly-table-expandable-cell{display:none}[open].sc-smoothly-table-expandable-cell-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border-style:solid solid none solid;border-width:2px;border-color:rgb(var(--smoothly-dark-color))}.slot-detail.sc-smoothly-table-expandable-cell{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left-style:solid;border-left-color:rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 5px 4px rgb(var(--smoothly-dark-color), 0.5);box-sizing:border-box;padding:0.5rem 2%}.sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{width:0.6rem;height:1rem;float:left;padding-left:0.2rem;padding-right:0.2rem;padding-bottom:0.5rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{transform:rotate(90deg)}";
 
 const TableExpandableCell = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.expansionOpen = createEvent(this, "expansionOpen", 7);
-    this.expansionLoaded = createEvent(this, "expansionLoaded", 7);
+    this.expansionLoad = createEvent(this, "expansionLoad", 7);
     this.align = "left";
   }
   openChanged(value) {
@@ -48833,7 +48849,7 @@ const TableExpandableCell = class extends HTMLElement {
     this.open = !this.open;
   }
   componentDidLoad() {
-    this.expansionLoaded.emit();
+    this.expansionLoad.emit();
   }
   componentDidRender() {
     if (this.beginOpen) {
@@ -48842,7 +48858,7 @@ const TableExpandableCell = class extends HTMLElement {
     }
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 500, class: !this.open ? "hide" : "" }, h("slot", { name: "detail" })))));
+    return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("smoothly-icon", { name: "chevron-forward", size: "tiny" }), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("div", { class: "slot-detail" }, h("slot", { name: "detail" }))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -48851,33 +48867,39 @@ const TableExpandableCell = class extends HTMLElement {
   static get style() { return styleCss$6; }
 };
 
-const styleCss$5 = ".sc-smoothly-table-expandable-row-h{display:table-row;border:1px solid rgb(var(--smoothly-default-color));cursor:pointer}.sc-smoothly-table-expandable-row-h:nth-child(even){background-color:rgb(var(--smoothly-default-tint))}.sc-smoothly-table-expandable-row-h:hover{background-color:rgb(var(--smoothly-default-color))}";
+const styleCss$5 = ".sc-smoothly-table-expandable-row-h{display:table-row;border:1px solid rgb(var(--smoothly-default-color));cursor:pointer;box-sizing:border-box}.hide.sc-smoothly-table-expandable-row{display:none}.slot-detail.sc-smoothly-table-expandable-row{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left-style:solid;border-left-color:rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 5px 2px rgb(var(--smoothly-dark-color), 0.5);box-sizing:border-box;padding:0.5rem 2%}.sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{width:0.6rem;height:1rem;float:left;padding-left:0.2rem;padding-right:0.2rem;padding-bottom:0.5rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{transform:rotate(90deg)}[open].sc-smoothly-table-expandable-row-h smoothly-table-cell.sc-smoothly-table-expandable-row{padding-bottom:0.5rem}[open].sc-smoothly-table-expandable-row-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border-style:solid;border-width:5px;box-shadow:inset 2px 0px 0px 0px rgb(var(--smoothly-dark-color)), inset 0px 2px 0px 0px rgb(var(--smoothly-dark-color)), inset -2px 0px 0px 0px rgb(var(--smoothly-dark-color)), inset 0px 0px 0px 2px rgb(var(--smoothly-default-color))}";
 
 const TableExpandableRow = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.expansions = [];
+    this.expansionOpen = createEvent(this, "expansionOpen", 7);
+    this.align = "left";
   }
-  onExpansionLoaded(event) {
-    this.expansions.push(event.target);
+  openChanged(value) {
+    if (this.expansionElement)
+      this.element.after(this.expansionElement);
   }
-  onDetailsLoaded(event) {
-    this.expansions.forEach(cell => {
-      if (cell != event.target)
-        cell.open = false;
-    });
-    if (event.detail)
-      this.element.after(event.detail);
+  onClick(e) {
+    this.open = !this.open;
+    e.stopPropagation();
+  }
+  componentDidRender() {
+    this.expansionOpen.emit(this.expansionElement);
+    if (this.expansionElement && this.open)
+      this.element.after(this.expansionElement);
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("smoothly-table-cell", null, h("smoothly-icon", { name: "chevron-forward", size: "tiny" })), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("div", { class: "slot-detail" }, h("slot", { name: "detail" }))))));
   }
   get element() { return this; }
+  static get watchers() { return {
+    "open": ["openChanged"]
+  }; }
   static get style() { return styleCss$5; }
 };
 
-const styleCss$4 = ".sc-smoothly-table-header-h{display:table-cell;padding:0.75rem 0.5rem;background-color:rgb(var(--smoothly-default-color));border:1px solid rgb(var(--smoothly-dark-color), 0.5);line-height:2.5rem}";
+const styleCss$4 = ".sc-smoothly-table-header-h{display:table-cell;line-height:2.5rem;background-color:rgb(var(--smoothly-color-shade));border-bottom:1px solid rgb(var(--smoothly-dark-color));padding-left:1rem;font-weight:bold;margin-bottom:5rem}";
 
 const TableHeader = class extends HTMLElement {
   constructor() {
@@ -48885,40 +48907,34 @@ const TableHeader = class extends HTMLElement {
     this.__registerHost();
   }
   render() {
-    return h("slot", null);
+    return (h(Host, null, h("slot", null)));
   }
   static get style() { return styleCss$4; }
 };
 
-const styleCss$3 = ".sc-smoothly-table-row-h{display:table-row;border:1px solid rgb(var(--smoothly-dark-color), 0.5);cursor:pointer}.sc-smoothly-table-row-h:nth-child(even){background-color:rgb(var(--smoothly-default-color))}.sc-smoothly-table-row-h:hover{background-color:rgb(var(--smoothly-default-color))}.hide.sc-smoothly-table-row{display:none}";
+const styleCss$3 = ".sc-smoothly-table-row-h{display:table-row;border:1px solid rgb(var(--smoothly-dark-color), 0.5);cursor:default}.hide.sc-smoothly-table-row{display:none}";
 
 const TableRow = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.expansionOpen = createEvent(this, "expansionOpen", 7);
-    this.align = "left";
-  }
-  openChanged(value) {
-    if (this.expansionElement)
-      this.element.after(this.expansionElement);
+    this.expansions = [];
   }
-  onClick(e) {
-    this.open = !this.open;
-    e.stopPropagation();
+  onExpansionLoad(event) {
+    this.expansions.push(event.target);
   }
-  componentDidRender() {
-    this.expansionOpen.emit(this.expansionElement);
-    if (this.expansionElement && this.open)
-      this.element.after(this.expansionElement);
+  onExpansionOpen(event) {
+    this.expansions.forEach(cell => {
+      if (cell != event.target)
+        cell.open = false;
+    });
+    if (event.detail)
+      this.element.after(event.detail);
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 500, class: !this.open ? "hide" : "" }, h("slot", { name: "detail" })))));
+    return h("slot", null);
   }
   get element() { return this; }
-  static get watchers() { return {
-    "open": ["openChanged"]
-  }; }
   static get style() { return styleCss$3; }
 };
 
@@ -49042,7 +49058,7 @@ const SmoothlyFrame = /*@__PURE__*/proxyCustomElement(SmoothlyFrame$1, [2,"smoot
 const SmoothlyGoogleFont = /*@__PURE__*/proxyCustomElement(SmoothlyGoogleFont$1, [2,"smoothly-google-font",{"value":[1]}]);
 const SmoothlyIcon = /*@__PURE__*/proxyCustomElement(SmoothlyIcon$1, [2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]);
 const SmoothlyIconDemo = /*@__PURE__*/proxyCustomElement(SmoothlyIconDemo$1, [2,"smoothly-icon-demo"]);
-const SmoothlyInput = /*@__PURE__*/proxyCustomElement(SmoothlyInput$1, [6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"currency":[513]}]);
+const SmoothlyInput = /*@__PURE__*/proxyCustomElement(SmoothlyInput$1, [6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"readonly":[1028],"currency":[513],"initialValue":[32]}]);
 const SmoothlyInputDate = /*@__PURE__*/proxyCustomElement(InputDate, [6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]]);
 const SmoothlyInputDateRange = /*@__PURE__*/proxyCustomElement(InputDateRange, [2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]]);
 const SmoothlyInputDemo = /*@__PURE__*/proxyCustomElement(SmoothlyInputDemo$1, [0,"smoothly-input-demo"]);
@@ -49068,13 +49084,13 @@ const SmoothlySubmit = /*@__PURE__*/proxyCustomElement(SmoothlySubmit$1, [6,"smo
 const SmoothlySvg = /*@__PURE__*/proxyCustomElement(SmoothlySvg$1, [2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}]);
 const SmoothlyTab = /*@__PURE__*/proxyCustomElement(SmoothlyTab$1, [6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]]);
 const SmoothlyTabSwitch = /*@__PURE__*/proxyCustomElement(SmoothlyTabSwitch$1, [6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]]);
-const SmoothlyTable = /*@__PURE__*/proxyCustomElement(Table, [6,"smoothly-table"]);
+const SmoothlyTable = /*@__PURE__*/proxyCustomElement(Table, [6,"smoothly-table",null,[[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]]);
 const SmoothlyTableCell = /*@__PURE__*/proxyCustomElement(TableCell, [6,"smoothly-table-cell"]);
 const SmoothlyTableDemo = /*@__PURE__*/proxyCustomElement(TableDemo, [2,"smoothly-table-demo"]);
-const SmoothlyTableExpandableCell = /*@__PURE__*/proxyCustomElement(TableExpandableCell, [6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]);
-const SmoothlyTableExpandableRow = /*@__PURE__*/proxyCustomElement(TableExpandableRow, [6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]);
-const SmoothlyTableHeader = /*@__PURE__*/proxyCustomElement(TableHeader, [6,"smoothly-table-header"]);
-const SmoothlyTableRow = /*@__PURE__*/proxyCustomElement(TableRow, [6,"smoothly-table-row",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]);
+const SmoothlyTableExpandableCell = /*@__PURE__*/proxyCustomElement(TableExpandableCell, [6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540]},[[0,"click","onClick"]]]);
+const SmoothlyTableExpandableRow = /*@__PURE__*/proxyCustomElement(TableExpandableRow, [6,"smoothly-table-expandable-row",{"align":[1],"open":[1540]},[[0,"click","onClick"]]]);
+const SmoothlyTableHeader = /*@__PURE__*/proxyCustomElement(TableHeader, [6,"smoothly-table-header",{"name":[1]}]);
+const SmoothlyTableRow = /*@__PURE__*/proxyCustomElement(TableRow, [6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]]);
 const SmoothlyTrigger = /*@__PURE__*/proxyCustomElement(SmoothlyTrigger$1, [6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]);
 const SmoothlyTriggerSink = /*@__PURE__*/proxyCustomElement(SmoothlyTriggerSink$1, [6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]);
 const SmoothlyTriggerSource = /*@__PURE__*/proxyCustomElement(SmoothlyTriggerSource$1, [6,"smoothly-trigger-source",{"listen":[1]}]);