@roadtrip/components 2.25.1 → 2.27.1

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

@@ -10,8 +10,11 @@ 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 switch
@@ -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

@@ -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

@@ -9,6 +9,7 @@ const tabButtonCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;
 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-tabs.cjs.entry.js

@@ -9,7 +9,9 @@ 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-textarea.cjs.entry.js

@@ -9,9 +9,13 @@ const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-
 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 textarea
@@ -58,12 +62,15 @@ 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();
     };
   }
@@ -71,6 +78,7 @@ let Textarea = class {
    * 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/roadtrip.cjs.js

@@ -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],"parameters":[8],"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],"disabled":[4],"placeholder":[1],"readonly":[4],"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/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",

package/dist/collection/components/autocomplete/autocomplete.js

@@ -12,6 +12,10 @@ export class Autocomplete {
     this.onClick = (value, label) => {
       this.el.querySelector('road-input').value = value;
       this.visible = false;
+      this.roadselected.emit({
+        value: value.toString(),
+        label: label,
+      });
       this.roadSelected.emit({
         value: value.toString(),
         label: label,
@@ -66,8 +70,8 @@ export class Autocomplete {
     "visible": {}
   }; }
   static get events() { return [{
-      "method": "roadSelected",
-      "name": "roadSelected",
+      "method": "roadselected",
+      "name": "roadselected",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -80,6 +84,24 @@ export class Autocomplete {
         "resolved": "{ value: string | null | undefined; label: string; }",
         "references": {}
       }
+    }, {
+      "method": "roadSelected",
+      "name": "roadSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
+        "resolved": "{ value: string | null | undefined; label: string; }",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
@@ -88,6 +110,12 @@ export class Autocomplete {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "roadfocus",
+      "method": "handleFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "click",
       "method": "onClickOutside",

package/dist/collection/components/autocomplete/autocomplete.stories.js

@@ -6,15 +6,15 @@ export default {
   component: 'road-autocomplete',
   parameters: {
     actions: {
-      handles: ['roadChange', 'roadBlur', 'roadFocus'],
+      handles: ['roadchange', 'roadblur', 'roadfocus'],
     },
   },
   argTypes: {
     ' ': {
       control: 'text',
     },
-    roadSelected: {
-      action: 'roadSelected',
+    roadselected: {
+      action: 'roadselected',
       control: {
         type: null,
       },
@@ -30,7 +30,7 @@ export default {
 };
 
 export const Playground = (args) => html`
-<road-autocomplete .options=${args.options} @roadSelected=${event => args.roadSelected(event.detail)}>
+<road-autocomplete .options=${args.options} @roadselected=${event => args.roadselected(event.detail)}>
   ${unsafeHTML(args[' '])}
 </road-autocomplete>
 `;
@@ -58,13 +58,13 @@ export const Example = (args) => {
   };
 
   return html`
-    <road-autocomplete @roadSelected=${event => args.roadSelected(event.detail)}>
+    <road-autocomplete @roadselected=${event => args.roadselected(event.detail)}>
       <road-input 
         class="mb-0" 
         input-id="country" 
         label="Country" 
         debounce="500" 
-        @roadChange=${event => getCountry(event)}
+        @roadchange=${event => getCountry(event)}
       ></road-input>
     </road-autocomplete>
   `;

package/dist/collection/components/button/button.js

@@ -51,9 +51,11 @@ export class Button {
       }
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
   }
@@ -269,14 +271,47 @@ export class Button {
     }
   }; }
   static get events() { return [{
+      "method": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the button has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
       "method": "roadFocus",
       "name": "roadFocus",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadblur",
+      "name": "roadblur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the button has focus."
+        "text": "Emitted when the button loses focus."
       },
       "complexType": {
         "original": "void",
@@ -290,8 +325,11 @@ export class Button {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the button loses focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

package/dist/collection/components/button/button.stories.js

@@ -7,7 +7,7 @@ export default {
   component: 'road-button',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
   argTypes: {
@@ -67,12 +67,12 @@ export default {
     end: {
       control: 'text',
     },
-    roadBlur: {
+    roadblur: {
       control: {
         type: null,
       },
     },
-    roadFocus: {
+    roadfocus: {
       control: {
         type: null,
       },

package/dist/collection/components/card/card.js

@@ -15,12 +15,16 @@ export class Card {
      */
     this.type = 'button';
     this.onClick = () => {
-      var _a;
+      var _a, _b;
       if (this.value !== undefined) {
-        this.roadCardClick.emit({
+        this.roadcardclick.emit({
           value: this.value,
           label: (_a = this.el.querySelector('road-label')) === null || _a === void 0 ? void 0 : _a.textContent,
         });
+        this.roadCardClick.emit({
+          value: this.value,
+          label: (_b = this.el.querySelector('road-label')) === null || _b === void 0 ? void 0 : _b.textContent,
+        });
       }
     };
   }
@@ -182,8 +186,8 @@ export class Card {
     }
   }; }
   static get events() { return [{
-      "method": "roadCardClick",
-      "name": "roadCardClick",
+      "method": "roadcardclick",
+      "name": "roadcardclick",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -196,6 +200,24 @@ export class Card {
         "resolved": "{ value: string | null | undefined; label: string | null | undefined; }",
         "references": {}
       }
+    }, {
+      "method": "roadCardClick",
+      "name": "roadCardClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }",
+        "resolved": "{ value: string | null | undefined; label: string | null | undefined; }",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/card/card.stories.js

@@ -8,13 +8,13 @@ export default {
       default: 'grey',
     },
     actions: {
-      handles: ['roadCardClick'],
+      handles: ['roadcardclick'],
     },
   },
 };
 
 export const Value = () => html`
-  <road-grid>
+<road-grid>
   <road-row>
     <road-col class="col-4 col-md-3 col-lg-2">
       <road-card button value="125">
@@ -51,7 +51,7 @@ export const Value = () => html`
 `;
 
 export const vehicle = () => html`
-  <road-grid>
+<road-grid>
   <road-row>
     <road-col class="col-6 col-md-4 col-lg-3">
       <road-card button value="car">