smoothly 1.0.0 → 1.0.1-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/cjs/{Data-50d47740.js → Submit-02056bd9.js} +26 -1
  2. package/dist/cjs/Submit-02056bd9.js.map +1 -0
  3. package/dist/cjs/index.cjs.js +9 -8
  4. package/dist/cjs/index.cjs.js.map +1 -1
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/{smoothly-app_80.cjs.entry.js → smoothly-app_81.cjs.entry.js} +168 -140
  7. package/dist/cjs/smoothly-app_81.cjs.entry.js.map +1 -0
  8. package/dist/cjs/smoothly-trigger-sink.cjs.entry.js +3 -3
  9. package/dist/cjs/smoothly-trigger-sink.cjs.entry.js.map +1 -1
  10. package/dist/cjs/smoothly-trigger-source.cjs.entry.js +3 -3
  11. package/dist/cjs/smoothly-trigger-source.cjs.entry.js.map +1 -1
  12. package/dist/cjs/smoothly.cjs.js +1 -1
  13. package/dist/collection/collection-manifest.json +1 -0
  14. package/dist/collection/components/button/index.js +1 -1
  15. package/dist/collection/components/button/index.js.map +1 -1
  16. package/dist/collection/components/form/index.js +86 -77
  17. package/dist/collection/components/form/index.js.map +1 -1
  18. package/dist/collection/components/input/demo/controlled-form/index.js +50 -0
  19. package/dist/collection/components/input/demo/controlled-form/index.js.map +1 -0
  20. package/dist/collection/components/input/demo/controlled-form/style.css +7 -0
  21. package/dist/collection/components/input/demo/index.js +2 -2
  22. package/dist/collection/components/input/demo/index.js.map +1 -1
  23. package/dist/collection/components/input/submit/index.js +3 -12
  24. package/dist/collection/components/input/submit/index.js.map +1 -1
  25. package/dist/collection/model/Submit.js +14 -0
  26. package/dist/collection/model/Submit.js.map +1 -0
  27. package/dist/collection/model/index.js +1 -0
  28. package/dist/collection/model/index.js.map +1 -1
  29. package/dist/collection/smoothly.js +1 -1
  30. package/dist/collection/smoothly.js.map +1 -1
  31. package/dist/custom-elements/index.d.ts +6 -0
  32. package/dist/custom-elements/index.js +168 -113
  33. package/dist/custom-elements/index.js.map +1 -1
  34. package/dist/esm/{Data-c8093b5a.js → Submit-959d713d.js} +26 -2
  35. package/dist/esm/Submit-959d713d.js.map +1 -0
  36. package/dist/esm/index.js +2 -1
  37. package/dist/esm/index.js.map +1 -1
  38. package/dist/esm/loader.js +1 -1
  39. package/dist/esm/{smoothly-app_80.entry.js → smoothly-app_81.entry.js} +137 -110
  40. package/dist/esm/smoothly-app_81.entry.js.map +1 -0
  41. package/dist/esm/smoothly-trigger-sink.entry.js +1 -1
  42. package/dist/esm/smoothly-trigger-source.entry.js +1 -1
  43. package/dist/esm/smoothly.js +1 -1
  44. package/dist/smoothly/index.esm.js +1 -1
  45. package/dist/smoothly/index.esm.js.map +1 -1
  46. package/dist/smoothly/p-051d2b23.js +2 -0
  47. package/dist/smoothly/p-051d2b23.js.map +1 -0
  48. package/dist/smoothly/p-34b080fb.entry.js +2 -0
  49. package/dist/smoothly/p-34b080fb.entry.js.map +1 -0
  50. package/dist/smoothly/{p-635c813e.entry.js → p-ed11e814.entry.js} +2 -2
  51. package/dist/smoothly/{p-7a69b43f.entry.js → p-f0720fed.entry.js} +2 -2
  52. package/dist/smoothly/smoothly.esm.js +1 -1
  53. package/dist/smoothly/smoothly.esm.js.map +1 -1
  54. package/dist/types/components/form/index.d.ts +9 -8
  55. package/dist/types/components/input/demo/controlled-form/index.d.ts +12 -0
  56. package/dist/types/components.d.ts +16 -5
  57. package/dist/types/model/Submit.d.ts +13 -0
  58. package/dist/types/model/index.d.ts +1 -0
  59. package/dist/types/smoothly.d.ts +1 -1
  60. package/package.json +1 -1
  61. package/dist/cjs/Data-50d47740.js.map +0 -1
  62. package/dist/cjs/smoothly-app_80.cjs.entry.js.map +0 -1
  63. package/dist/esm/Data-c8093b5a.js.map +0 -1
  64. package/dist/esm/smoothly-app_80.entry.js.map +0 -1
  65. package/dist/smoothly/p-2e986022.js +0 -2
  66. package/dist/smoothly/p-2e986022.js.map +0 -1
  67. package/dist/smoothly/p-303520d1.entry.js +0 -2
  68. package/dist/smoothly/p-303520d1.entry.js.map +0 -1
  69. /package/dist/smoothly/{p-635c813e.entry.js.map → p-ed11e814.entry.js.map} +0 -0
  70. /package/dist/smoothly/{p-7a69b43f.entry.js.map → p-f0720fed.entry.js.map} +0 -0
@@ -724,6 +724,18 @@ var Data;
724
724
  Data.merge = merge;
725
725
  })(Data || (Data = {}));
726
726
 
727
+ var Submit;
728
+ (function (Submit) {
729
+ Submit.types = ["update", "change", "fetch", "create", "remove"];
730
+ Submit.type = object({
731
+ type: string(Submit.types).optional(),
732
+ result: islyFunction(),
733
+ value: Data.type,
734
+ });
735
+ Submit.is = Submit.type.is;
736
+ Submit.flaw = Submit.type.flaw;
737
+ })(Submit || (Submit = {}));
738
+
727
739
  var Hex;
728
740
  (function (Hex) {
729
741
  function is(value) {
@@ -1106,6 +1118,7 @@ const smoothly = /*#__PURE__*/Object.freeze({
1106
1118
  StateBase: StateBase,
1107
1119
  get Data () { return Data; },
1108
1120
  redirect: redirect,
1121
+ get Submit () { return Submit; },
1109
1122
  get Cosmetic () { return Cosmetic; }
1110
1123
  });
1111
1124
 
@@ -1135,7 +1148,7 @@ function global$1 () {
1135
1148
  return { Observers: Observers$1 };
1136
1149
  }
1137
1150
 
1138
- const styleCss$1l = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
1151
+ const styleCss$1m = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
1139
1152
 
1140
1153
  const SmoothlyAccordion$1 = class extends HTMLElement {
1141
1154
  constructor() {
@@ -1182,10 +1195,10 @@ const SmoothlyAccordion$1 = class extends HTMLElement {
1182
1195
  static get watchers() { return {
1183
1196
  "value": ["valueChanged"]
1184
1197
  }; }
1185
- static get style() { return styleCss$1l; }
1198
+ static get style() { return styleCss$1m; }
1186
1199
  };
1187
1200
 
1188
- const styleCss$1k = ".sc-smoothly-accordion-item-h{display:block}[hidden].sc-smoothly-accordion-item-h{display:none}details.sc-smoothly-accordion-item{padding:0}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>span.sc-smoothly-accordion-item{float:right;margin:0.2em;font-size:60%}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{font-size:120%;list-style-type:none;cursor:pointer;padding:0.4em;color:rgb(var(--smoothly-text-tint))}details.sc-smoothly-accordion-item>fieldset.sc-smoothly-accordion-item{border:none;margin:0;padding:0}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item::-webkit-details-marker{display:none}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{width:1em;height:auto;margin-bottom:-0.2em;margin-right:0.4em}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-accordion-item-h:not([open])>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-text-tint))}";
1201
+ const styleCss$1l = ".sc-smoothly-accordion-item-h{display:block}[hidden].sc-smoothly-accordion-item-h{display:none}details.sc-smoothly-accordion-item{padding:0}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>span.sc-smoothly-accordion-item{float:right;margin:0.2em;font-size:60%}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{font-size:120%;list-style-type:none;cursor:pointer;padding:0.4em;color:rgb(var(--smoothly-text-tint))}details.sc-smoothly-accordion-item>fieldset.sc-smoothly-accordion-item{border:none;margin:0;padding:0}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item::-webkit-details-marker{display:none}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{width:1em;height:auto;margin-bottom:-0.2em;margin-right:0.4em}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-accordion-item-h:not([open])>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-text-tint))}";
1189
1202
 
1190
1203
  const SmoothlyAccordionItem$1 = class extends HTMLElement {
1191
1204
  constructor() {
@@ -1235,10 +1248,10 @@ const SmoothlyAccordionItem$1 = class extends HTMLElement {
1235
1248
  static get watchers() { return {
1236
1249
  "open": ["openChanged"]
1237
1250
  }; }
1238
- static get style() { return styleCss$1k; }
1251
+ static get style() { return styleCss$1l; }
1239
1252
  };
1240
1253
 
1241
- const styleCss$1j = ".sc-smoothly-address-h{display:flex;justify-content:space-evenly}";
1254
+ const styleCss$1k = ".sc-smoothly-address-h{display:flex;justify-content:space-evenly}";
1242
1255
 
1243
1256
  const SmoothlyAddress$1 = class extends HTMLElement {
1244
1257
  constructor() {
@@ -1250,10 +1263,10 @@ const SmoothlyAddress$1 = class extends HTMLElement {
1250
1263
  render() {
1251
1264
  return h("smoothly-address-display", { value: this.value, editable: this.editable });
1252
1265
  }
1253
- static get style() { return styleCss$1j; }
1266
+ static get style() { return styleCss$1k; }
1254
1267
  };
1255
1268
 
1256
- const styleCss$1i = ".sc-smoothly-address-display-h{display:block;width:30%}";
1269
+ const styleCss$1j = ".sc-smoothly-address-display-h{display:block;width:30%}";
1257
1270
 
1258
1271
  const SmoothlyAddressDisplay$1 = class extends HTMLElement {
1259
1272
  constructor() {
@@ -1274,10 +1287,10 @@ const SmoothlyAddressDisplay$1 = class extends HTMLElement {
1274
1287
  ];
1275
1288
  }
1276
1289
  }
1277
- static get style() { return styleCss$1i; }
1290
+ static get style() { return styleCss$1j; }
1278
1291
  };
1279
1292
 
1280
- const styleCss$1h = ".sc-smoothly-addresses-h{display:flex;justify-content:space-around}";
1293
+ const styleCss$1i = ".sc-smoothly-addresses-h{display:flex;justify-content:space-around}";
1281
1294
 
1282
1295
  const SmoothlyAddresses$1 = class extends HTMLElement {
1283
1296
  constructor() {
@@ -1289,10 +1302,10 @@ const SmoothlyAddresses$1 = class extends HTMLElement {
1289
1302
  render() {
1290
1303
  return [this.value.map(value => h("smoothly-address", { value: value }))];
1291
1304
  }
1292
- static get style() { return styleCss$1h; }
1305
+ static get style() { return styleCss$1i; }
1293
1306
  };
1294
1307
 
1295
- const styleCss$1g = "smoothly-app{--header-height:5rem;display:block}smoothly-app main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:5;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-dark-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color));background:rgba(var(--smoothly-color));color:rgba(var(--smoothly-color-contrast))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2;height:100%}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container{display:flex;align-items:center;height:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{display:flex;gap:1rem;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;gap:0.5em;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav{width:50dvw;max-width:15rem;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;margin-bottom:1em;width:100%}smoothly-app>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center;gap:1em}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}}smoothly-app>smoothly-notifier>header>nav:not(.menu-open){display:none}";
1308
+ const styleCss$1h = "smoothly-app{--header-height:5rem;display:block}smoothly-app main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:5;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-dark-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color));background:rgba(var(--smoothly-color));color:rgba(var(--smoothly-color-contrast))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2;height:100%}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container{display:flex;align-items:center;height:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{display:flex;gap:1rem;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;gap:0.5em;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav{width:50dvw;max-width:15rem;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;margin-bottom:1em;width:100%}smoothly-app>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center;gap:1em}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}}smoothly-app>smoothly-notifier>header>nav:not(.menu-open){display:none}";
1296
1309
 
1297
1310
  const SmoothlyApp$1 = class extends HTMLElement {
1298
1311
  constructor() {
@@ -1367,7 +1380,7 @@ const SmoothlyApp$1 = class extends HTMLElement {
1367
1380
  static get watchers() { return {
1368
1381
  "selected": ["selectedChanged"]
1369
1382
  }; }
1370
- static get style() { return styleCss$1g; }
1383
+ static get style() { return styleCss$1h; }
1371
1384
  };
1372
1385
 
1373
1386
  const SmoothlyAppDemo$1 = class extends HTMLElement {
@@ -2600,7 +2613,7 @@ if (!globalThis.URLPattern) {
2600
2613
  globalThis.URLPattern = URLPattern$1;
2601
2614
  }
2602
2615
 
2603
- const styleCss$1f = ".sc-smoothly-app-room-h{display:flex;justify-content:center;text-align:center;cursor:pointer}main.sc-smoothly-app-room{overflow-y:auto}:not([label].sc-smoothly-app-room-h,[icon]).sc-smoothly-app-room-h,[disabled].sc-smoothly-app-room-h{display:none}.sc-smoothly-app-room-h>main.sc-smoothly-app-room{display:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room{height:100%;list-style:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0 1.5em;height:100%}[selected].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{display:flex;color:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color-shade))}.sc-smoothly-app-room-h:hover>li.sc-smoothly-app-room>a.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));transition:0.2s}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>smoothly-icon.sc-smoothly-app-room{align-self:inherit;margin-bottom:1em}@media screen and (max-width: 900px){.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem}}";
2616
+ const styleCss$1g = ".sc-smoothly-app-room-h{display:flex;justify-content:center;text-align:center;cursor:pointer}main.sc-smoothly-app-room{overflow-y:auto}:not([label].sc-smoothly-app-room-h,[icon]).sc-smoothly-app-room-h,[disabled].sc-smoothly-app-room-h{display:none}.sc-smoothly-app-room-h>main.sc-smoothly-app-room{display:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room{height:100%;list-style:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0 1.5em;height:100%}[selected].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{display:flex;color:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color-shade))}.sc-smoothly-app-room-h:hover>li.sc-smoothly-app-room>a.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));transition:0.2s}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>smoothly-icon.sc-smoothly-app-room{align-self:inherit;margin-bottom:1em}@media screen and (max-width: 900px){.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem}}";
2604
2617
 
2605
2618
  const SmoothlyAppRoom$1 = class extends HTMLElement {
2606
2619
  constructor() {
@@ -2637,10 +2650,10 @@ const SmoothlyAppRoom$1 = class extends HTMLElement {
2637
2650
  render() {
2638
2651
  return (h(Host, null, h("li", null, h("a", { href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: e => this.clickHandler(e) }, this.icon ? h("smoothly-icon", { name: this.icon, toolTip: this.label }) : this.label)), h("main", { ref: e => (this.contentElement = e) }, this.content && h("smoothly-lazy", { content: this.content }), h("slot", null))));
2639
2652
  }
2640
- static get style() { return styleCss$1f; }
2653
+ static get style() { return styleCss$1g; }
2641
2654
  };
2642
2655
 
2643
- const styleCss$1e = ".sc-smoothly-back-to-top-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
2656
+ const styleCss$1f = ".sc-smoothly-back-to-top-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
2644
2657
 
2645
2658
  const SmoothlyBackToTop$1 = class extends HTMLElement {
2646
2659
  constructor() {
@@ -2669,10 +2682,10 @@ const SmoothlyBackToTop$1 = class extends HTMLElement {
2669
2682
  behavior: "smooth",
2670
2683
  }) }, h("smoothly-icon", { name: "caret-up-outline" })));
2671
2684
  }
2672
- static get style() { return styleCss$1e; }
2685
+ static get style() { return styleCss$1f; }
2673
2686
  };
2674
2687
 
2675
- const styleCss$1d = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
2688
+ const styleCss$1e = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
2676
2689
 
2677
2690
  const SmoothlyBurger$1 = class extends HTMLElement {
2678
2691
  constructor() {
@@ -2724,7 +2737,7 @@ const SmoothlyBurger$1 = class extends HTMLElement {
2724
2737
  static get watchers() { return {
2725
2738
  "open": ["openChanged"]
2726
2739
  }; }
2727
- static get style() { return styleCss$1d; }
2740
+ static get style() { return styleCss$1e; }
2728
2741
  };
2729
2742
 
2730
2743
  const Button = ({ disabled, type, link }, children) => {
@@ -2756,7 +2769,7 @@ function local(path) {
2756
2769
  return new URL(path, window.location.origin).origin == window.location.origin;
2757
2770
  }
2758
2771
 
2759
- const styleCss$1c = "[color=default].sc-smoothly-button{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-button{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-button{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-button{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-button{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-button{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-button{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-button{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-button{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-button{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-button-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-button-h{display:inline;border:none}[disabled].sc-smoothly-button-h{opacity:0.5;pointer-events:none}a.sc-smoothly-button,button.sc-smoothly-button{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-button{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-button-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-button{padding:0.8em;min-width:8em}.sc-smoothly-button-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-button{padding:0.6em}[size=icon].sc-smoothly-button-h>button.sc-smoothly-button{padding:0.5em}[shape=rounded].sc-smoothly-button-h>button.sc-smoothly-button,[shape=rounded].sc-smoothly-button-h{border-radius:2rem}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-button-h>button.sc-smoothly-button{font-size:100%}[size=large].sc-smoothly-button-h>button.sc-smoothly-button{font-size:130%}.sc-smoothly-button-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-button-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-button-h>button.sc-smoothly-button{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-button-h{width:100%}[expand=full].sc-smoothly-button-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-button-h>button.sc-smoothly-button,[shape=rounded].sc-smoothly-button-h{border-radius:2rem}.sc-smoothly-button-h:not([fill=clear]):hover,.sc-smoothly-button-h:not([fill=clear]):focus,.sc-smoothly-button-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-button-h:not([fill=clear]):hover>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):focus>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):active>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):hover .sc-smoothly-button-s>smoothly-icon,.sc-smoothly-button-h:not([fill=clear]):focus .sc-smoothly-button-s>smoothly-icon,.sc-smoothly-button-h:not([fill=clear]):active .sc-smoothly-button-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-button-h:hover>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h:focus>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h:active>button.sc-smoothly-button{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-button-h{opacity:0.5;pointer-events:none}.sc-smoothly-button-h:not([fill]),[fill=default].sc-smoothly-button-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-button-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-button-h>button.sc-smoothly-button,[fill=default].sc-smoothly-button-h>button.sc-smoothly-button{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h>button.sc-smoothly-button{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-button-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-button-h{background:transparent;border-color:transparent}.sc-smoothly-button-s>smoothly-icon[slot=start],.sc-smoothly-button-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-button-h{display:none}";
2772
+ const styleCss$1d = "[color=default].sc-smoothly-button{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-button{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-button{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-button{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-button{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-button{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-button{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-button{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-button{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-button{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-button-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-button-h{display:inline;border:none}[disabled].sc-smoothly-button-h{opacity:0.5;pointer-events:none}a.sc-smoothly-button,button.sc-smoothly-button{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-button{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-button-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-button{padding:0.8em;min-width:8em}.sc-smoothly-button-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-button{padding:0.6em}[size=icon].sc-smoothly-button-h>button.sc-smoothly-button{padding:0.5em}[shape=rounded].sc-smoothly-button-h>button.sc-smoothly-button,[shape=rounded].sc-smoothly-button-h{border-radius:2rem}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-button-h>button.sc-smoothly-button{font-size:100%}[size=large].sc-smoothly-button-h>button.sc-smoothly-button{font-size:130%}.sc-smoothly-button-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-button-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-button-h>button.sc-smoothly-button{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-button-h{width:100%}[expand=full].sc-smoothly-button-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-button-h>button.sc-smoothly-button,[shape=rounded].sc-smoothly-button-h{border-radius:2rem}.sc-smoothly-button-h:not([fill=clear]):hover,.sc-smoothly-button-h:not([fill=clear]):focus,.sc-smoothly-button-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-button-h:not([fill=clear]):hover>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):focus>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):active>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):hover .sc-smoothly-button-s>smoothly-icon,.sc-smoothly-button-h:not([fill=clear]):focus .sc-smoothly-button-s>smoothly-icon,.sc-smoothly-button-h:not([fill=clear]):active .sc-smoothly-button-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-button-h:hover>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h:focus>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h:active>button.sc-smoothly-button{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-button-h{opacity:0.5;pointer-events:none}.sc-smoothly-button-h:not([fill]),[fill=default].sc-smoothly-button-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-button-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-button-h>button.sc-smoothly-button,[fill=default].sc-smoothly-button-h>button.sc-smoothly-button{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h>button.sc-smoothly-button{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-button-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-button-h{background:transparent;border-color:transparent}.sc-smoothly-button-s>smoothly-icon[slot=start],.sc-smoothly-button-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-button-h{display:none}";
2760
2773
 
2761
2774
  const SmoothlyButton$1 = class extends HTMLElement {
2762
2775
  constructor() {
@@ -2772,12 +2785,12 @@ const SmoothlyButton$1 = class extends HTMLElement {
2772
2785
  this.link = undefined;
2773
2786
  }
2774
2787
  render() {
2775
- return h(Button, { disabled: this.disabled, type: this.type, link: this.link });
2788
+ return (h(Button, { disabled: this.disabled, type: this.type, link: this.link }, h("slot", null)));
2776
2789
  }
2777
- static get style() { return styleCss$1c; }
2790
+ static get style() { return styleCss$1d; }
2778
2791
  };
2779
2792
 
2780
- const styleCss$1b = ".sc-smoothly-button-confirm-h{display:inline-block}[disabled].sc-smoothly-button-confirm-h{opacity:0.5}.sc-smoothly-button-confirm-h:not([warning]) smoothly-button.sc-smoothly-button-confirm:first-child{display:none}[warning].sc-smoothly-button-confirm-h smoothly-button.sc-smoothly-button-confirm:nth-child(2){display:none}[expand].sc-smoothly-button-confirm-h{width:100%}";
2793
+ const styleCss$1c = ".sc-smoothly-button-confirm-h{display:inline-block}[disabled].sc-smoothly-button-confirm-h{opacity:0.5}.sc-smoothly-button-confirm-h:not([warning]) smoothly-button.sc-smoothly-button-confirm:first-child{display:none}[warning].sc-smoothly-button-confirm-h smoothly-button.sc-smoothly-button-confirm:nth-child(2){display:none}[expand].sc-smoothly-button-confirm-h{width:100%}";
2781
2794
 
2782
2795
  const SmoothlyButtonConfirm$1 = class extends HTMLElement {
2783
2796
  constructor() {
@@ -2812,10 +2825,10 @@ const SmoothlyButtonConfirm$1 = class extends HTMLElement {
2812
2825
  render() {
2813
2826
  return (h(Host, { warning: this.clickTimeStamp }, h("smoothly-button", { fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: this.type, onClick: event => this.clickHandler(event) }, h("smoothly-icon", { name: "alert-outline", fill: "solid", color: "warning", size: "tiny" })), h("smoothly-button", { fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: this.type, onClick: event => this.clickHandler(event) }, h("slot", null))));
2814
2827
  }
2815
- static get style() { return styleCss$1b; }
2828
+ static get style() { return styleCss$1c; }
2816
2829
  };
2817
2830
 
2818
- const styleCss$1a = "smoothly-button-demo{display:block;margin:1rem}smoothly-button-demo>section>div{display:flex;align-items:center}";
2831
+ const styleCss$1b = "smoothly-button-demo{display:block;margin:1rem}smoothly-button-demo>section>div{display:flex;align-items:center}";
2819
2832
 
2820
2833
  const SmoothlyButtonDemo$1 = class extends HTMLElement {
2821
2834
  constructor() {
@@ -2831,7 +2844,7 @@ const SmoothlyButtonDemo$1 = class extends HTMLElement {
2831
2844
  h("smoothly-back-to-top", null),
2832
2845
  ];
2833
2846
  }
2834
- static get style() { return styleCss$1a; }
2847
+ static get style() { return styleCss$1b; }
2835
2848
  };
2836
2849
 
2837
2850
  var Alpha2$1;
@@ -20992,7 +21005,7 @@ function years(current) {
20992
21005
  return result;
20993
21006
  }
20994
21007
 
20995
- const styleCss$19 = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5;margin-bottom:1rem}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}.sc-smoothly-calendar-h>table.sc-smoothly-calendar{table-layout:fixed;width:100%}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade));cursor:pointer;user-select:none}td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-danger-tint))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-danger-tint), var(--other-month-opacity))}td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.disable.sc-smoothly-calendar{cursor:not-allowed;background-color:rgb(var(--smoothly-default-tint), 0.5);color:rgb(var(--smoothly-default-contrast), 0.5)}";
21008
+ const styleCss$1a = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5;margin-bottom:1rem}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}.sc-smoothly-calendar-h>table.sc-smoothly-calendar{table-layout:fixed;width:100%}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade));cursor:pointer;user-select:none}td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-danger-tint))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-danger-tint), var(--other-month-opacity))}td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.disable.sc-smoothly-calendar{cursor:not-allowed;background-color:rgb(var(--smoothly-default-tint), 0.5);color:rgb(var(--smoothly-default-contrast), 0.5)}";
20996
21009
 
20997
21010
  const Calendar = class extends HTMLElement {
20998
21011
  constructor() {
@@ -21082,7 +21095,7 @@ const Calendar = class extends HTMLElement {
21082
21095
  "start": ["onStart"],
21083
21096
  "end": ["onEnd"]
21084
21097
  }; }
21085
- static get style() { return styleCss$19; }
21098
+ static get style() { return styleCss$1a; }
21086
21099
  };
21087
21100
 
21088
21101
  var CallingCode;
@@ -27238,7 +27251,7 @@ function create$2(language) {
27238
27251
  }, language);
27239
27252
  }
27240
27253
 
27241
- const styleCss$18 = "*.sc-smoothly-checkbox{box-sizing:border-box}.sc-smoothly-checkbox-h{display:grid;width:fit-content;grid-template-columns:auto 1fr;row-gap:0.5rem;align-items:center}.sc-smoothly-checkbox-h label.sc-smoothly-checkbox:empty{display:none}.sc-smoothly-checkbox-h label.sc-smoothly-checkbox{grid-column:2;margin-left:0.2rem}.sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{grid-column:1;line-height:0;border:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-checkbox-h:not([disabled]):not([unavailable]) smoothly-icon.sc-smoothly-checkbox{cursor:pointer}[disabled].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox,[unavailable].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{border-color:rgb(var(--smoothly-color-contrast), 0.3)}[disabled].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox,[unavailable].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{opacity:0.7}.sc-smoothly-checkbox-h:not([checked]) smoothly-icon.sc-smoothly-checkbox,.sc-smoothly-checkbox-h:not([intermediate]) smoothly-icon .sc-smoothly-checkbox:not([unavailable]){stroke:rgb(var(--smoothly-color-contrast))}.sc-smoothly-checkbox-h div.expansion.sc-smoothly-checkbox{position:relative;grid-column-start:2;background-color:rgb(var(--smoothly-secondary-color));color:rgb(var(--smoothly-secondary-contrast));padding:0.5rem;border-radius:5px}.sc-smoothly-checkbox-h:not([checked]) div.expansion.sc-smoothly-checkbox,.sc-smoothly-checkbox-h div.expansion.sc-smoothly-checkbox:empty{display:none}.sc-smoothly-checkbox-h div.expansion.sc-smoothly-checkbox::before{content:\"\\25B2\";position:absolute;bottom:calc(100% + 0.5rem - 0.3rem );line-height:0;left:0.5rem;color:rgb(var(--smoothly-secondary-color))}";
27254
+ const styleCss$19 = "*.sc-smoothly-checkbox{box-sizing:border-box}.sc-smoothly-checkbox-h{display:grid;width:fit-content;grid-template-columns:auto 1fr;row-gap:0.5rem;align-items:center}.sc-smoothly-checkbox-h label.sc-smoothly-checkbox:empty{display:none}.sc-smoothly-checkbox-h label.sc-smoothly-checkbox{grid-column:2;margin-left:0.2rem}.sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{grid-column:1;line-height:0;border:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-checkbox-h:not([disabled]):not([unavailable]) smoothly-icon.sc-smoothly-checkbox{cursor:pointer}[disabled].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox,[unavailable].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{border-color:rgb(var(--smoothly-color-contrast), 0.3)}[disabled].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox,[unavailable].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{opacity:0.7}.sc-smoothly-checkbox-h:not([checked]) smoothly-icon.sc-smoothly-checkbox,.sc-smoothly-checkbox-h:not([intermediate]) smoothly-icon .sc-smoothly-checkbox:not([unavailable]){stroke:rgb(var(--smoothly-color-contrast))}.sc-smoothly-checkbox-h div.expansion.sc-smoothly-checkbox{position:relative;grid-column-start:2;background-color:rgb(var(--smoothly-secondary-color));color:rgb(var(--smoothly-secondary-contrast));padding:0.5rem;border-radius:5px}.sc-smoothly-checkbox-h:not([checked]) div.expansion.sc-smoothly-checkbox,.sc-smoothly-checkbox-h div.expansion.sc-smoothly-checkbox:empty{display:none}.sc-smoothly-checkbox-h div.expansion.sc-smoothly-checkbox::before{content:\"\\25B2\";position:absolute;bottom:calc(100% + 0.5rem - 0.3rem );line-height:0;left:0.5rem;color:rgb(var(--smoothly-secondary-color))}";
27242
27255
 
27243
27256
  const SmoothlyCheckbox$1 = class extends HTMLElement {
27244
27257
  constructor() {
@@ -27288,10 +27301,10 @@ const SmoothlyCheckbox$1 = class extends HTMLElement {
27288
27301
  "checked": ["unavailableChanged"],
27289
27302
  "unavailable": ["unavailableChanged"]
27290
27303
  }; }
27291
- static get style() { return styleCss$18; }
27304
+ static get style() { return styleCss$19; }
27292
27305
  };
27293
27306
 
27294
- const styleCss$17 = "[color=default].sc-smoothly-color{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-color{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-color{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-color{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-color{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-color{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-color{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-color{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-color{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-color{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}";
27307
+ const styleCss$18 = "[color=default].sc-smoothly-color{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-color{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-color{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-color{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-color{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-color{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-color{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-color{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-color{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-color{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}";
27295
27308
 
27296
27309
  const SmoothlyColor$1 = class extends HTMLElement {
27297
27310
  constructor() {
@@ -27302,7 +27315,7 @@ const SmoothlyColor$1 = class extends HTMLElement {
27302
27315
  render() {
27303
27316
  return h("slot", null);
27304
27317
  }
27305
- static get style() { return styleCss$17; }
27318
+ static get style() { return styleCss$18; }
27306
27319
  };
27307
27320
 
27308
27321
  const SmoothlyCountry$1 = class extends HTMLElement {
@@ -27326,7 +27339,7 @@ const SmoothlyCountry$1 = class extends HTMLElement {
27326
27339
  get element() { return this; }
27327
27340
  };
27328
27341
 
27329
- const styleCss$16 = ".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}";
27342
+ const styleCss$17 = ".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}";
27330
27343
 
27331
27344
  const SmoothlyDialog$1 = class extends HTMLElement {
27332
27345
  constructor() {
@@ -27354,7 +27367,7 @@ const SmoothlyDialog$1 = class extends HTMLElement {
27354
27367
  h("main", null, h("slot", null)),
27355
27368
  ];
27356
27369
  }
27357
- static get style() { return styleCss$16; }
27370
+ static get style() { return styleCss$17; }
27358
27371
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
27359
27372
  };
27360
27373
 
@@ -29016,7 +29029,7 @@ class Handler {
29016
29029
  add$4("text", (settings) => new Handler(settings || {}));
29017
29030
  add$4("email", (settings) => new Handler(settings || {}));
29018
29031
 
29019
- const styleCss$15 = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
29032
+ const styleCss$16 = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
29020
29033
 
29021
29034
  const SmoothlyDisplay$1 = class extends HTMLElement {
29022
29035
  constructor() {
@@ -29062,14 +29075,14 @@ const SmoothlyDisplay$1 = class extends HTMLElement {
29062
29075
  }
29063
29076
  return result;
29064
29077
  }
29065
- static get style() { return styleCss$15; }
29078
+ static get style() { return styleCss$16; }
29066
29079
  };
29067
29080
  function getLocale$1() {
29068
29081
  const result = navigator.language;
29069
29082
  return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
29070
29083
  }
29071
29084
 
29072
- const styleCss$14 = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
29085
+ const styleCss$15 = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
29073
29086
 
29074
29087
  const SmoothlyDisplayAmount$1 = class extends HTMLElement {
29075
29088
  constructor() {
@@ -29120,10 +29133,10 @@ const SmoothlyDisplayAmount$1 = class extends HTMLElement {
29120
29133
  this.currency,
29121
29134
  ];
29122
29135
  }
29123
- static get style() { return styleCss$14; }
29136
+ static get style() { return styleCss$15; }
29124
29137
  };
29125
29138
 
29126
- const styleCss$13 = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
29139
+ const styleCss$14 = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
29127
29140
 
29128
29141
  const SmoothlyDisplayDateTime$1 = class extends HTMLElement {
29129
29142
  constructor() {
@@ -29138,7 +29151,7 @@ const SmoothlyDisplayDateTime$1 = class extends HTMLElement {
29138
29151
  const datetime = this.datetime.split("T");
29139
29152
  return [datetime[0], " ", datetime[1]];
29140
29153
  }
29141
- static get style() { return styleCss$13; }
29154
+ static get style() { return styleCss$14; }
29142
29155
  };
29143
29156
 
29144
29157
  const SmoothlyDisplayDemo$1 = class extends HTMLElement {
@@ -32113,7 +32126,7 @@ var Filter;
32113
32126
  });
32114
32127
  })(Filter || (Filter = {}));
32115
32128
 
32116
- const styleCss$12 = ".sc-smoothly-filter-h{position:relative;border:1px solid rgb(var(--smoothly-medium-tint));margin-left:1rem;margin-right:1rem;display:flex;flex-direction:row;align-items:center}.sc-smoothly-filter-h>div.sc-smoothly-filter-s>[slot=detail]{z-index:5}.sc-smoothly-filter-h.sc-smoothly-filter-s>[slot=bar]{pointer-events:auto;margin-left:0.3em;margin-right:0.3em}.sc-smoothly-filter-h>div.sc-smoothly-filter:empty+smoothly-icon.sc-smoothly-filter{display:none}.sc-smoothly-filter-h>smoothly-icon.sc-smoothly-filter{cursor:pointer;margin-left:0.3em;margin-right:0.3em;flex-shrink:0}.close.sc-smoothly-filter{position:fixed;z-index:3;top:0;left:0;width:100dvw;height:100dvh;background:transparent}.hidden.sc-smoothly-filter{display:none}.sc-smoothly-filter-h>.container.sc-smoothly-filter{padding:2em;position:absolute;right:0.35em;width:fit-content;display:flex;justify-content:center;top:100%;width:fit-content;z-index:4;background-color:rgb(var(--smoothly-color));margin:0.8em -2em}.container.sc-smoothly-filter:before{content:\"\";width:0.6em;height:0.6em;transform:rotate(45deg);border-top:1px solid rgb(var(--smoothly-medium-tint));border-left:1px solid rgb(var(--smoothly-medium-tint));background-color:rgb(var(--smoothly-color));position:absolute;z-index:3}.container.arrow-top.sc-smoothly-filter:before{left:calc(91%);top:-5px}.container.sc-smoothly-filter:after{content:\"\";height:100%;width:100%;border:1px solid rgb(var(--smoothly-medium-tint));border-radius:0.25em;position:absolute;top:0;left:0}";
32129
+ const styleCss$13 = ".sc-smoothly-filter-h{position:relative;border:1px solid rgb(var(--smoothly-medium-tint));margin-left:1rem;margin-right:1rem;display:flex;flex-direction:row;align-items:center}.sc-smoothly-filter-h>div.sc-smoothly-filter-s>[slot=detail]{z-index:5}.sc-smoothly-filter-h.sc-smoothly-filter-s>[slot=bar]{pointer-events:auto;margin-left:0.3em;margin-right:0.3em}.sc-smoothly-filter-h>div.sc-smoothly-filter:empty+smoothly-icon.sc-smoothly-filter{display:none}.sc-smoothly-filter-h>smoothly-icon.sc-smoothly-filter{cursor:pointer;margin-left:0.3em;margin-right:0.3em;flex-shrink:0}.close.sc-smoothly-filter{position:fixed;z-index:3;top:0;left:0;width:100dvw;height:100dvh;background:transparent}.hidden.sc-smoothly-filter{display:none}.sc-smoothly-filter-h>.container.sc-smoothly-filter{padding:2em;position:absolute;right:0.35em;width:fit-content;display:flex;justify-content:center;top:100%;width:fit-content;z-index:4;background-color:rgb(var(--smoothly-color));margin:0.8em -2em}.container.sc-smoothly-filter:before{content:\"\";width:0.6em;height:0.6em;transform:rotate(45deg);border-top:1px solid rgb(var(--smoothly-medium-tint));border-left:1px solid rgb(var(--smoothly-medium-tint));background-color:rgb(var(--smoothly-color));position:absolute;z-index:3}.container.arrow-top.sc-smoothly-filter:before{left:calc(91%);top:-5px}.container.sc-smoothly-filter:after{content:\"\";height:100%;width:100%;border:1px solid rgb(var(--smoothly-medium-tint));border-radius:0.25em;position:absolute;top:0;left:0}";
32117
32130
 
32118
32131
  const SmoothlyFilter$1 = class extends HTMLElement {
32119
32132
  constructor() {
@@ -32159,10 +32172,10 @@ const SmoothlyFilter$1 = class extends HTMLElement {
32159
32172
  this.expanded = !this.expanded;
32160
32173
  } }), h("div", { class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
32161
32174
  }
32162
- static get style() { return styleCss$12; }
32175
+ static get style() { return styleCss$13; }
32163
32176
  };
32164
32177
 
32165
- const styleCss$11 = ".sc-smoothly-filter-field-h{flex-grow:5}";
32178
+ const styleCss$12 = ".sc-smoothly-filter-field-h{flex-grow:5}";
32166
32179
 
32167
32180
  const SmoothlyFilterField$1 = class extends HTMLElement {
32168
32181
  constructor() {
@@ -32187,10 +32200,10 @@ const SmoothlyFilterField$1 = class extends HTMLElement {
32187
32200
  e.stopPropagation();
32188
32201
  } }, "Filter")));
32189
32202
  }
32190
- static get style() { return styleCss$11; }
32203
+ static get style() { return styleCss$12; }
32191
32204
  };
32192
32205
 
32193
- const styleCss$10 = ".sc-smoothly-filter-input-h{display:block}";
32206
+ const styleCss$11 = ".sc-smoothly-filter-input-h{display:block}";
32194
32207
 
32195
32208
  const SmoothlyFilterInput$1 = class extends HTMLElement {
32196
32209
  constructor() {
@@ -32260,10 +32273,10 @@ const SmoothlyFilterInput$1 = class extends HTMLElement {
32260
32273
  render() {
32261
32274
  return (h("smoothly-input", { name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, h("slot", null)));
32262
32275
  }
32263
- static get style() { return styleCss$10; }
32276
+ static get style() { return styleCss$11; }
32264
32277
  };
32265
32278
 
32266
- const styleCss$$ = ".sc-smoothly-filter-picker-h{display:contents}.sc-smoothly-filter-picker-h>smoothly-picker.sc-smoothly-filter-picker{flex-grow:1;width:12.5em}";
32279
+ const styleCss$10 = ".sc-smoothly-filter-picker-h{display:contents}.sc-smoothly-filter-picker-h>smoothly-picker.sc-smoothly-filter-picker{flex-grow:1;width:12.5em}";
32267
32280
 
32268
32281
  const SmoothlyFilterPicker$1 = class extends HTMLElement {
32269
32282
  constructor() {
@@ -32355,10 +32368,10 @@ const SmoothlyFilterPicker$1 = class extends HTMLElement {
32355
32368
  render() {
32356
32369
  return (h("smoothly-picker", { name: this.property, looks: "border", multiple: this.multiple, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyPickerLoaded: e => e.stopPropagation(), onSmoothlyInput: e => this.pickerHandler(e) }, this.label && (h("span", { slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), h("span", { slot: "search" }, "Search"), h("slot", null)));
32357
32370
  }
32358
- static get style() { return styleCss$$; }
32371
+ static get style() { return styleCss$10; }
32359
32372
  };
32360
32373
 
32361
- const styleCss$_ = ".sc-smoothly-filter-toggle-h{position:relative;display:inline-block}[flip].sc-smoothly-filter-toggle-h{transform:scaleX(-1)}";
32374
+ const styleCss$$ = ".sc-smoothly-filter-toggle-h{position:relative;display:inline-block}[flip].sc-smoothly-filter-toggle-h{transform:scaleX(-1)}";
32362
32375
 
32363
32376
  const SmoothlyFilterToggle$1 = class extends HTMLElement {
32364
32377
  constructor() {
@@ -32438,7 +32451,7 @@ const SmoothlyFilterToggle$1 = class extends HTMLElement {
32438
32451
  render() {
32439
32452
  return (h("smoothly-icon", { fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
32440
32453
  }
32441
- static get style() { return styleCss$_; }
32454
+ static get style() { return styleCss$$; }
32442
32455
  };
32443
32456
 
32444
32457
  var Method;
@@ -33253,7 +33266,7 @@ var Input;
33253
33266
  Input.is = Input.type.is;
33254
33267
  })(Input || (Input = {}));
33255
33268
 
33256
- const styleCss$Z = "smoothly-form{display:block;position:relative;--background-color:var(--smoothly-color-shade);--text-color:var(--smoothly-color-contrast)}smoothly-form>form{position:relative;min-width:15em}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:10em;flex-basis:40%}smoothly-form[looks=\"grid\"]>form>fieldset{border:rgba(var(--text-color), .5) solid .5px}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset,smoothly-form[looks=\"transparent\"]>form>fieldset{gap:2em}smoothly-form>form>div{display:flex;justify-content:end;gap:1em;margin-top:0.5rem}";
33269
+ const styleCss$_ = "smoothly-form{display:block;position:relative;--background-color:var(--smoothly-color-shade);--text-color:var(--smoothly-color-contrast)}smoothly-form>form{position:relative;min-width:15em}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:10em;flex-basis:40%}smoothly-form[looks=\"grid\"]>form>fieldset{border:rgba(var(--text-color), .5) solid .5px}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset,smoothly-form[looks=\"transparent\"]>form>fieldset{gap:2em}smoothly-form>form>div{display:flex;justify-content:end;gap:1em;margin-top:0.5rem}";
33257
33270
 
33258
33271
  const SmoothlyForm$1 = class extends HTMLElement {
33259
33272
  constructor() {
@@ -33267,14 +33280,14 @@ const SmoothlyForm$1 = class extends HTMLElement {
33267
33280
  this.listeners = {};
33268
33281
  this.color = undefined;
33269
33282
  this.value = {};
33270
- this.type = "create";
33283
+ this.action = undefined;
33284
+ this.type = this.action ? "create" : undefined;
33271
33285
  this.readonly = false;
33272
33286
  this.looks = "plain";
33273
33287
  this.name = undefined;
33274
- this.action = undefined;
33275
- this.processing = undefined;
33276
33288
  this.prevent = true;
33277
33289
  this.changed = false;
33290
+ this.processing = undefined;
33278
33291
  }
33279
33292
  async listen(property, listener) {
33280
33293
  var _a;
@@ -33298,6 +33311,12 @@ const SmoothlyForm$1 = class extends HTMLElement {
33298
33311
  async smoothlyInputHandler(event) {
33299
33312
  this.smoothlyFormInput.emit((this.value = Data.merge(this.value, event.detail)));
33300
33313
  }
33314
+ windowSubmitHandler(event) {
33315
+ event.target == this.element && event.detail.result(false);
33316
+ }
33317
+ submitHandler(event) {
33318
+ this.action && event.stopPropagation();
33319
+ }
33301
33320
  async smoothlyInputLoadHandler(event) {
33302
33321
  event.stopPropagation();
33303
33322
  event.detail(this);
@@ -33311,39 +33330,38 @@ const SmoothlyForm$1 = class extends HTMLElement {
33311
33330
  event.detail(this.readonly);
33312
33331
  }
33313
33332
  async submit(remove) {
33314
- var _a;
33315
- this.smoothlyFormSubmit.emit({ value: this.value, type: remove == true ? "remove" : this.type });
33316
- if (this.action) {
33317
- this.processing = true;
33318
- const action = this.action;
33319
- (_a = this.notice) === null || _a === void 0 ? void 0 : _a.emit(Notice.execute("Submitting form", async () => {
33320
- const response = await fetch(Request.create(remove == true
33321
- ? { method: "DELETE", url: action, header: { contentType: "application/json" }, body: this.value }
33322
- : this.type == "fetch"
33323
- ? {
33324
- method: "GET",
33325
- url: `${action}?${stringify(this.value)}`,
33326
- }
33327
- : {
33328
- method: this.type == "change" ? "PUT" : this.type == "update" ? "PATCH" : "POST",
33329
- url: action,
33330
- header: { contentType: "application/json" },
33331
- body: this.value,
33332
- }))
33333
- .catch(() => undefined);
33334
- let result;
33335
- if (!response || (response === null || response === void 0 ? void 0 : response.status) < 200 || response.status >= 300)
33336
- result = [false, "Failed to submit form."];
33337
- else {
33338
- result = [true, "Form successfully submitted."];
33339
- this.type == "create" && (await this.clear());
33340
- this.setInitialValue();
33341
- this.readonlyAtLoad && this.edit(!this.readonlyAtLoad);
33342
- }
33343
- this.processing = false;
33344
- return result;
33345
- }));
33333
+ this.processing = new Promise(resolve => {
33334
+ this.smoothlyFormSubmit.emit({ value: this.value, result: resolve, type: remove == true ? "remove" : this.type });
33335
+ if (this.action) {
33336
+ const action = this.action;
33337
+ this.notice.emit(Notice.execute("Submitting form", async () => {
33338
+ const method = remove
33339
+ ? "DELETE"
33340
+ : !this.type || this.type == "create"
33341
+ ? "POST"
33342
+ : this.type == "change"
33343
+ ? "PUT"
33344
+ : this.type == "update"
33345
+ ? "PATCH"
33346
+ : "GET";
33347
+ const response = await fetch(Request.create(method == "GET"
33348
+ ? { method, url: `${action}?${stringify(this.value)}` }
33349
+ : Object.assign({ method, url: action }, (this.value && { header: { contentType: "application/json" }, body: this.value }))))
33350
+ .catch(() => undefined);
33351
+ const result = !response || (response === null || response === void 0 ? void 0 : response.status) < 200 || response.status >= 300
33352
+ ? [false, "Failed to submit form."]
33353
+ : [true, "Form successfully submitted."];
33354
+ resolve(result[0]);
33355
+ return [...result];
33356
+ }));
33357
+ }
33358
+ });
33359
+ if (await this.processing) {
33360
+ this.type == "create" && (await this.clear());
33361
+ this.setInitialValue();
33362
+ this.readonlyAtLoad && this.edit(!this.readonlyAtLoad);
33346
33363
  }
33364
+ this.processing = undefined;
33347
33365
  }
33348
33366
  async clear() {
33349
33367
  this.inputs.forEach(input => {
@@ -33368,16 +33386,17 @@ const SmoothlyForm$1 = class extends HTMLElement {
33368
33386
  });
33369
33387
  }
33370
33388
  render() {
33371
- return (h(Host, null, h("smoothly-spinner", { active: this.processing }), h("form", { onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, h("fieldset", null, h("slot", null)), h("div", null, h("slot", { name: "edit" }), h("slot", { name: "reset" }), h("slot", { name: "clear" }), h("slot", { name: "submit" })))));
33389
+ return (h(Host, null, h("smoothly-spinner", { active: !!this.processing }), h("form", { onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, h("fieldset", null, h("slot", null)), h("div", null, h("slot", { name: "edit" }), h("slot", { name: "reset" }), h("slot", { name: "clear" }), h("slot", { name: "submit" })))));
33372
33390
  }
33391
+ get element() { return this; }
33373
33392
  static get watchers() { return {
33374
33393
  "value": ["watchValue"],
33375
33394
  "readonly": ["watchReadonly"]
33376
33395
  }; }
33377
- static get style() { return styleCss$Z; }
33396
+ static get style() { return styleCss$_; }
33378
33397
  };
33379
33398
 
33380
- const styleCss$Y = ".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}";
33399
+ const styleCss$Z = ".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}";
33381
33400
 
33382
33401
  const SmoothlyFrame$1 = class extends HTMLElement {
33383
33402
  constructor() {
@@ -33422,7 +33441,7 @@ const SmoothlyFrame$1 = class extends HTMLElement {
33422
33441
  return [];
33423
33442
  }
33424
33443
  get element() { return this; }
33425
- static get style() { return styleCss$Y; }
33444
+ static get style() { return styleCss$Z; }
33426
33445
  };
33427
33446
 
33428
33447
  const SmoothlyGoogleFont$1 = class extends HTMLElement {
@@ -33436,7 +33455,7 @@ const SmoothlyGoogleFont$1 = class extends HTMLElement {
33436
33455
  }
33437
33456
  };
33438
33457
 
33439
- const styleCss$X = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[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}";
33458
+ const styleCss$Y = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[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}";
33440
33459
 
33441
33460
  const SmoothlyIcon$1 = class extends HTMLElement {
33442
33461
  constructor() {
@@ -33475,10 +33494,10 @@ const SmoothlyIcon$1 = class extends HTMLElement {
33475
33494
  static get watchers() { return {
33476
33495
  "name": ["componentWillLoad"]
33477
33496
  }; }
33478
- static get style() { return styleCss$X; }
33497
+ static get style() { return styleCss$Y; }
33479
33498
  };
33480
33499
 
33481
- const styleCss$W = ".sc-smoothly-icon-demo-h{display:block}[hidden].sc-smoothly-icon-demo-h{display:none}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>*.sc-smoothly-icon-demo{margin:0.5cm}";
33500
+ const styleCss$X = ".sc-smoothly-icon-demo-h{display:block}[hidden].sc-smoothly-icon-demo-h{display:none}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>*.sc-smoothly-icon-demo{margin:0.5cm}";
33482
33501
 
33483
33502
  const SmoothlyIconDemo$1 = class extends HTMLElement {
33484
33503
  constructor() {
@@ -33962,10 +33981,10 @@ const SmoothlyIconDemo$1 = class extends HTMLElement {
33962
33981
  h("div", null, h("smoothly-icon", { name: "bicycle", toolTip: "Normal" }), h("smoothly-icon", { name: "bicycle", toolTip: "Flipped horizontally", flip: "x" }), h("smoothly-icon", { name: "bicycle", toolTip: "Flipped vertically", flip: "y" }), h("smoothly-icon", { name: "bicycle", toolTip: "Rotated 180deg", rotate: 180 }), h("smoothly-icon", { name: "wine", toolTip: "Rotated 60deg", rotate: 60 }), h("smoothly-icon", { name: "wine", toolTip: "Rotated 213deg", rotate: 213 }), h("smoothly-icon", { name: "wine", toolTip: "Rotated -60deg", rotate: -60 }), h("smoothly-icon", { name: "musical-notes", toolTip: "Flipped horizontally and rotated 45deg", rotate: 45, flip: "x" })),
33963
33982
  ];
33964
33983
  }
33965
- static get style() { return styleCss$W; }
33984
+ static get style() { return styleCss$X; }
33966
33985
  };
33967
33986
 
33968
- const styleCss$V = ".sc-smoothly-input-h{box-sizing:border-box}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"grid\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within) input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);padding:0 0.4em;overflow:hidden;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));color:rgb(var(--text-color, var(--smoothly-color-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input:nth-child(2){margin-left:0.2em}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0;top:0.6em;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.7em 0.3em 0.7em 0.4em}input.sc-smoothly-input{padding:1.2em 0.3em 0.2em 0.4em;box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h:not([readonly]):not(.has-value)[placeholder]>div.sc-smoothly-input>label.sc-smoothly-input,.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):not(.has-value):focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}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 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-color-contrast)))}";
33987
+ const styleCss$W = ".sc-smoothly-input-h{box-sizing:border-box}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"grid\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within) input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);padding:0 0.4em;overflow:hidden;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));color:rgb(var(--text-color, var(--smoothly-color-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input:nth-child(2){margin-left:0.2em}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0;top:0.6em;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.7em 0.3em 0.7em 0.4em}input.sc-smoothly-input{padding:1.2em 0.3em 0.2em 0.4em;box-sizing:border-box;width:100%;height:100%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.sc-smoothly-input-h:not([readonly]):not(.has-value)[placeholder]>div.sc-smoothly-input>label.sc-smoothly-input,.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):not(.has-value):focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}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 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-color-contrast)))}";
33969
33988
 
33970
33989
  const SmoothlyInput$1 = class extends HTMLElement {
33971
33990
  constructor() {
@@ -34245,14 +34264,14 @@ const SmoothlyInput$1 = class extends HTMLElement {
34245
34264
  "readonly": ["watchingReadonly"],
34246
34265
  "currency": ["onCurrency"]
34247
34266
  }; }
34248
- static get style() { return styleCss$V; }
34267
+ static get style() { return styleCss$W; }
34249
34268
  };
34250
34269
  function getLocale() {
34251
34270
  const result = navigator.language;
34252
34271
  return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
34253
34272
  }
34254
34273
 
34255
- const styleCss$U = ".sc-smoothly-input-checkbox-h{box-sizing:border-box}.sc-smoothly-input-checkbox-h[looks=\"border\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-checkbox-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-checkbox-h[looks=\"line\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-checkbox-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-checkbox-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-checkbox-h[looks=\"grid\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-checkbox-h{border:none}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within) input.sc-smoothly-input-checkbox{background:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5em;padding:.6em;box-sizing:border-box;background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input-checkbox{position:absolute;z-index:1}.sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1.2em;width:1.2em;border:1px solid black;display:block}.sc-smoothly-input-checkbox-h:not([readonly]) smoothly-icon.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]) input.sc-smoothly-input-checkbox{cursor:pointer}[disabled].sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox,[disabled].sc-smoothly-input-checkbox-h smoothly-icon.sc-smoothly-input-checkbox{border-color:rgb(var(--smoothly-color-contrast), 0.3);color:rgb(var(--smoothly-color-contrast), 0.4)}";
34274
+ const styleCss$V = ".sc-smoothly-input-checkbox-h{box-sizing:border-box}.sc-smoothly-input-checkbox-h[looks=\"border\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-checkbox-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-checkbox-h[looks=\"line\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-checkbox-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-checkbox-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-checkbox-h[looks=\"grid\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-checkbox-h{border:none}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within) input.sc-smoothly-input-checkbox{background:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5em;padding:.6em;box-sizing:border-box;background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input-checkbox{position:absolute;z-index:1}.sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1.2em;width:1.2em;border:1px solid black;display:block}.sc-smoothly-input-checkbox-h:not([readonly]) smoothly-icon.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]) input.sc-smoothly-input-checkbox{cursor:pointer}[disabled].sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox,[disabled].sc-smoothly-input-checkbox-h smoothly-icon.sc-smoothly-input-checkbox{border-color:rgb(var(--smoothly-color-contrast), 0.3);color:rgb(var(--smoothly-color-contrast), 0.4)}";
34256
34275
 
34257
34276
  const SmoothlyInputCheckbox$1 = class extends HTMLElement {
34258
34277
  constructor() {
@@ -34313,10 +34332,10 @@ const SmoothlyInputCheckbox$1 = class extends HTMLElement {
34313
34332
  static get watchers() { return {
34314
34333
  "checked": ["elementCheck"]
34315
34334
  }; }
34316
- static get style() { return styleCss$U; }
34335
+ static get style() { return styleCss$V; }
34317
34336
  };
34318
34337
 
34319
- const styleCss$T = "[color=default].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-clear-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-input-clear-h{display:inline;border:none}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}a.sc-smoothly-input-clear,button.sc-smoothly-input-clear{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-input-clear{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-clear{padding:0.8em;min-width:8em}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-clear{padding:0.6em}[size=icon].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{padding:0.5em}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}[type=button].sc-smoothly-input-clear-h>a.sc-smoothly-input-clear{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:100%}[size=large].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:130%}.sc-smoothly-input-clear-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-clear-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-input-clear-h{width:100%}[expand=full].sc-smoothly-input-clear-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}.sc-smoothly-input-clear-h:not([fill=clear]):hover,.sc-smoothly-input-clear-h:not([fill=clear]):focus,.sc-smoothly-input-clear-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-input-clear-h:not([fill=clear]):hover>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):focus>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):active>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):hover .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):focus .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):active .sc-smoothly-input-clear-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-input-clear-h:hover>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:focus>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:active>button.sc-smoothly-input-clear{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-clear-h:not([fill]),[fill=default].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=default].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-input-clear-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-input-clear-h{background:transparent;border-color:transparent}.sc-smoothly-input-clear-s>smoothly-icon[slot=start],.sc-smoothly-input-clear-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-input-clear-h{display:none}.sc-smoothly-input-clear-h:not([display]){display:none}.sc-smoothly-input-clear-h{transition:0.6s;margin:0rem;min-width:0rem}[type=\"input\"].sc-smoothly-input-clear-h{line-height:1}[type=\"form\"].sc-smoothly-input-clear-h{margin:1em 0em}.sc-smoothly-input-clear-h[type=\"input\"] .sc-smoothly-input-clear-s>smoothly-icon{filter:opacity(60%);font-size:70%}.sc-smoothly-input-clear-h[type=\"input\"]:hover .sc-smoothly-input-clear-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}[type=\"input\"].sc-smoothly-input-clear-h button.sc-smoothly-input-clear{padding:0rem;margin:0rem;min-width:0rem}";
34338
+ const styleCss$U = "[color=default].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-clear-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-input-clear-h{display:inline;border:none}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}a.sc-smoothly-input-clear,button.sc-smoothly-input-clear{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-input-clear{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-clear{padding:0.8em;min-width:8em}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-clear{padding:0.6em}[size=icon].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{padding:0.5em}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}[type=button].sc-smoothly-input-clear-h>a.sc-smoothly-input-clear{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:100%}[size=large].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:130%}.sc-smoothly-input-clear-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-clear-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-input-clear-h{width:100%}[expand=full].sc-smoothly-input-clear-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}.sc-smoothly-input-clear-h:not([fill=clear]):hover,.sc-smoothly-input-clear-h:not([fill=clear]):focus,.sc-smoothly-input-clear-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-input-clear-h:not([fill=clear]):hover>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):focus>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):active>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):hover .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):focus .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):active .sc-smoothly-input-clear-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-input-clear-h:hover>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:focus>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:active>button.sc-smoothly-input-clear{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-clear-h:not([fill]),[fill=default].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=default].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-input-clear-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-input-clear-h{background:transparent;border-color:transparent}.sc-smoothly-input-clear-s>smoothly-icon[slot=start],.sc-smoothly-input-clear-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-input-clear-h{display:none}.sc-smoothly-input-clear-h:not([display]){display:none}.sc-smoothly-input-clear-h{transition:0.6s;margin:0rem;min-width:0rem}[type=\"input\"].sc-smoothly-input-clear-h{line-height:1}[type=\"form\"].sc-smoothly-input-clear-h{margin:1em 0em}.sc-smoothly-input-clear-h[type=\"input\"] .sc-smoothly-input-clear-s>smoothly-icon{filter:opacity(60%);font-size:70%}.sc-smoothly-input-clear-h[type=\"input\"]:hover .sc-smoothly-input-clear-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}[type=\"input\"].sc-smoothly-input-clear-h button.sc-smoothly-input-clear{padding:0rem;margin:0rem;min-width:0rem}";
34320
34339
 
34321
34340
  const SmoothlyInputClear$1 = class extends HTMLElement {
34322
34341
  constructor() {
@@ -34358,10 +34377,10 @@ const SmoothlyInputClear$1 = class extends HTMLElement {
34358
34377
  render() {
34359
34378
  return (h(Button, { disabled: this.disabled, type: "button" }, h("slot", null)));
34360
34379
  }
34361
- static get style() { return styleCss$T; }
34380
+ static get style() { return styleCss$U; }
34362
34381
  };
34363
34382
 
34364
- const styleCss$S = ".sc-smoothly-input-color-h{display:flex}.sc-smoothly-input-color-h smoothly-input.sc-smoothly-input-color{width:100%}.sc-smoothly-input-color-h .color-sample.sc-smoothly-input-color{height:2em;width:5em;background-color:var(--value);border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;border-radius:2px}";
34383
+ const styleCss$T = ".sc-smoothly-input-color-h{display:flex}.sc-smoothly-input-color-h smoothly-input.sc-smoothly-input-color{width:100%}.sc-smoothly-input-color-h .color-sample.sc-smoothly-input-color{height:2em;width:5em;background-color:var(--value);border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;border-radius:2px}";
34365
34384
 
34366
34385
  const SmoothlyInputColor$1 = class extends HTMLElement {
34367
34386
  constructor() {
@@ -34409,10 +34428,10 @@ const SmoothlyInputColor$1 = class extends HTMLElement {
34409
34428
  static get watchers() { return {
34410
34429
  "value": ["valueChanged"]
34411
34430
  }; }
34412
- static get style() { return styleCss$S; }
34431
+ static get style() { return styleCss$T; }
34413
34432
  };
34414
34433
 
34415
- const styleCss$R = ".sc-smoothly-input-date-h{box-sizing:border-box}.sc-smoothly-input-date-h[looks=\"border\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-h[looks=\"line\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-h[looks=\"grid\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-date-h{border:none}[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within) input.sc-smoothly-input-date{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-date-h{position:relative;max-width:100vw;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}[looks=transparent].sc-smoothly-input-date-h smoothly-input.sc-smoothly-input-date{outline:none}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));min-width:18em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0;left:0;right:0;bottom:0;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(--background-color, var(--smoothly-color-shade)))}@media screen and (min-width: 400px){nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}}";
34434
+ const styleCss$S = ".sc-smoothly-input-date-h{box-sizing:border-box}.sc-smoothly-input-date-h[looks=\"border\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-h[looks=\"line\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-h[looks=\"grid\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-date-h{border:none}[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within) input.sc-smoothly-input-date{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-date-h{position:relative;max-width:100vw;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}[looks=transparent].sc-smoothly-input-date-h smoothly-input.sc-smoothly-input-date{outline:none}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));min-width:18em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0;left:0;right:0;bottom:0;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(--background-color, var(--smoothly-color-shade)))}@media screen and (min-width: 400px){nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}}";
34416
34435
 
34417
34436
  const InputDate = class extends HTMLElement {
34418
34437
  constructor() {
@@ -34472,10 +34491,10 @@ const InputDate = class extends HTMLElement {
34472
34491
  static get watchers() { return {
34473
34492
  "value": ["onStart"]
34474
34493
  }; }
34475
- static get style() { return styleCss$R; }
34494
+ static get style() { return styleCss$S; }
34476
34495
  };
34477
34496
 
34478
- const styleCss$Q = ".sc-smoothly-input-date-range-h{box-sizing:border-box}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-range-h[looks=\"grid\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-date-range-h{border:none}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within) input.sc-smoothly-input-date-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-date-range-h{position:relative;display:block;width:fit-content;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;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, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;background-color:var(--background-color, var(--smoothly-color-shade), transparent);border-radius:0.25rem;cursor:pointer}smoothly-input.sc-smoothly-input-date-range{border-radius:var(--border-radius, none);background-color:transparent;width:var(--input-width);flex-grow:1}span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}";
34497
+ const styleCss$R = ".sc-smoothly-input-date-range-h{box-sizing:border-box}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-range-h[looks=\"grid\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-date-range-h{border:none}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within) input.sc-smoothly-input-date-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-date-range-h{position:relative;display:block;width:fit-content;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;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, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;background-color:var(--background-color, var(--smoothly-color-shade), transparent);border-radius:0.25rem;cursor:pointer}smoothly-input.sc-smoothly-input-date-range{border-radius:var(--border-radius, none);background-color:transparent;width:var(--input-width);flex-grow:1}span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}";
34479
34498
 
34480
34499
  const InputDateRange = class extends HTMLElement {
34481
34500
  constructor() {
@@ -34539,10 +34558,10 @@ const InputDateRange = class extends HTMLElement {
34539
34558
  static get watchers() { return {
34540
34559
  "value": ["onValue"]
34541
34560
  }; }
34542
- static get style() { return styleCss$Q; }
34561
+ static get style() { return styleCss$R; }
34543
34562
  };
34544
34563
 
34545
- const styleCss$P = "smoothly-input-demo{display:block;margin:2em;margin-bottom:20rem}.checkbox-group{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--background-color))}.select-div{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div>*{flex-basis:49%}";
34564
+ const styleCss$Q = "smoothly-input-demo{display:block;margin:2em;margin-bottom:20rem}.checkbox-group{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--background-color))}.select-div{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div>*{flex-basis:49%}";
34546
34565
 
34547
34566
  const SmoothlyInputDemo$1 = class extends HTMLElement {
34548
34567
  constructor() {
@@ -34551,7 +34570,7 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
34551
34570
  this.duration = { hours: 8 };
34552
34571
  }
34553
34572
  render() {
34554
- return (h(Host, null, h("h2", null, "Select"), h("div", { class: "select-div" }, h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select with reset button"), h("smoothly-item", { value: "1" }, "Ice cream"), h("smoothly-item", { value: "2" }, "Sponge cake"), h("smoothly-item", { value: "3" }, "Cookie"), h("smoothly-item", { value: "4" }, "Croissant"), h("smoothly-item", { value: "5" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { value: "ice cream" }, "Ice cream"), h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { value: "croissant" }, "Croissant"), h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" })))), h("h2", null, "Delayed"), h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), h("smoothly-form", { looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { slot: "label" }, "Month"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Editable form and Input with Clear and Reset - Editable"), h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { slot: "label" }, "Month multiple select"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Color"), h("smoothly-form", { looks: "border" }, h("smoothly-input-color", { name: "color" })), h("h2", null, "Range"), h("smoothly-form", { looks: "border" }, h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), h("h2", null, "Duration"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
34573
+ return (h(Host, null, h("h2", null, "Controlled form"), h("smoothly-input-demo-controlled-form", null), h("h2", null, "Create form defaulting type"), h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" })), h("h2", null, "Select"), h("div", { class: "select-div" }, h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select with reset button"), h("smoothly-item", { value: "1" }, "Ice cream"), h("smoothly-item", { value: "2" }, "Sponge cake"), h("smoothly-item", { value: "3" }, "Cookie"), h("smoothly-item", { value: "4" }, "Croissant"), h("smoothly-item", { value: "5" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, h("label", { slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { value: "ice cream" }, "Ice cream"), h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { value: "croissant" }, "Croissant"), h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" })))), h("h2", null, "Delayed"), h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), h("smoothly-form", { looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { slot: "label" }, "Month"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Editable form and Input with Clear and Reset - Editable"), h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "refresh-outline" }))), h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, h("p", { slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { slot: "label" }, "Month multiple select"), h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { value: "folder", selected: true }, h("smoothly-icon", { size: "small", name: "folder-outline" })), h("smoothly-item", { value: "camera" }, h("smoothly-icon", { size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-picker", { multiple: true, name: "animals" }, h("span", { slot: "label" }, "Animals"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), h("smoothly-picker-option", { value: "dog" }, "Dog"), h("smoothly-picker-option", { value: "fish" }, "Fish")), h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), h("h2", null, "Color"), h("smoothly-form", { looks: "border" }, h("smoothly-input-color", { name: "color" })), h("h2", null, "Range"), h("smoothly-form", { looks: "border" }, h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { size: "icon", slot: "end" }, h("smoothly-icon", { name: "close" }))), h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), h("h2", null, "Duration"), h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
34555
34574
  const duration = e.detail.duration;
34556
34575
  console.log("event duration", duration);
34557
34576
  this.duration = duration;
@@ -34567,12 +34586,46 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
34567
34586
  "--border-radius": "4px",
34568
34587
  "--padding": "0 0.75em",
34569
34588
  "--input-width": "12ch",
34570
- } }), h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))), h("h4", null, "Form with spinner showcase"), h("smoothly-form", { looks: "line", processing: true, onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, h("smoothly-input", { name: "text" }, "Input"), h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, h("span", { slot: "label" }, "Testing camera photo"), h("smoothly-icon", { slot: "button", name: "camera-outline" })), h("smoothly-picker", { name: "picker" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-input-select", { name: "select", placeholder: "Select..." }, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-date-range", { name: "date-range", start: Date$2.now(), end: Date$2.nextMonth(Date$2.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
34589
+ } }), h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))), h("h4", null, "Form with spinner showcase"), h("smoothly-form", { looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, h("smoothly-input", { name: "text" }, "Input"), h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, h("span", { slot: "label" }, "Testing camera photo"), h("smoothly-icon", { slot: "button", name: "camera-outline" })), h("smoothly-picker", { name: "picker" }, h("span", { slot: "label" }, "Shape"), h("span", { slot: "search" }, "Search"), h("smoothly-picker-option", { value: "circle" }, h("span", { slot: "label" }, "Circle"), h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), h("smoothly-picker-option", { value: "cube" }, h("span", { slot: "label" }, "Cube"), h("smoothly-icon", { size: "tiny", name: "cube-outline" })), h("smoothly-picker-option", { value: "square", selected: true }, h("span", { slot: "label" }, "Square"), h("smoothly-icon", { size: "tiny", name: "square-outline" }))), h("smoothly-input-select", { name: "select", placeholder: "Select..." }, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")), h("smoothly-input-date-range", { name: "date-range", start: Date$2.now(), end: Date$2.nextMonth(Date$2.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
34571
34590
  "--border-radius": "4px",
34572
34591
  "--padding": "0 0.75em",
34573
34592
  "--input-width": "12ch",
34574
34593
  } }), h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" })))));
34575
34594
  }
34595
+ static get style() { return styleCss$Q; }
34596
+ };
34597
+
34598
+ const styleCss$P = ".sc-smoothly-input-demo-controlled-form-h{display:flex;width:100%}.sc-smoothly-input-demo-controlled-form-h smoothly-form.sc-smoothly-input-demo-controlled-form{width:100%}";
34599
+
34600
+ const SmoothlyInputDemoControlledForm$1 = class extends HTMLElement {
34601
+ constructor() {
34602
+ super();
34603
+ this.__registerHost();
34604
+ this.name = "Initial name";
34605
+ }
34606
+ nameChanged(current, previous) {
34607
+ console.log(`updated name from '${previous}' to '${current}'`);
34608
+ }
34609
+ async submitHandler(event) {
34610
+ event.stopPropagation();
34611
+ console.log("Received event. Processing...");
34612
+ if (!(typeof event.detail.value.name == "string")) {
34613
+ console.error("Bad input. Resolving false");
34614
+ event.detail.result(false);
34615
+ }
34616
+ else {
34617
+ await new Promise(resolve => window.setTimeout(resolve, 1000));
34618
+ this.name = event.detail.value.name;
34619
+ console.log("Finished processing successfully. Resolving true");
34620
+ event.detail.result(true);
34621
+ }
34622
+ }
34623
+ render() {
34624
+ return (h(Host, null, h("smoothly-form", { readonly: true, looks: "line", onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input", { type: "text", name: "name", value: this.name }, "Name"), h("smoothly-input-edit", { slot: "edit", type: "button", size: "icon", color: "primary", fill: "default" }), h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" }))));
34625
+ }
34626
+ static get watchers() { return {
34627
+ "name": ["nameChanged"]
34628
+ }; }
34576
34629
  static get style() { return styleCss$P; }
34577
34630
  };
34578
34631
 
@@ -35235,11 +35288,11 @@ const SmoothlyInputSubmit$1 = class extends HTMLElement {
35235
35288
  }
35236
35289
  clickHandler() {
35237
35290
  var _a;
35238
- (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit(this.delete);
35291
+ !this.disabled && ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit(this.delete));
35239
35292
  }
35240
35293
  render() {
35241
35294
  var _a, _b;
35242
- return (h(Host, { title: this.toolTip }, this.delete == true ? (h("smoothly-button-confirm", { disabled: this.disabled, size: this.size, shape: this.shape, expand: this.expand, type: this.type, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: this.type, shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill }, h("slot", null), h("smoothly-icon", { name: "checkmark-outline", fill: "solid" })))));
35295
+ return (h(Host, { title: this.toolTip }, this.delete == true ? (h("smoothly-button-confirm", { disabled: this.disabled, size: this.size, shape: this.shape, expand: this.expand, type: this.type, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: this.type, shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" })))));
35243
35296
  }
35244
35297
  static get style() { return styleCss$G; }
35245
35298
  };
@@ -36951,7 +37004,7 @@ const SmoothlyFilterField = /*@__PURE__*/proxyCustomElement(SmoothlyFilterField$
36951
37004
  const SmoothlyFilterInput = /*@__PURE__*/proxyCustomElement(SmoothlyFilterInput$1, [6,"smoothly-filter-input",{"property":[1],"placeholder":[1],"needle":[32]}]);
36952
37005
  const SmoothlyFilterPicker = /*@__PURE__*/proxyCustomElement(SmoothlyFilterPicker$1, [6,"smoothly-filter-picker",{"label":[1],"property":[1],"multiple":[4],"type":[1]},[[0,"smoothlyPickerOptionChange","optionChangeHandler"]]]);
36953
37006
  const SmoothlyFilterToggle = /*@__PURE__*/proxyCustomElement(SmoothlyFilterToggle$1, [2,"smoothly-filter-toggle",{"icon":[1],"properties":[16],"toolTip":[1,"tool-tip"],"not":[4],"flip":[516],"active":[1028]}]);
36954
- const SmoothlyForm = /*@__PURE__*/proxyCustomElement(SmoothlyForm$1, [4,"smoothly-form",{"color":[1537],"value":[1040],"type":[1],"readonly":[1028],"looks":[513],"name":[1],"action":[1],"processing":[1028],"prevent":[4],"changed":[1028]},[[0,"smoothlyInputLooks","smoothlyInputLooksHandler"],[0,"smoothlyInput","smoothlyInputHandler"],[0,"smoothlyInputLoad","smoothlyInputLoadHandler"],[0,"smoothlyFormDisable","smoothlyFormDisableHandler"]]]);
37007
+ const SmoothlyForm = /*@__PURE__*/proxyCustomElement(SmoothlyForm$1, [4,"smoothly-form",{"color":[1537],"value":[1040],"action":[1],"type":[1],"readonly":[1028],"looks":[513],"name":[1],"prevent":[4],"changed":[1028],"processing":[32]},[[0,"smoothlyInputLooks","smoothlyInputLooksHandler"],[0,"smoothlyInput","smoothlyInputHandler"],[8,"smoothlyFormSubmit","windowSubmitHandler"],[0,"smoothlyFormSubmit","submitHandler"],[0,"smoothlyInputLoad","smoothlyInputLoadHandler"],[0,"smoothlyFormDisable","smoothlyFormDisableHandler"]]]);
36955
37008
  const SmoothlyFrame = /*@__PURE__*/proxyCustomElement(SmoothlyFrame$1, [2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1]}]);
36956
37009
  const SmoothlyGoogleFont = /*@__PURE__*/proxyCustomElement(SmoothlyGoogleFont$1, [2,"smoothly-google-font",{"value":[1]}]);
36957
37010
  const SmoothlyIcon = /*@__PURE__*/proxyCustomElement(SmoothlyIcon$1, [2,"smoothly-icon",{"color":[513],"fill":[513],"name":[513],"size":[513],"rotate":[514],"flip":[513],"toolTip":[1,"tool-tip"],"document":[32]}]);
@@ -36963,6 +37016,7 @@ const SmoothlyInputColor = /*@__PURE__*/proxyCustomElement(SmoothlyInputColor$1,
36963
37016
  const SmoothlyInputDate = /*@__PURE__*/proxyCustomElement(InputDate, [6,"smoothly-input-date",{"color":[1537],"looks":[1537],"name":[513],"value":[1025],"open":[1028],"max":[1025],"min":[1025],"showLabel":[516,"show-label"],"disabled":[1028]},[[0,"smoothlyInput","smoothlyInputHandler"],[0,"smoothlyInputLooks","smoothlyInputLooksHandler"],[0,"smoothlyDateSet","dateSetHandler"]]]);
36964
37017
  const SmoothlyInputDateRange = /*@__PURE__*/proxyCustomElement(InputDateRange, [2,"smoothly-input-date-range",{"color":[1537],"looks":[1537],"name":[513],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"],"labelStart":[1,"label-start"],"labelEnd":[1,"label-end"]},[[0,"smoothlyInput","smoothlyInputHandler"],[0,"smoothlyInputLooks","smoothlyInputLooksHandler"],[0,"smoothlyStartChange","onStartChanged"],[0,"smoothlyEndChange","onEndChanged"],[0,"smoothlyDateRangeSet","onDateRangeSet"]]]);
36965
37018
  const SmoothlyInputDemo = /*@__PURE__*/proxyCustomElement(SmoothlyInputDemo$1, [0,"smoothly-input-demo",{"duration":[32]}]);
37019
+ const SmoothlyInputDemoControlledForm = /*@__PURE__*/proxyCustomElement(SmoothlyInputDemoControlledForm$1, [2,"smoothly-input-demo-controlled-form",{"name":[32]}]);
36966
37020
  const SmoothlyInputEdit = /*@__PURE__*/proxyCustomElement(SmoothlyInputEdit$1, [6,"smoothly-input-edit",{"color":[513],"expand":[513],"fill":[513],"disabled":[1540],"display":[1540],"shape":[513],"type":[513],"size":[513],"toolTip":[1,"tool-tip"]},[[0,"click","clickHandler"]]]);
36967
37021
  const SmoothlyInputFile = /*@__PURE__*/proxyCustomElement(SmoothlyInputFile$1, [6,"smoothly-input-file",{"accept":[1],"color":[1537],"looks":[1537],"camera":[513],"name":[513],"showLabel":[516,"show-label"],"value":[1040],"placeholder":[1537],"dragging":[32]}]);
36968
37022
  const SmoothlyInputMonth = /*@__PURE__*/proxyCustomElement(MonthSelector, [2,"smoothly-input-month",{"value":[1025]}]);
@@ -36971,7 +37025,7 @@ const SmoothlyInputRadioItem = /*@__PURE__*/proxyCustomElement(SmoothlyInputRadi
36971
37025
  const SmoothlyInputRange = /*@__PURE__*/proxyCustomElement(SmoothlyInputRange$1, [6,"smoothly-input-range",{"value":[1026],"looks":[1537],"changed":[1028],"readonly":[1540],"min":[2],"max":[2],"name":[1],"labelText":[1,"label-text"],"step":[8],"outputSide":[1,"output-side"]}]);
36972
37026
  const SmoothlyInputReset = /*@__PURE__*/proxyCustomElement(SmoothlyInputReset$1, [6,"smoothly-input-reset",{"color":[513],"expand":[513],"fill":[513],"disabled":[1540],"size":[513],"shape":[513],"display":[1540],"type":[513],"tooltip":[1]},[[0,"click","clickHandler"]]]);
36973
37027
  const SmoothlyInputSelect = /*@__PURE__*/proxyCustomElement(SmoothlyInputSelect$1, [6,"smoothly-input-select",{"name":[1],"color":[1537],"looks":[1537],"showSelected":[1540,"show-selected"],"readonly":[1540],"multiple":[4],"clearable":[4],"changed":[1028],"placeholder":[520],"menuHeight":[1,"menu-height"],"open":[32],"selected":[32],"filter":[32]},[[0,"smoothlyInputLoad","smoothlyInputLoadHandler"],[8,"click","onWindowClick"],[0,"smoothlyItemSelect","onItemSelect"],[0,"keydown","onKeyDown"]]]);
36974
- const SmoothlyInputSubmit = /*@__PURE__*/proxyCustomElement(SmoothlyInputSubmit$1, [6,"smoothly-input-submit",{"delete":[4],"color":[1],"expand":[513],"fill":[513],"disabled":[1540],"display":[1540],"shape":[513],"type":[513],"size":[513],"toolTip":[1,"tool-tip"]},[[0,"click","clickHandler"]]]);
37028
+ const SmoothlyInputSubmit = /*@__PURE__*/proxyCustomElement(SmoothlyInputSubmit$1, [6,"smoothly-input-submit",{"delete":[516],"color":[1],"expand":[513],"fill":[513],"disabled":[1540],"display":[1540],"shape":[513],"type":[513],"size":[513],"toolTip":[1,"tool-tip"]}]);
36975
37029
  const SmoothlyItem = /*@__PURE__*/proxyCustomElement(SmoothlyItem$1, [6,"smoothly-item",{"value":[8],"selected":[1540],"marked":[1540],"selectable":[4]},[[0,"click","onClick"]]]);
36976
37030
  const SmoothlyLabel = /*@__PURE__*/proxyCustomElement(SmoothlyLabel$1, [6,"smoothly-label",{"hue":[2],"description":[1],"shape":[513]}]);
36977
37031
  const SmoothlyLazy = /*@__PURE__*/proxyCustomElement(SmoothlyLazy$1, [6,"smoothly-lazy",{"show":[1028],"content":[16]}]);
@@ -37059,6 +37113,7 @@ const defineCustomElements = (opts) => {
37059
37113
  SmoothlyInputDate,
37060
37114
  SmoothlyInputDateRange,
37061
37115
  SmoothlyInputDemo,
37116
+ SmoothlyInputDemoControlledForm,
37062
37117
  SmoothlyInputEdit,
37063
37118
  SmoothlyInputFile,
37064
37119
  SmoothlyInputMonth,
@@ -37120,6 +37175,6 @@ const defineCustomElements = (opts) => {
37120
37175
  }
37121
37176
  };
37122
37177
 
37123
- export { SmoothlyAccordion, SmoothlyAccordionItem, SmoothlyAddress, SmoothlyAddressDisplay, SmoothlyAddresses, SmoothlyApp, SmoothlyAppDemo, SmoothlyAppRoom, SmoothlyBackToTop, SmoothlyBurger, SmoothlyButton, SmoothlyButtonConfirm, SmoothlyButtonDemo, SmoothlyCalendar, SmoothlyCheckbox, SmoothlyColor, SmoothlyCountry, SmoothlyDialog, SmoothlyDialogDemo, SmoothlyDisplay, SmoothlyDisplayAmount, SmoothlyDisplayDateTime, SmoothlyDisplayDemo, SmoothlyFilter, SmoothlyFilterField, SmoothlyFilterInput, SmoothlyFilterPicker, SmoothlyFilterToggle, SmoothlyForm, SmoothlyFrame, SmoothlyGoogleFont, SmoothlyIcon, SmoothlyIconDemo, SmoothlyInput, SmoothlyInputCheckbox, SmoothlyInputClear, SmoothlyInputColor, SmoothlyInputDate, SmoothlyInputDateRange, SmoothlyInputDemo, SmoothlyInputEdit, SmoothlyInputFile, SmoothlyInputMonth, SmoothlyInputRadio, SmoothlyInputRadioItem, SmoothlyInputRange, SmoothlyInputReset, SmoothlyInputSelect, SmoothlyInputSubmit, SmoothlyItem, SmoothlyLabel, SmoothlyLazy, SmoothlyLoadMore, SmoothlyNotification, SmoothlyNotifier, SmoothlyPicker, SmoothlyPickerDemo, SmoothlyPickerMenu, SmoothlyPickerOption, SmoothlyPopup, SmoothlyQuiet, SmoothlyReorder, SmoothlySelectDemo, SmoothlySkeleton, SmoothlySlotElements, SmoothlySlottedElements, SmoothlySpinner, SmoothlySubmit, SmoothlySummary, SmoothlySvg, SmoothlyTab, SmoothlyTabSwitch, SmoothlyTable, SmoothlyTableCell, SmoothlyTableDemo, SmoothlyTableDemoFiltered, SmoothlyTableExpandableCell, SmoothlyTableExpandableRow, SmoothlyTableFooter, SmoothlyTableHeader, SmoothlyTableRow, SmoothlyTableTesting, SmoothlyThemeColor, SmoothlyThemeColorVariant, SmoothlyThemeColors, SmoothlyThemePicker, SmoothlyToggle, SmoothlyToggleSwitch, SmoothlyTrigger, SmoothlyTriggerSink, SmoothlyTriggerSource, SmoothlyTuple, SmoothlyUrlencoded, defineCustomElements, smoothly };
37178
+ export { SmoothlyAccordion, SmoothlyAccordionItem, SmoothlyAddress, SmoothlyAddressDisplay, SmoothlyAddresses, SmoothlyApp, SmoothlyAppDemo, SmoothlyAppRoom, SmoothlyBackToTop, SmoothlyBurger, SmoothlyButton, SmoothlyButtonConfirm, SmoothlyButtonDemo, SmoothlyCalendar, SmoothlyCheckbox, SmoothlyColor, SmoothlyCountry, SmoothlyDialog, SmoothlyDialogDemo, SmoothlyDisplay, SmoothlyDisplayAmount, SmoothlyDisplayDateTime, SmoothlyDisplayDemo, SmoothlyFilter, SmoothlyFilterField, SmoothlyFilterInput, SmoothlyFilterPicker, SmoothlyFilterToggle, SmoothlyForm, SmoothlyFrame, SmoothlyGoogleFont, SmoothlyIcon, SmoothlyIconDemo, SmoothlyInput, SmoothlyInputCheckbox, SmoothlyInputClear, SmoothlyInputColor, SmoothlyInputDate, SmoothlyInputDateRange, SmoothlyInputDemo, SmoothlyInputDemoControlledForm, SmoothlyInputEdit, SmoothlyInputFile, SmoothlyInputMonth, SmoothlyInputRadio, SmoothlyInputRadioItem, SmoothlyInputRange, SmoothlyInputReset, SmoothlyInputSelect, SmoothlyInputSubmit, SmoothlyItem, SmoothlyLabel, SmoothlyLazy, SmoothlyLoadMore, SmoothlyNotification, SmoothlyNotifier, SmoothlyPicker, SmoothlyPickerDemo, SmoothlyPickerMenu, SmoothlyPickerOption, SmoothlyPopup, SmoothlyQuiet, SmoothlyReorder, SmoothlySelectDemo, SmoothlySkeleton, SmoothlySlotElements, SmoothlySlottedElements, SmoothlySpinner, SmoothlySubmit, SmoothlySummary, SmoothlySvg, SmoothlyTab, SmoothlyTabSwitch, SmoothlyTable, SmoothlyTableCell, SmoothlyTableDemo, SmoothlyTableDemoFiltered, SmoothlyTableExpandableCell, SmoothlyTableExpandableRow, SmoothlyTableFooter, SmoothlyTableHeader, SmoothlyTableRow, SmoothlyTableTesting, SmoothlyThemeColor, SmoothlyThemeColorVariant, SmoothlyThemeColors, SmoothlyThemePicker, SmoothlyToggle, SmoothlyToggleSwitch, SmoothlyTrigger, SmoothlyTriggerSink, SmoothlyTriggerSource, SmoothlyTuple, SmoothlyUrlencoded, defineCustomElements, smoothly };
37124
37179
 
37125
37180
  //# sourceMappingURL=index.js.map