@roadtrip/components 2.24.1 → 2.27.0

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

@@ -2,15 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--font, sans-serif);color:var(--text)}.form-select.sc-road-select{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 1rem;margin:0;font-size:1rem;line-height:1.5;color:var(--text);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 0.5rem center/2rem 2rem;background-color:var(--white);border:1px solid var(--border-form);border-radius:0.25rem;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::-webkit-input-placeholder{color:var(--text-second)}.form-select.sc-road-select::-moz-placeholder{color:var(--text-second)}.form-select.sc-road-select:-ms-input-placeholder{color:var(--text-second)}.form-select.sc-road-select::-ms-input-placeholder{color:var(--text-second)}.form-select.sc-road-select::placeholder{color:var(--text-second)}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:focus{border-color:var(--secondary);outline:0}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--text-disabled);cursor:not-allowed;background-color:var(--background-second);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:1rem;line-height:1.5;color:var(--text-second);pointer-events:none;-webkit-transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;-webkit-transform-origin:0 0;transform-origin:0 0}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--danger-text)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--danger)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}";
 
 let Select = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.roadchange = index.createEvent(this, "roadchange", 7);
     this.roadChange = index.createEvent(this, "roadChange", 7);
+    this.roadfocus = index.createEvent(this, "roadfocus", 7);
     this.roadFocus = index.createEvent(this, "roadFocus", 7);
+    this.roadblur = index.createEvent(this, "roadblur", 7);
     this.roadBlur = index.createEvent(this, "roadBlur", 7);
     /**
      * The id of select
@@ -52,13 +55,18 @@ let Select = class {
       }
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
   valueChanged() {
+    this.roadchange.emit({
+      value: this.value,
+    });
     this.roadChange.emit({
       value: this.value,
     });

package/dist/cjs/road-skeleton.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const skeletonCss = ":host{position:relative;display:block;width:100%;min-height:1rem;background:-webkit-gradient(linear, left top, right top, color-stop(8%, var(--background-second)), color-stop(18%, var(--background)), color-stop(33%, var(--background-second)));background:linear-gradient(to right, var(--background-second) 8%, var(--background) 18%, var(--background-second) 33%);background-size:800px 104px;-webkit-animation:road-skeleton-animation 1s linear infinite;animation:road-skeleton-animation 1s linear infinite}@-webkit-keyframes road-skeleton-animation{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes road-skeleton-animation{0%{background-position:-468px 0}100%{background-position:468px 0}}";
 
@@ -11,7 +11,7 @@ let Skeleton = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("span", null, "\u00A0")));
+    return (index.h("span", null, "\u00A0"));
   }
 };
 Skeleton.style = skeletonCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const spinnerCss = ":host{display:block}.spinner{width:3rem;height:3rem;-webkit-transform-origin:center;transform-origin:center;-webkit-animation:road-rotate 2s linear infinite;animation:road-rotate 2s linear infinite}.spinner-circle{-webkit-animation:road-dash 1.5s ease-in-out infinite;animation:road-dash 1.5s ease-in-out infinite;fill:none;stroke:var(--secondary);stroke-width:3;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@-webkit-keyframes road-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes road-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes road-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:90, 200;stroke-dashoffset:-35px}100%{stroke-dashoffset:-125px}}@keyframes road-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:90, 200;stroke-dashoffset:-35px}100%{stroke-dashoffset:-125px}}";
 
@@ -11,7 +11,7 @@ let Spinner = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("svg", { class: "spinner", viewBox: "25 25 50 50" }, index.h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" }))));
+    return (index.h("svg", { class: "spinner", viewBox: "25 25 50 50" }, index.h("circle", { class: "spinner-circle", cx: "50", cy: "50", r: "20" })));
   }
 };
 Spinner.style = spinnerCss;

package/dist/cjs/road-switch.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 require('./polyfill-c7a0fa22.js');
 
 const switchCss = ".sc-road-switch-h{--switch-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--font, sans-serif);font-size:0.875rem;color:var(--text)}.form-switch-input.sc-road-switch{position:absolute;z-index:-1;opacity:0}.form-switch-label.sc-road-switch{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-switch-lever.sc-road-switch{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;width:var(--switch-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.5rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--border);border:0.125rem solid transparent;border-radius:1.125rem;-webkit-transition:background 0.2s ease-in-out;transition:background 0.2s ease-in-out}.form-switch-lever.sc-road-switch::before{font-size:0.625rem;font-weight:700;color:var(--white);text-transform:uppercase;content:attr(data-off)}.form-switch-lever.sc-road-switch::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--white);border-radius:50%;-webkit-box-shadow:0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);box-shadow:0 0.125rem 0.125rem rgba(0, 0, 0, 0.1);-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch{-ms-flex-pack:start;justify-content:flex-start}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch::before{content:attr(data-on)}.form-switch-input.sc-road-switch:checked~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch::after{-webkit-transform:translateX(calc(var(--switch-lever-width) - 2rem));transform:translateX(calc(var(--switch-lever-width) - 2rem))}.form-switch-input.focus-visible.sc-road-switch~.form-switch-label.sc-road-switch .form-switch-lever.sc-road-switch{-webkit-box-shadow:0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary);box-shadow:0 0 0 0.125rem var(--white), 0 0 0 0.1875rem var(--secondary)}.form-switch-input.sc-road-switch:checked~.form-switch-secondary.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--secondary)}.form-switch-input.sc-road-switch:checked~.form-switch-secondary.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--secondary-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-info.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--info)}.form-switch-input.sc-road-switch:checked~.form-switch-info.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--info-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-success.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--success)}.form-switch-input.sc-road-switch:checked~.form-switch-success.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--success-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-warning.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--warning)}.form-switch-input.sc-road-switch:checked~.form-switch-warning.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--warning-contrast)}.form-switch-input.sc-road-switch:checked~.form-switch-danger.sc-road-switch .form-switch-lever.sc-road-switch{background:var(--danger)}.form-switch-input.sc-road-switch:checked~.form-switch-danger.sc-road-switch .form-switch-lever.sc-road-switch::before{color:var(--danger-contrast)}.form-switch-right.sc-road-switch{margin-right:0;margin-left:0.5rem}.form-switch-spaced.sc-road-switch{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
@@ -10,11 +10,14 @@ const switchCss = ".sc-road-switch-h{--switch-lever-width:4.5rem;position:relati
 let Switch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.roadchange = index.createEvent(this, "roadchange", 7);
     this.roadChange = index.createEvent(this, "roadChange", 7);
+    this.roadfocus = index.createEvent(this, "roadfocus", 7);
     this.roadFocus = index.createEvent(this, "roadFocus", 7);
+    this.roadblur = index.createEvent(this, "roadblur", 7);
     this.roadBlur = index.createEvent(this, "roadBlur", 7);
     /**
-     * The id of input
+     * The id of switch
      */
     this.switchId = `road-switch-${switchIds++}`;
     /**
@@ -22,11 +25,11 @@ let Switch = class {
      */
     this.name = this.switchId;
     /**
-     * If `true`, the toggle is selected.
+     * If `true`, the switch is checked.
      */
     this.checked = false;
     /**
-     * If `true`, the user cannot interact with the toggle.
+     * If `true`, the user cannot interact with the switch.
      */
     this.disabled = false;
     /**
@@ -61,13 +64,19 @@ let Switch = class {
       this.checked = !this.checked;
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.onBlur = () => {
       this.roadBlur.emit();
+      this.roadblur.emit();
     };
   }
   checkedChanged(isChecked) {
+    this.roadchange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
     this.roadChange.emit({
       checked: isChecked,
       value: this.value,

package/dist/cjs/road-tab-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 require('./polyfill-c7a0fa22.js');
 
 const tabBarCss = ":host{--tab-bar-background:var(--white);--tab-color:var(--text-second);--tab-color-selected:var(--text);--tab-underline-selected:var(--secondary);--tab-background:var(--white);--tab-background-hover:var(--background-second);--tab-background-focused:var(--background);display:-ms-flexbox;display:flex;width:100%;padding:0 0.5rem;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--font, sans-serif);line-height:1.5;color:var(--text);text-transform:uppercase;list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--border);fill:currentColor;scrollbar-width:none}:host(::-webkit-scrollbar){display:none}:host(.tab-expand) ::slotted(road-tab-button){-ms-flex-positive:1;flex-grow:1}:host(.tab-center){-ms-flex-pack:center;justify-content:center}";
@@ -10,6 +10,7 @@ const tabBarCss = ":host{--tab-bar-background:var(--white);--tab-color:var(--tex
 let TabBar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.roadtabbarchanged = index.createEvent(this, "roadtabbarchanged", 7);
     this.roadTabBarChanged = index.createEvent(this, "roadTabBarChanged", 7);
     /**
      * Set to `true` to expand buttons width to take the full size of the bar.
@@ -22,6 +23,9 @@ let TabBar = class {
   }
   selectedTabChanged() {
     if (this.selectedTab !== undefined) {
+      this.roadtabbarchanged.emit({
+        tab: this.selectedTab,
+      });
       this.roadTabBarChanged.emit({
         tab: this.selectedTab,
       });

package/dist/cjs/road-tab-button.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const tabButtonCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;-webkit-transition:background 0.15s ease-in-out;transition:background 0.15s ease-in-out}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;-webkit-transform:none;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused)}.button-native{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;-o-border-image:initial;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";opacity:0;-webkit-transition:-webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:center;transform-origin:center}.button-inner{position:relative;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{-ms-flex-direction:column;flex-direction:column}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:0.625rem}";
 
 let TabButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.roadtabbuttonclick = index.createEvent(this, "roadtabbuttonclick", 7);
     this.roadTabButtonClick = index.createEvent(this, "roadTabButtonClick", 7);
     /**
      * Set the layout of the text and icon in the tab bar.
@@ -37,6 +38,11 @@ let TabButton = class {
   }
   selectTab(ev) {
     if (this.tab !== undefined) {
+      this.roadtabbuttonclick.emit({
+        tab: this.tab,
+        href: this.href,
+        selected: this.selected,
+      });
       this.roadTabButtonClick.emit({
         tab: this.tab,
         href: this.href,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const tabCss = ":host{display:block}:host(.tab-hidden){display:none}";
 

package/dist/cjs/road-table.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const tableCss = ".sc-road-table-h{-webkit-box-sizing:border-box;box-sizing:border-box;display:block}.sc-road-table-s>table{width:100%;font-family:var(--font, sans-serif);font-size:0.875rem;line-height:1.5;color:var(--text);border-collapse:collapse;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.sc-road-table-s>table th,.sc-road-table-s>table td{padding:1.5rem 1.25rem;text-align:left}.sc-road-table-s>table thead tr,.sc-road-table-s>table tbody tr:nth-child(2n){background:var(--background-second)}";
 
@@ -11,7 +11,7 @@ let Table = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return (index.h("slot", null));
   }
 };
 Table.style = tableCss;

package/dist/cjs/road-tabs.cjs.entry.js

@@ -2,14 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const tabsCss = ":host{position:relative;display:block}";
 
 let Tabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.roadtabswillchange = index.createEvent(this, "roadtabswillchange", 3);
     this.roadTabsWillChange = index.createEvent(this, "roadTabsWillChange", 3);
+    this.roadtabsdidchange = index.createEvent(this, "roadtabsdidchange", 3);
     this.roadTabsDidChange = index.createEvent(this, "roadTabsDidChange", 3);
     this.transitioning = false;
     this.onTabClicked = (ev) => {

package/dist/cjs/road-text.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const textCss = ":host(.text-primary){color:var(--primary)}:host(.text-secondary){color:var(--secondary)}:host(.text-accent){color:var(--accent)}:host(.text-info){color:var(--info)}:host(.text-success){color:var(--success)}:host(.text-warning){color:var(--warning)}:host(.text-danger){color:var(--danger)}:host(.text-default){color:var(--text)}:host(.text-default-second){color:var(--text-second)}:host(.text-disabled){color:var(--text-disabled)}:host(.text-white){color:var(--white)}";
 

package/dist/cjs/road-textarea.cjs.entry.js

@@ -2,19 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--font, sans-serif);color:var(--text)}.form-control.sc-road-textarea{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.625rem 1rem 0;margin:0;font-size:0.875rem;color:var(--text);background:var(--white);border:1px solid var(--border-form);border-radius:0.25rem;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control.sc-road-textarea::-webkit-input-placeholder{color:var(--text-second)}.form-control.sc-road-textarea::-moz-placeholder{color:var(--text-second)}.form-control.sc-road-textarea:-ms-input-placeholder{color:var(--text-second)}.form-control.sc-road-textarea::-ms-input-placeholder{color:var(--text-second)}.form-control.sc-road-textarea::placeholder{color:var(--text-second)}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{-webkit-transform:scale(0.7) translateY(-0.75rem);transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:-moz-placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{-webkit-transform:scale(0.7) translateY(-0.75rem);transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.7) translateY(-0.75rem)}.form-control.sc-road-textarea:focus{border-color:var(--secondary);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--text-disabled);cursor:not-allowed;background:var(--background-second)}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;line-height:1.5}.form-label.sc-road-textarea{position:absolute;top:0.875rem;left:1rem;display:block;font-size:0.875rem;line-height:1.5;color:var(--text-second);pointer-events:none;-webkit-transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;-webkit-transform-origin:0 0;transform-origin:0 0}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--danger-text)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--danger)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}";
 
 let Textarea = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.roadinput = index.createEvent(this, "roadinput", 7);
     this.roadInput = index.createEvent(this, "roadInput", 7);
+    this.roadchange = index.createEvent(this, "roadchange", 7);
     this.roadChange = index.createEvent(this, "roadChange", 7);
+    this.roadblur = index.createEvent(this, "roadblur", 7);
     this.roadBlur = index.createEvent(this, "roadBlur", 7);
+    this.roadfocus = index.createEvent(this, "roadfocus", 7);
     this.roadFocus = index.createEvent(this, "roadFocus", 7);
     /**
-     * The id of input
+     * The id of textarea
      */
     this.textareaId = `road-textarea-${textareaIds++}`;
     /**
@@ -22,11 +26,11 @@ let Textarea = class {
      */
     this.autocapitalize = 'none';
     /**
-     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     * This Boolean attribute lets you specify that a form control should have focus when the page loads.
      */
     this.autofocus = false;
     /**
-     * If `true`, the user cannot interact with the input.
+     * If `true`, the user cannot interact with the textarea.
      */
     this.disabled = false;
     /**
@@ -46,7 +50,7 @@ let Textarea = class {
      */
     this.spellcheck = false;
     /**
-     * The value of the input.
+     * The value of the textarea.
      */
     this.value = '';
     /**
@@ -58,19 +62,23 @@ let Textarea = class {
       if (input) {
         this.value = input.value || '';
       }
+      this.roadinput.emit(ev);
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
   /**
-   * Update the native input element when the value changes
+   * Update the native textarea element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value });
     this.roadChange.emit({ value: this.value });
   }
   getValue() {

package/dist/cjs/road-toast.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 const index$1 = require('./index-0181f02a.js');
 
 const toastCss = ":host{position:fixed;left:0;z-index:1;display:block;width:100%;visibility:hidden;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, visibility 0.15s, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, visibility 0.15s, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}:host(.toast-top){top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}:host(.toast-bottom){bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}:host(.toast-open){visibility:visible;opacity:1;-webkit-transform:none;transform:none}.toast{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:0 0 100%;flex:0 0 100%;-ms-flex-align:center;align-items:center;max-width:100%;padding:1.5rem 2rem 1.5rem 3rem;margin-right:0.5rem;margin-left:0.5rem;font-family:var(--font, sans-serif);font-size:0.875rem;line-height:1.4;text-align:left}:host(.toast-top) .toast{border-radius:0 0 0.25rem 0.25rem}:host(.toast-bottom) .toast{border-radius:0.25rem 0.25rem 0 0}@media (min-width: 576px){.toast{-ms-flex:0 0 83.3333%;flex:0 0 83.3333%;-ms-flex-pack:center;justify-content:center;max-width:83.3333%;padding:1rem 2rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--danger-contrast);background:var(--danger)}.toast-danger road-icon{color:var(--danger-contrast)}.toast-warning{color:var(--warning-contrast);background:var(--warning)}.toast-warning road-icon{color:var(--white)}.toast-success{color:var(--success-contrast);background:var(--success)}.toast-success road-icon{color:var(--success-contrast)}.toast-info{color:var(--info-contrast);background:var(--info)}.toast-info road-icon{color:var(--info-contrast)}.toast-icon{position:absolute;top:1rem;left:0.5rem}@media (min-width: 576px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;top:4px;right:4px;display:inline-block;padding:0;color:inherit;cursor:pointer;background:none;border:1px solid transparent;border-radius:4px;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.toast-close:focus{border-color:var(--info);outline:none}";
@@ -12,11 +12,11 @@ let Toast = class {
     index.registerInstance(this, hostRef);
     this.onClose = index.createEvent(this, "close", 7);
     /**
-     * Set open propertie to true to show the toast
+     * Set `open` propertie to `true` to open the toast
      */
     this.isOpen = false;
     /**
-     * Set the color of toast. e.g. info, success, warning, danger
+     * Set the color of the toast. e.g. info, success, warning, danger
      */
     this.color = 'info';
     /**

package/dist/cjs/road-toolbar-title.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const toolbarTitleCss = ":host{position:absolute;top:0;left:0;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;height:100%;padding:0 3.5rem;text-align:center}.toolbar-title{display:block;width:100%;overflow:hidden;font-size:1rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}";
 
@@ -11,7 +11,7 @@ let ToolbarTitle = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "toolbar-title" }, index.h("slot", null))));
+    return (index.h("div", { class: "toolbar-title" }, index.h("slot", null)));
   }
 };
 ToolbarTitle.style = toolbarTitleCss;

package/dist/cjs/road-tooltip.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 const tooltipCss = ":host{--max-width:16rem;--z-index:1;--width:max-content;position:relative;display:inline-block}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);max-width:var(--max-width);padding:0.5rem;font-family:var(--font);font-size:0.75rem;color:var(--text);text-align:center;pointer-events:none;background:var(--white);border:1px solid var(--border);border-radius:0.25rem;-webkit-box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);opacity:0;-webkit-transition:opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}.tooltip-open{opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;-webkit-transform:translateX(-50%) translateY(-70%);transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-left:-0.5rem;-webkit-transform:translateX(-94%) translateY(-55%);transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{-webkit-transform:translateX(-100%) translateY(-55%);transform:translateX(-100%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.375rem;-webkit-transform:translateX(-50%) translateY(-40%);transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;-webkit-transform:translateX(-14%) translateY(-55%);transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{-webkit-transform:translateX(0) translateY(-55%);transform:translateX(0) translateY(-55%)}";
 
@@ -48,13 +48,13 @@ let Tooltip = class {
     };
   }
   /**
-   * Shows the tooltip.
+   * Open the tooltip.
    */
   async open() {
     this.isOpen = true;
   }
   /**
-   * Shows the tooltip.
+   * Close the tooltip.
    */
   async close() {
     this.isOpen = false;

package/dist/cjs/roadtrip.cjs.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const index = require('./index-d47fa3c0.js');
-require('./app-04553107.js');
+const index = require('./index-9b63596c.js');
+require('./app-79994847.js');
 
 /*
- Stencil Client Patch Browser v2.11.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.12.1 | MIT Licensed | https://stenciljs.com
  */
 const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
@@ -39,7 +39,7 @@ const patchBrowser = () => {
         if (!index.win.customElements) {
             // module support, but no custom elements support (Old Edge)
             // @ts-ignore
-            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-ba87b185.js'); }).then(() => opts);
+            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-417ccd20.js'); }).then(() => opts);
         }
     }
     return index.promiseResolve(opts);
@@ -83,5 +83,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["road-badge_11.cjs",[[33,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]]],[1,"road-item",{"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-col"],[1,"road-grid"],[1,"road-label"],[1,"road-list",{"lines":[1]}],[1,"road-row"],[1,"road-toolbar",{"color":[1]}],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]}]]],["road-counter.cjs",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[1],"max":[1],"step":[1],"value":[2],"size":[1]}]]],["road-plate-number.cjs",[[2,"road-plate-number",{"country":[1],"placeholder":[1],"value":[1032],"motorbike":[4]}]]],["road-accordion.cjs",[[1,"road-accordion",{"isOpen":[1028,"is-open"]}]]],["road-carousel.cjs",[[4,"road-carousel",{"options":[8],"pager":[4],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]}]]],["road-chip.cjs",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse.cjs",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog.cjs",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-modal.cjs",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-rating.cjs",[[1,"road-rating",{"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast.cjs",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"position":[1],"open":[64],"close":[64]}]]],["road-alert.cjs",[[1,"road-alert",{"color":[1]}]]],["road-autocomplete.cjs",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-avatar.cjs",[[1,"road-avatar"]]],["road-card.cjs",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["road-carousel-item.cjs",[[4,"road-carousel-item"]]],["road-checkbox.cjs",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1]}]]],["road-dropdown.cjs",[[1,"road-dropdown",{"isOpen":[1028,"is-open"]}]]],["road-flap.cjs",[[1,"road-flap",{"color":[1]}]]],["road-img.cjs",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar.cjs",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"]]]]],["road-navbar-item.cjs",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"]]]]],["road-progress.cjs",[[1,"road-progress",{"value":[2],"color":[1]}]]],["road-radio.cjs",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"]]]]],["road-radio-group.cjs",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025]}]]],["road-range.cjs",[[2,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"]}]]],["road-select.cjs",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter.cjs",[[6,"road-select-filter",{"options":[16],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadChange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton.cjs",[[1,"road-skeleton"]]],["road-spinner.cjs",[[1,"road-spinner"]]],["road-switch.cjs",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-tab.cjs",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar.cjs",[[1,"road-tab-bar",{"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button.cjs",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"]]]]],["road-table.cjs",[[6,"road-table"]]],["road-tabs.cjs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text.cjs",[[1,"road-text",{"color":[1]}]]],["road-textarea.cjs",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1]}]]],["road-toolbar-title.cjs",[[1,"road-toolbar-title"]]],["road-tooltip.cjs",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-input.cjs",[[2,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[1],"value":[1032],"label":[1],"error":[1],"debounce":[2]}]]],["road-input-group.cjs",[[1,"road-input-group"]]]], options);
+  return index.bootstrapLazy([["road-badge_11.cjs",[[1,"road-item",{"button":[4],"detail":[4],"active":[4],"detailIcon":[1,"detail-icon"],"disabled":[4],"download":[1],"href":[1],"rel":[1],"lines":[1],"target":[1],"type":[1],"multipleInputs":[32]}],[1,"road-badge",{"color":[1],"bubble":[4]}],[1,"road-list",{"lines":[1]}],[1,"road-toolbar",{"color":[1]}],[33,"road-drawer",{"isOpen":[1028,"is-open"],"position":[1],"drawerWidth":[2,"drawer-width"],"hasInverseHeader":[4,"has-inverse-header"],"hasBackIcon":[4,"has-back-icon"],"backText":[1,"back-text"],"drawerTitle":[1,"drawer-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64],"back":[64]},[[4,"keyup","onEscape"]]],[1,"road-col"],[1,"road-grid"],[1,"road-label"],[1,"road-row"],[1,"road-button",{"color":[1],"size":[513],"buttonType":[1,"button-type"],"disabled":[516],"expand":[516],"download":[1],"href":[1],"rel":[1],"target":[1],"outline":[4]}],[1,"road-icon",{"color":[1],"ariaLabel":[1537,"aria-label"],"ariaHidden":[513,"aria-hidden"],"name":[1],"src":[1],"icon":[8],"size":[1],"rotate":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]}]]],["road-duration.cjs",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-counter.cjs",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[1],"max":[1],"step":[1],"value":[2],"size":[1]}]]],["road-plate-number.cjs",[[2,"road-plate-number",{"country":[1],"placeholder":[1],"value":[1032],"motorbike":[4]}]]],["road-accordion.cjs",[[1,"road-accordion",{"isOpen":[1028,"is-open"]}]]],["road-carousel.cjs",[[4,"road-carousel",{"options":[8],"pager":[4],"arrows":[4],"update":[64],"updateAutoHeight":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"getPreviousIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipeToNext":[64],"lockSwipeToPrev":[64],"lockSwipes":[64],"getSwiper":[64]}]]],["road-chip.cjs",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse.cjs",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog.cjs",[[1,"road-dialog",{"isOpen":[1028,"is-open"],"hasCloseIcon":[4,"has-close-icon"],"color":[1],"icon":[1],"label":[1],"description":[1],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-modal.cjs",[[1,"road-modal",{"maxWidth":[2,"max-width"],"isOpen":[1028,"is-open"],"hasInverseHeader":[4,"has-inverse-header"],"modalTitle":[1,"modal-title"],"hasCloseIcon":[4,"has-close-icon"],"open":[64],"close":[64]},[[4,"keyup","onEscape"]]]]],["road-rating.cjs",[[1,"road-rating",{"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast.cjs",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"position":[1],"open":[64],"close":[64]}]]],["road-alert.cjs",[[1,"road-alert",{"color":[1]}]]],["road-autocomplete.cjs",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-avatar.cjs",[[1,"road-avatar"]]],["road-carousel-item.cjs",[[4,"road-carousel-item"]]],["road-checkbox.cjs",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1]}]]],["road-dropdown.cjs",[[1,"road-dropdown",{"isOpen":[1028,"is-open"]}]]],["road-flap.cjs",[[1,"road-flap",{"color":[1]}]]],["road-img.cjs",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar.cjs",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item.cjs",[[1,"road-navbar-item",{"disabled":[4],"download":[1],"href":[1],"rel":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadNavbarChanged","onNavbarChanged"],[8,"roadnavbarchanged","onNavbarChanged"]]]]],["road-progress.cjs",[[1,"road-progress",{"value":[2],"color":[1]}]]],["road-radio.cjs",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group.cjs",[[6,"road-radio-group",{"radioGroupId":[1,"radio-group-id"],"allowEmptySelection":[4,"allow-empty-selection"],"name":[1],"value":[1032],"label":[1],"asterisk":[4],"ariaLabel":[513,"aria-label"],"error":[1025]}]]],["road-range.cjs",[[2,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"]}]]],["road-select.cjs",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter.cjs",[[6,"road-select-filter",{"options":[16],"parameters":[8],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton.cjs",[[1,"road-skeleton"]]],["road-spinner.cjs",[[1,"road-spinner"]]],["road-switch.cjs",[[2,"road-switch",{"switchId":[1,"switch-id"],"name":[1],"checked":[1028],"disabled":[4],"label":[1],"color":[1],"hasLeftLabel":[4,"has-left-label"],"isSpaced":[4,"is-spaced"],"value":[1],"on":[1],"off":[1]}]]],["road-tab.cjs",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar.cjs",[[1,"road-tab-bar",{"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button.cjs",[[1,"road-tab-button",{"download":[1],"href":[1],"rel":[1],"layout":[1],"selected":[1028],"tab":[1],"target":[1]},[[8,"roadTabBarChanged","onTabBarChanged"],[8,"roadTabbarchanged","onTabBarChanged"]]]]],["road-table.cjs",[[6,"road-table"]]],["road-tabs.cjs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text.cjs",[[1,"road-text",{"color":[1]}]]],["road-textarea.cjs",[[2,"road-textarea",{"textareaId":[1,"textarea-id"],"autocapitalize":[1],"autofocus":[4],"disabled":[4],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1]}]]],["road-toolbar-title.cjs",[[1,"road-toolbar-title"]]],["road-tooltip.cjs",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-card.cjs",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["road-input.cjs",[[2,"road-input",{"inputId":[1,"input-id"],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[1],"value":[1032],"label":[1],"error":[1],"debounce":[2]}]]],["road-input-group.cjs",[[1,"road-input-group"]]]], options);
 });

package/dist/cjs/{shadow-css-7fb0b43f.js → shadow-css-432b27e3.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 /*
- Stencil Client Platform v2.11.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v2.12.1 | MIT Licensed | https://stenciljs.com
  */
 /**
  * @license

package/dist/cjs/{utils-ade59127.js → utils-90171b88.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-d47fa3c0.js');
+const index = require('./index-9b63596c.js');
 
 let CACHED_MAP;
 const getIconMap = () => {

package/dist/collection/collection-manifest.json

@@ -18,6 +18,7 @@
     "./components/dialog/dialog.js",
     "./components/drawer/drawer.js",
     "./components/dropdown/dropdown.js",
+    "./components/duration/duration.js",
     "./components/flap/flap.js",
     "./components/grid/grid.js",
     "./components/img/img.js",
@@ -55,7 +56,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.11.0",
+    "version": "2.12.1",
     "typescriptVersion": "4.3.5"
   },
   "collections": [],

package/dist/collection/components/accordion/accordion.css

@@ -13,19 +13,19 @@
 
 /**
  * @prop --accordion-header-border: height of the border of the header
- * @prop --icon-color: color of the chevron icon
- * @prop --header-padding: padding of the accordion header
- * @prop --content-padding: padding of the accordion content
  * @prop --content-margin: margin of the accordion content
+ * @prop --content-padding: padding of the accordion content
+ * @prop --header-padding: padding of the accordion header
+ * @prop --icon-color: color of the chevron icon
  * @prop --max-height: maximum height of the collapse content
  */
 
 :host {
   --accordion-header-border: 1px;
-  --chevron-color: var(--icon);
-  --header-padding: 1rem 0.5rem 1rem 1rem;
-  --content-padding: 1rem 0.5rem 0;
   --content-margin: 0 1rem 1rem;
+  --content-padding: 1rem 0.5rem 0;
+  --header-padding: 1rem 0.5rem 1rem 1rem;
+  --icon-color: var(--icon);
   --max-height: 800px;
 
   display: block;

package/dist/collection/components/accordion/accordion.js

@@ -8,7 +8,7 @@ import './../../utils/polyfill';
 export class Accordion {
   constructor() {
     /**
-     * Set open to true to show the accordion element and to false to hide it.
+     * Set to `true` to open the accordion and to `false` to close it.
      */
     this.isOpen = false;
     /**
@@ -48,7 +48,7 @@ export class Accordion {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set open to true to show the accordion element and to false to hide it."
+        "text": "Set to `true` to open the accordion and to `false` to close it."
       },
       "attribute": "is-open",
       "reflect": false,