@roadtrip/components 2.33.0 → 2.36.0

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

@@ -1,10 +1,29 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+
 
 export default {
   title: 'Indicators/Spinner',
   component: 'road-spinner',
+  argTypes: {
+    size: {
+      options: ['small', 'medium', 'large', 'xl'],
+      control: {
+        type: 'select',
+      },
+    },
+    color: {
+      options: ['default', 'light', 'dark'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  args: {
+    size: null,
+  },
 };
 
-export const Default = () => html`
-  <road-spinner></road-spinner>
+export const Default = (args) => html`
+  <road-spinner size="${ifDefined(args.size)}" color="${ifDefined(args.color)}"></road-spinner>
 `;

package/dist/collection/components/tab-bar/tab-bar.css

@@ -10,7 +10,7 @@
 
 :host {
   --tab-bar-background: var(--road-grey-000);
-  --tab-color: var(--road-grey-600);
+  --tab-color: var(--road-grey-500);
   --tab-color-selected: var(--road-grey-900);
   --tab-underline-selected: var(--road-primary-500);
   --tab-background: var(--road-grey-000);
@@ -19,7 +19,6 @@
 
   display: flex;
   width: 100%;
-  padding: 0 0.5rem;
   margin: 0;
   overflow: scroll;
   overflow-x: inherit;
@@ -41,6 +40,10 @@
   flex-grow: 1;
 }
 
+:host(.tab-secondary) ::slotted(road-tab-button) {
+  --tab-underline-selected: var(--road-secondary-600);
+}
+
 :host(.tab-center) {
   justify-content: center;
 }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -5,6 +5,10 @@ import './../../utils/polyfill';
  */
 export class TabBar {
   constructor() {
+    /**
+     * The color to use the color Secondary from your application's color palette.
+     */
+    this.secondary = false;
     /**
      * Set to `true` to expand buttons width to take the full size of the bar.
      */
@@ -28,10 +32,11 @@ export class TabBar {
     this.selectedTabChanged();
   }
   render() {
-    const { expand, center } = this;
+    const { expand, center, secondary } = this;
     return (h(Host, { role: "tablist", class: {
         'tab-expand': expand,
         'tab-center': center,
+        'tab-secondary': secondary,
       } },
       h("slot", null)));
   }
@@ -44,6 +49,24 @@ export class TabBar {
     "$": ["tab-bar.css"]
   }; }
   static get properties() { return {
+    "secondary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The color to use the color Secondary from your application's color palette."
+      },
+      "attribute": "secondary",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "expand": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/tab-button/tab-button.css

@@ -37,6 +37,10 @@
  * Active state
  */
 
+:host(.tab-secondary) {
+  --tab-underline-selected: var(--road-secondary-600);
+}
+
 :host(.tab-selected) {
   color: var(--tab-color-selected);
 }
@@ -51,7 +55,6 @@
   transform: none;
 }
 
-
 /**
  * Hover state
  */

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

@@ -176,6 +176,26 @@ Expand.args = {
   </road-tab>`,
 };
 
+export const Secondary = Template.bind({});
+Secondary.args = {
+  top: `<road-tab-bar slot="top" secondary="true">
+    <road-tab-button tab="tab-list">
+      <road-label>List</road-label>
+    </road-tab-button>
+
+    <road-tab-button tab="tab-map">
+      <road-label>Map</road-label>
+    </road-tab-button>
+  </road-tab-bar>`,
+  ' ': `<road-tab tab="tab-list">
+    List
+  </road-tab>
+
+  <road-tab tab="tab-map">
+    Map
+  </road-tab>`,
+};
+
 export const LeadingIcon = Template.bind({});
 LeadingIcon.args = {
   top: `<road-tab-bar slot="top" expand="true">

package/dist/collection/components/textarea/textarea.css

@@ -31,7 +31,7 @@
   font-size: 1rem;
   color: var(--road-grey-900);
   background: var(--road-grey-000);
-  border: 1px solid var(--road-grey-400);
+  border: 1px solid var(--road-grey-500);
   border-radius: 0.25rem;
   box-shadow: none;
   -webkit-appearance: none;

package/dist/collection/components/tooltip/tooltip.css

@@ -18,7 +18,7 @@
 :host {
   --max-width: 16rem;
   --z-index: 1;
-  --width: max-content;
+  --width: auto;
 
   position: relative;
   display: inline-block;
@@ -30,22 +30,31 @@
   left: 50%;
   z-index: 1;
   width: var(--width);
+  min-width: 6rem;
   max-width: var(--max-width);
   padding: 0.5rem;
   font-family: var(--road-font);
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   color: var(--road-grey-900);
   text-align: center;
   pointer-events: none;
   background: var(--road-grey-000);
   border: 1px solid var(--road-grey-300);
   border-radius: 0.25rem;
-  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
+  box-shadow: 0 0.1875rem 0.375rem rgba(41, 44, 51, 0.24);
   opacity: 0;
   transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
   transform: translateX(-50%) translateY(-100%);
 }
 
+:host([contentalign="left"]) .tooltip {
+  text-align: left;
+}
+
+.tooltip.tooltip-text-left::after {
+  text-align: left;
+}
+
 .tooltip-open {
   opacity: 1;
 }
@@ -74,12 +83,12 @@
 :host([data-tooltip-position="left"]) .tooltip {
   top: 50%;
   left: 0%;
-  margin-left: -0.5rem;
+  margin-right: 0.5rem;
   transform: translateX(-94%) translateY(-55%);
 }
 
 :host([data-tooltip-position="left"]) .tooltip-open {
-  transform: translateX(-100%) translateY(-55%);
+  transform: translateX(-103%) translateY(-55%);
 }
 
 /**
@@ -89,12 +98,12 @@
 :host([data-tooltip-position="bottom"]) .tooltip {
   top: 100%;
   left: 50%;
-  margin-top: 0.375rem;
+  margin-top: 0.5rem;
   transform: translateX(-50%) translateY(-40%);
 }
 
 :host([data-tooltip-position="bottom"]) .tooltip-open {
-  transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(-6%);
 }
 
 /**
@@ -109,5 +118,5 @@
 }
 
 :host([data-tooltip-position="right"]) .tooltip-open {
-  transform: translateX(0) translateY(-55%);
+  transform: translateX(-4%) translateY(-55%);
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -18,6 +18,10 @@ export class Tooltip {
      * The position of the tooltip.
      */
     this.position = 'top';
+    /**
+     * The content align of the tooltip.
+     */
+    this.contentAlign = 'center';
     /**
      * Indicates whether or not the tooltip is open. You can use this or the open/close methods.
      */
@@ -133,6 +137,24 @@ export class Tooltip {
       "reflect": false,
       "defaultValue": "'top'"
     },
+    "contentAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'center'\n    | 'left'",
+        "resolved": "\"center\" | \"left\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The content align of the tooltip."
+      },
+      "attribute": "content-align",
+      "reflect": false,
+      "defaultValue": "'center'"
+    },
     "isOpen": {
       "type": "boolean",
       "mutable": true,

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

@@ -13,10 +13,9 @@ export const Playground = (args) => html`
   tooltip-id="${ifDefined(args['tooltip-id'])}" 
   content="${ifDefined(args.content)}" 
   position="${ifDefined(args.position)}" 
-  trigger="${ifDefined(args.trigger)}">
-  <road-button class="mb-0">
-    <road-icon name="alert-info" color="secondary"></road-icon>
-  </road-button>
+  trigger="${ifDefined(args.trigger)}"
+  contentalign="${ifDefined(args.contentAlign)}">
+  <road-icon name="alert-info" color="secondary"></road-icon>
   ${unsafeHTML(args['tooltip-content'])}
 </road-tooltip>
 `;
@@ -25,6 +24,7 @@ Playground.args = {
   'is-open': null,
   position: 'right',
   trigger: 'hover',
+  contentAlign: 'center',
 };
 Playground.argTypes = {
   'is-open': {
@@ -36,6 +36,12 @@ Playground.argTypes = {
       type: 'radio',
     },
   },
+  contentAlign: {
+    options: ['center', 'left'],
+    control: {
+      type: 'radio',
+    },
+  },
   content: {
     control: 'text',
   },
@@ -93,7 +99,7 @@ Playground.argTypes = {
   },
   '--width': {
     table: {
-      defaultValue: { summary: 'max-content' },
+      defaultValue: { summary: 'auto' },
     },
     control: {
       type: null,

package/dist/esm/loader.js

@@ -25,7 +25,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["road-badge_11",[[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",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-counter",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[1],"max":[1],"step":[1],"value":[2],"size":[1]}]]],["road-plate-number",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]}]]],["road-accordion",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"]}]]],["road-banner",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["road-carousel",[[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-checkbox",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1],"helper":[1]}]]],["road-chip",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog",[[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",[[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-range",[[2,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"]}]]],["road-rating",[[1,"road-rating",{"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]}]]],["road-alert",[[1,"road-alert",{"color":[1]}]]],["road-autocomplete",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-avatar",[[1,"road-avatar"]]],["road-carousel-item",[[4,"road-carousel-item"]]],["road-dropdown",[[1,"road-dropdown",{"isOpen":[1028,"is-open"]}]]],["road-flap",[[1,"road-flap",{"color":[1],"size":[513]}]]],["road-img",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item",[[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",[[1,"road-progress",{"value":[2],"color":[1]}]]],["road-radio",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group",[[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],"helper":[1]}]]],["road-select",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton",[[1,"road-skeleton"]]],["road-spinner",[[1,"road-spinner"]]],["road-switch",[[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",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar",[[1,"road-tab-bar",{"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button",[[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",[[6,"road-table"]]],["road-tabs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text",[[1,"road-text",{"color":[1]}]]],["road-textarea",[[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],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]}]]],["road-toggle",[[2,"road-toggle",{"toggleId":[1,"toggle-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-toolbar-title",[[1,"road-toolbar-title"]]],["road-tooltip",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-card",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["road-input",[[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],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]}]]],["road-input-group",[[1,"road-input-group"]]]], options);
+  return bootstrapLazy([["road-badge_11",[[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",[[1,"road-duration",{"isOpen":[1028,"is-open"],"header":[1],"min":[2],"max":[2],"step":[2],"open":[64],"close":[64]},[[0,"roadcardclick","handleClick"]]]]],["road-counter",[[2,"road-counter",{"inputId":[1,"input-id"],"min":[1],"max":[1],"step":[1],"value":[2],"size":[1]}]]],["road-plate-number",[[2,"road-plate-number",{"country":[1],"disabled":[4],"placeholder":[1],"readonly":[4],"value":[1032],"motorbike":[4]}]]],["road-accordion",[[1,"road-accordion",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"]}]]],["road-banner",[[1,"road-banner",{"isOpen":[1028,"is-open"],"label":[1],"link":[1],"url":[1],"close":[64]}]]],["road-carousel",[[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-checkbox",[[6,"road-checkbox",{"checkboxId":[1,"checkbox-id"],"name":[1],"required":[4],"checked":[1028],"indeterminate":[4],"disabled":[4],"value":[1],"label":[1],"inverse":[4],"error":[1],"helper":[1]}]]],["road-chip",[[1,"road-chip",{"color":[1],"outline":[4],"size":[1],"hasCloseIcon":[4,"has-close-icon"]}]]],["road-collapse",[[1,"road-collapse",{"isOpen":[1028,"is-open"],"showMore":[1,"show-more"],"showLess":[1,"show-less"],"centered":[4]}]]],["road-dialog",[[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-dropdown",[[1,"road-dropdown",{"isOpen":[1028,"is-open"],"isLight":[4,"is-light"],"position":[513],"direction":[513]}]]],["road-modal",[[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-range",[[2,"road-range",{"rangeId":[1,"range-id"],"value":[1032],"min":[1],"max":[1],"step":[1],"showValue":[4,"show-value"],"showTick":[4,"show-tick"]}]]],["road-rating",[[1,"road-rating",{"rate":[2],"reviews":[2],"reviewsText":[1,"reviews-text"]}]]],["road-toast",[[1,"road-toast",{"isOpen":[1028,"is-open"],"color":[1],"label":[1],"timeout":[2],"open":[64],"close":[64]}]]],["road-alert",[[1,"road-alert",{"color":[1]}]]],["road-autocomplete",[[6,"road-autocomplete",{"options":[16],"visible":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[4,"click","onClickOutside"]]]]],["road-avatar",[[1,"road-avatar"]]],["road-carousel-item",[[4,"road-carousel-item"]]],["road-flap",[[1,"road-flap",{"color":[1],"size":[513]}]]],["road-img",[[1,"road-img",{"alt":[1],"src":[1],"loadSrc":[32],"loadError":[32]}]]],["road-navbar",[[1,"road-navbar",{"selectedTab":[1,"selected-tab"]},[[0,"roadNavbarItemClick","onNavbarChanged"],[0,"roadnavbaritemclick","onNavbarChanged"]]]]],["road-navbar-item",[[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",[[1,"road-progress",{"value":[2],"color":[1]}]]],["road-radio",[[2,"road-radio",{"radioId":[1,"radio-id"],"name":[1],"required":[4],"disabled":[4],"value":[8],"label":[1],"inverse":[4],"error":[4],"helper":[1],"inline":[4],"checked":[32]},[[8,"roadChange","onRoadChangedChanged"],[8,"roadchange","onRoadChangedChanged"]]]]],["road-radio-group",[[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],"helper":[1]}]]],["road-select",[[2,"road-select",{"selectId":[1,"select-id"],"options":[16],"autofocus":[4],"disabled":[4],"name":[1],"required":[4],"size":[2],"sizes":[1],"label":[1],"error":[1],"value":[1032]}]]],["road-select-filter",[[6,"road-select-filter",{"options":[16],"parameters":[8],"isActive":[4,"is-active"],"onlySelect":[4,"only-select"],"isOpen":[32],"currentValue":[32]},[[0,"roadFocus","handleFocus"],[0,"roadfocus","handleFocus"],[0,"roadBlur","handleBlur"],[0,"roadblur","handleBlur"],[0,"roadChange","handleChange"],[0,"roadchange","handleChange"],[4,"click","onClickOutside"]]]]],["road-skeleton",[[1,"road-skeleton"]]],["road-spinner",[[1,"road-spinner",{"size":[513],"color":[513]}]]],["road-switch",[[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",[[1,"road-tab",{"active":[1028],"tab":[1],"setActive":[64]}]]],["road-tab-bar",[[1,"road-tab-bar",{"secondary":[4],"expand":[4],"center":[4],"selectedTab":[1,"selected-tab"]}]]],["road-tab-button",[[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",[[6,"road-table"]]],["road-tabs",[[1,"road-tabs",{"selectedTab":[32],"select":[64],"getTab":[64],"getSelected":[64]}]]],["road-text",[[1,"road-text",{"color":[1]}]]],["road-textarea",[[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],"sizes":[1],"readonly":[4],"required":[4],"spellcheck":[4],"cols":[2],"rows":[2],"wrap":[1],"value":[1025],"label":[1],"error":[1],"helper":[1]}]]],["road-toggle",[[2,"road-toggle",{"toggleId":[1,"toggle-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-toolbar-title",[[1,"road-toolbar-title"]]],["road-tooltip",[[1,"road-tooltip",{"tooltipId":[1,"tooltip-id"],"content":[1],"position":[1],"contentAlign":[1,"content-align"],"isOpen":[1028,"is-open"],"trigger":[1],"open":[64],"close":[64]}]]],["road-card",[[1,"road-card",{"button":[4],"value":[1],"type":[1],"download":[1],"href":[1],"rel":[1],"target":[1]}]]],["road-input",[[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],"sizes":[1],"type":[1],"value":[1032],"label":[1],"error":[1],"helper":[1],"debounce":[2]}]]],["road-input-group",[[1,"road-input-group"]]]], options);
   });
 };
 

package/dist/esm/road-accordion.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h } from './index-0c8a0e04.js';
 import { n as navigationChevron } from './index-56ebce0e.js';
 import './polyfill-2b159e86.js';
 
-const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 1rem 1rem;--content-padding:1rem 0.5rem 0;--header-padding:1rem 0.5rem 1rem 1rem;--icon-color:var(--road-grey-900);--max-height:800px;display:block;margin-bottom:1rem}.accordion{max-height:4.25rem;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:1rem;line-height:1.5;color:var(--road-grey-900);background:var(--road-grey-000);border:1px solid var(--road-grey-300);border-radius:0.25rem;-webkit-transition:max-height 0.3s ease-in-out;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{padding:0 0.5rem 1rem;margin:0 1rem 1rem}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;height:4rem;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-info-default)}.accordion-trigger:active{background:var(--road-grey-100)}.accordion-header{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--header-padding);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.accordion-light-header{position:relative;font-weight:700}.accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-grey-400)}.accordion-arrow{margin-left:1rem;color:var(--icon-color);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;border-top:var(--accordion-header-border) solid var(--road-grey-300)}.accordion-light-content{border-top:0;border-bottom:1px solid var(--road-grey-400)}";
+const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 1rem 1rem;--content-padding:1rem 0.5rem 0;--header-padding:1rem 0.5rem 1rem 1rem;--icon-color:var(--road-grey-900);--max-height:800px;display:block;margin-bottom:1rem}.accordion{--max-height:800px;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:1rem;line-height:1.5;color:var(--road-grey-900);background:var(--road-grey-000);border:1px solid;border-color:var(--road-grey-500);border-radius:0.25rem;-webkit-transition:max-height 0.3s ease-in-out;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{padding:0 0.5rem 1rem;margin:0 1rem 1rem}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;height:4rem;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-info-default)}.accordion-trigger:active{background:var(--road-grey-100)}.accordion-header{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--header-padding);font-weight:700;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.accordion-light-header{position:relative}.accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-grey-500)}.accordion-arrow{margin-left:1rem;color:var(--icon-color);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;border-top:var(--accordion-header-border) solid var(--road-grey-500)}.accordion-light-content{border-top:0;border-bottom:1px solid var(--road-grey-500)}";
 
 let Accordion = class {
   constructor(hostRef) {

package/dist/esm/road-checkbox.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-0
 import { c as checkWide, b as navigationAddLess } from './index-56ebce0e.js';
 import './polyfill-2b159e86.js';
 
-const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:1rem;line-height:1.5;color:var(--road-grey-900)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:-ms-inline-flexbox;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;-ms-flex-negative:0;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:\"\";background:var(--road-grey-000);border:1px solid var(--road-grey-400);border-radius:0.25rem;-webkit-transition:border 0.2s ease-in-out, background 0.2s ease-in-out;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-primary-700)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-primary-700)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-primary-500);border-color:var(--road-primary-500)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{-webkit-box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-primary-700);border-color:var(--road-primary-700)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-grey-400)}.invalid-feedback.sc-road-checkbox{display:none;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:justify;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;font-size:0.75rem;color:var(--road-grey-500)}";
+const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:1rem;line-height:1.5;color:var(--road-grey-900)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:-ms-inline-flexbox;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;-ms-flex-negative:0;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:\"\";background:var(--road-grey-000);border:1px solid var(--road-grey-500);border-radius:0.25rem;-webkit-transition:border 0.2s ease-in-out, background 0.2s ease-in-out;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-primary-700)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-primary-700)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-primary-500);border-color:var(--road-primary-500)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{-webkit-box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-primary-700);border-color:var(--road-primary-700)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-grey-400)}.invalid-feedback.sc-road-checkbox{display:none;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:justify;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;font-size:0.75rem;color:var(--road-grey-500)}";
 
 let Checkbox = class {
   constructor(hostRef) {

package/dist/esm/road-chip.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host } from './index-0c8a0e04.js';
 import { a as navigationClose } from './index-56ebce0e.js';
 import './polyfill-2b159e86.js';
 
-const chipCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:0.875rem;cursor:pointer;border:0;border-radius:1.625rem;outline:0;-webkit-transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding:0 0.5rem}:host(.chip-outline){border-style:solid;border-width:1px}::slotted(road-icon){width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}.chip-close{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-grey-000);background:var(--road-grey-900);border-radius:50%;-webkit-transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:1rem}:host(.chip-lg) ::slotted(road-icon){width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}:host(.chip-lg) .chip-description{padding:0 0.75rem}:host(.chip-lg) .chip-close{width:1.5rem;height:1.5rem}:host(.chip-default){color:var(--road-grey-900);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-grey-000);border-color:var(--road-grey-500)}:host(.chip-secondary){color:var(--road-primary-contrast);background:var(--road-primary-500);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary-500);background:var(--road-primary-100)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-primary-700)}:host(.chip-secondary:hover){background:var(--road-primary-700)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary-700)}}:host(.chip-outline:hover){border-color:var(--road-primary-700)}:host(.chip-secondary.focus-visible){background:var(--road-primary-500)}";
+const chipCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:0.875rem;cursor:pointer;border:0;border-radius:1.625rem;outline:0;-webkit-transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding:0 0.5rem}:host(.chip-outline){border-style:solid;border-width:1px}::slotted(road-icon){width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}.chip-close{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-grey-000);background:var(--road-grey-500);border-radius:50%;-webkit-transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:1rem}:host(.chip-lg) ::slotted(road-icon){width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}:host(.chip-lg) .chip-description{padding:0 0.75rem}:host(.chip-lg) .chip-close{width:1.5rem;height:1.5rem}:host(.chip-default){color:var(--road-grey-900);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-grey-000);border-color:var(--road-grey-500)}:host(.chip-secondary){color:var(--road-primary-contrast);background:var(--road-primary-500);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary-500);background:var(--road-primary-100)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-primary-700)}:host(.chip-secondary:hover){background:var(--road-primary-700)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary-700)}}:host(.chip-outline:hover){border-color:var(--road-primary-700)}:host(.chip-secondary.focus-visible){background:var(--road-primary-500)}";
 
 let Chip = class {
   constructor(hostRef) {

package/dist/esm/road-counter.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, e as getElement } from './index-0c8a0e04.js';
 
-const counterCss = ".sc-road-counter-h{--counter-margin-bottom:1rem;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:var(--counter-margin-bottom)}road-button.sc-road-counter{font-size:1.125rem;background:var(--road-grey-100);border:1px solid var(--road-grey-400)}road-button.sc-road-counter:hover{background:var(--road-grey-200)}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
+const counterCss = ".sc-road-counter-h{--counter-margin-bottom:1rem;display:block}road-input.sc-road-counter{--input-text-align:center;--border-radius:0;--margin-bottom:var(--counter-margin-bottom)}road-button.sc-road-counter{font-size:1.125rem;background:var(--road-grey-100);border:1px solid var(--road-grey-500)}road-button.sc-road-counter:hover{background:var(--road-grey-200)}.counter-md.sc-road-counter road-input.sc-road-counter{--height:2.5rem}.counter-md.sc-road-counter road-button.sc-road-counter{min-width:2.5rem}.counter-sm.sc-road-counter road-input.sc-road-counter{--height:2rem}.counter-sm.sc-road-counter road-button.sc-road-counter{min-width:2rem}";
 
 let Counter = class {
   constructor(hostRef) {

package/dist/esm/road-dropdown.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-0c8a0e04.js';
 
-const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown[open] .dropdown-menu{-webkit-transform:scaleY(1);transform:scaleY(1)}.dropdown-menu{position:absolute;right:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:16.875rem;padding:0.5rem 0;margin-top:var(--margin-top);color:var(--road-grey-900);background:var(--road-grey-000);border:1px solid var(--road-grey-300);border-radius:0.25rem;-webkit-box-shadow:0 0.375rem 0.375rem rgba(0, 0, 0, 0.16);box-shadow:0 0.375rem 0.375rem rgba(0, 0, 0, 0.16);-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;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:0 0;transform-origin:0 0}";
+const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-button:hover{background:var(--road-grey-200)}.position-right{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown[open] .dropdown-menu{-webkit-transform:scaleY(1);transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;-webkit-transform:translate3d(0, -56px, 0);transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-grey-900);background:var(--road-grey-000);border:1px solid;border-color:var(--road-grey-200);border-radius:0.25rem;-webkit-box-shadow:0 0.375rem 0.375rem rgba(41, 44, 51, 0.24);box-shadow:0 0.375rem 0.375rem rgba(41, 44, 51, 0.24);-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;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:0 0;transform-origin:0 0}.dropdown-item{min-height:40px;padding:0 1rem;font-size:1rem;line-height:1.5;color:var(--road-grey-900);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-grey-000);border:none;outline:none}.dropdown-item-border{border-color:var(--road-grey-200);border-bottom:1px solid}.dropdown-item:hover,.dropdown-item.focus-visible{background:var(--road-grey-100)}";
 
 let Dropdown = class {
   constructor(hostRef) {
@@ -9,6 +9,14 @@ let Dropdown = class {
      * Set to `true` to open the dropdown menu and to `false` to close it.
      */
     this.isOpen = false;
+    /**
+    * If you want to remove background of the dropdown button
+    */
+    this.isLight = false;
+    /**
+   * The opening direction.
+   */
+    this.direction = 'bottom';
     /**
      * Toggle the display when clicking element in slot
      */
@@ -17,7 +25,10 @@ let Dropdown = class {
     };
   }
   render() {
-    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("slot", null)), h("div", { class: "dropdown-menu" }, h("slot", { name: "list" }))));
+    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';
+    const positionClass = this.position !== undefined ? `position-${this.position}` : '';
+    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';
+    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex ${positionClass}` }, h("div", { class: isLightButtonDropDown }, h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), h("div", { class: `dropdown-menu ${directionClass}` }, h("slot", { name: "list" }))));
   }
 };
 Dropdown.style = dropdownCss;

package/dist/esm/road-flap.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-0c8a0e04.js';
 
-const flapCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:1.5rem;padding:0 0.75rem;font-size:0.875rem;font-weight:700;background:var(--road-grey-000);border:1px solid transparent;border-radius:1.5rem}:host(.flap-promo){color:var(--road-danger-default);border-color:var(--road-danger-default)}:host(.flap-exclu){color:var(--road-warning-text);border-color:var(--road-warning-default)}:host(.flap-info){color:var(--road-info-text);border-color:var(--road-info-default)}:host(.flap-ecology){color:var(--road-success-text);border-color:var(--road-success-default)}:host(.flap-md){height:2rem;padding:0 1rem;font-size:1rem}";
+const flapCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:1.5rem;padding:0 0.75rem;font-size:0.875rem;font-weight:700;background:var(--road-grey-000);border:1px solid transparent;border-radius:1.5rem}:host(.flap-promo){color:var(--road-danger-default);border-color:var(--road-danger-default)}:host(.flap-exclu){color:var(--road-warning-default);border-color:var(--road-warning-default)}:host(.flap-info){color:var(--road-info-default);border-color:var(--road-info-default)}:host(.flap-ecology){color:var(--road-success-default);border-color:var(--road-success-default)}:host(.flap-md){height:2rem;padding:0 1rem;font-size:1rem}";
 
 let Flap = class {
   constructor(hostRef) {

package/dist/esm/road-input-group.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, e as getElement } from './index-0c8a0e04.js';
 
-const inputGroupCss = ":host{display:block}.input-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;width:100%;font-family:var(--road-font, sans-serif)}::slotted(road-input),::slotted(input),::slotted(textarea),::slotted(road-select){position:relative;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}::slotted([slot=\"prepend\"]){margin-right:-3px;border-color:var(--road-grey-400);border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}::slotted([slot=\"append\"]){margin-left:-0.25rem;border-color:var(--road-grey-400);border-left-width:0}@media (hover: hover){.input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700);border-right-color:transparent}.input-group:not(.is-disabled):hover ::slotted([slot=\"append\"]){border-color:var(--road-primary-700);border-left-color:transparent}}.input-group:focus-within ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700);border-right-color:transparent}.input-group:focus-within ::slotted([slot=\"append\"]){border-color:var(--road-primary-700);border-left-color:transparent}.input-group-prepend,.input-group-append{display:-ms-flexbox;display:flex;height:3rem}::slotted(road-button){--padding-start:0.5rem;--padding-end:0.5rem;position:relative;z-index:2;min-width:3rem;margin:0;font-size:0.875rem}.input-group-prepend{z-index:1;-ms-flex-order:-1;order:-1}.input-group-prepend~.form-label{left:calc(3rem + 1px)}.input-group-append{position:relative;z-index:1;border-radius:0 0.25rem 0.25rem 0}::slotted(label){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-grey-900);text-align:center;white-space:nowrap;cursor:text;background:var(--road-grey-000);border:1px solid var(--road-grey-400);border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}::slotted(road-input:not(:first-child)),::slotted(road-select:not(:first-child)){border-radius:0}.input-group-append ::slotted([slot=\"append\"]){border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.input-group-prepend ::slotted([slot=\"prepend\"]){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.input-group-prepend ::slotted(label){margin-right:calc(-1rem + 1px)}.size-xl .input-group-prepend,.size-xl .input-group-append{height:3.5rem}.size-xl ::slotted(road-button){height:3.5rem}.input-group.is-invalid ::slotted([slot=\"append\"]),.input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-default)}.input-group.is-disabled ::slotted([slot=\"append\"]),.input-group.is-disabled ::slotted([slot=\"prepend\"]){cursor:not-allowed;background:var(--road-grey-200)}.is-disabled ::slotted(road-button){opacity:1}";
+const inputGroupCss = ":host{display:block}.input-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;width:100%;font-family:var(--road-font, sans-serif)}::slotted(road-input),::slotted(input),::slotted(textarea),::slotted(road-select){position:relative;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}::slotted([slot=\"prepend\"]){margin-right:-3px;border-color:var(--road-grey-500);border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}::slotted([slot=\"append\"]){margin-left:-0.25rem;border-color:var(--road-grey-500);border-left-width:0}@media (hover: hover){.input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700);border-right-color:transparent}.input-group:not(.is-disabled):hover ::slotted([slot=\"append\"]){border-color:var(--road-primary-700);border-left-color:transparent}:host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700)}}.input-group:focus-within ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700);border-right-color:transparent}:host(.phone-number-group) .input-group:focus-within ::slotted([slot=\"prepend\"]){border-color:var(--road-primary-700);border-right-color:transparent}.input-group:focus-within ::slotted([slot=\"append\"]){border-color:var(--road-primary-700);border-left-color:transparent}.input-group-prepend,.input-group-append{display:-ms-flexbox;display:flex;height:3rem}::slotted(road-button){--padding-start:0.5rem;--padding-end:0.5rem;position:relative;z-index:2;min-width:3rem;margin:0;font-size:0.875rem}.input-group-prepend{z-index:1;-ms-flex-order:-1;order:-1}.input-group-prepend~.form-label{left:calc(3rem + 1px)}.input-group-append{position:relative;z-index:1;border-radius:0 0.25rem 0.25rem 0}::slotted(label){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-grey-900);text-align:center;white-space:nowrap;cursor:text;background:var(--road-grey-000);border:1px solid var(--road-grey-500);border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}::slotted(road-input:not(:first-child)),::slotted(road-select:not(:first-child)){border-radius:0}.input-group-append ::slotted([slot=\"append\"]){border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.input-group-prepend ::slotted([slot=\"prepend\"]){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}:host(.phone-number-group) .input-group-prepend ::slotted([slot=\"prepend\"]){border-right:1px solid var(--road-grey-500);border-top-right-radius:0;border-bottom-right-radius:0}.input-group-prepend ::slotted(label){margin-right:calc(-1rem + 1px)}.size-xl .input-group-prepend,.size-xl .input-group-append{height:3.5rem}.size-xl ::slotted(road-button){height:3.5rem}.input-group.is-invalid ::slotted([slot=\"append\"]),.input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-default)}:host(.phone-number-group) .input-group.is-invalid ::slotted([slot=\"prepend\"]){border-color:var(--road-danger-default)}.input-group.is-disabled ::slotted([slot=\"append\"]),.input-group.is-disabled ::slotted([slot=\"prepend\"]){cursor:not-allowed;background:var(--road-grey-200)}.is-disabled ::slotted(road-button){opacity:1}";
 
 let InputGroup = class {
   constructor(hostRef) {

package/dist/esm/road-input.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-0c8a0e04.js';
 
-const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-900)}.form-control.sc-road-input{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:1rem;color:var(--road-grey-900);text-align:var(--input-text-align);background:var(--road-grey-000);border:1px solid var(--road-grey-400);border-radius:var(--border-radius);-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control[type=\"number\"].sc-road-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::-webkit-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-input::-moz-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-input:-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-input::-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-input::placeholder{color:var(--road-grey-500);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-primary-700)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-moz-placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus{border-color:var(--road-primary-700);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{cursor:not-allowed;background:var(--road-grey-200);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:1rem;line-height:1.5;color:var(--road-grey-500);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}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{-webkit-transform:scale(0.75) translateY(-0.625rem);transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:-moz-placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--road-danger-text)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-default)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:block}.helper.sc-road-input{margin-top:0.5rem;font-size:0.875rem;color:var(--road-grey-500)}";
+const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-900)}.form-control.sc-road-input{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:1rem;color:var(--road-grey-900);text-align:var(--input-text-align);background:var(--road-grey-000);border:1px solid var(--road-grey-500);border-radius:var(--border-radius);-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control[type=\"number\"].sc-road-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::-webkit-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-input::-moz-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-input:-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-input::-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.form-control.sc-road-input::placeholder{color:var(--road-grey-500);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-primary-700)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-moz-placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus{border-color:var(--road-primary-700);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{cursor:not-allowed;background:var(--road-grey-200);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:1rem;line-height:1.5;color:var(--road-grey-500);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}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{-webkit-transform:scale(0.75) translateY(-0.625rem);transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:-moz-placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{-webkit-transform:scale(0.625) translateY(-0.625rem);transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:0.75rem;color:var(--road-danger-text)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-default)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:block}.helper.sc-road-input{margin-top:0.5rem;font-size:0.875rem;color:var(--road-grey-500)}";
 
 const debounceEvent = (event, wait) => {
   const original = event._original || event;
@@ -90,7 +90,7 @@ let Input = class {
     this.onInput = (ev) => {
       const input = ev.target;
       if (input) {
-        this.value = input.value || '';
+        this.value = input.value || "";
       }
       this.roadinput.emit(ev);
       this.roadInput.emit(ev);

package/dist/esm/road-plate-number.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-0c8a0e04.js';
 import { l as licensePlateStarEu } from './index-56ebce0e.js';
 
-const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-text)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-info-contrast);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:0.875rem;font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-danger-text)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-text)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:1.75rem;font-weight:700;color:var(--road-grey-900);text-align:center;background:var(--road-grey-000);border:1px solid var(--road-grey-400);border-radius:0;outline:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.plate-number-input.sc-road-plate-number::-webkit-input-placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number::-moz-placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number:-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number::-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number:disabled,.plate-number-input[readonly].sc-road-plate-number{color:var(--road-grey-900);cursor:not-allowed;background:var(--road-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input[readonly].sc-road-plate-number~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number,.plate-number-input[readonly].sc-road-plate-number~.input-group-append.sc-road-plate-number{background:var(--road-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-primary-700)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{border-color:var(--road-primary-700);outline:0}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{-ms-flex-align:start;align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";
+const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-text)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-info-contrast);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:0.875rem;font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-danger-text)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-text)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:1.75rem;font-weight:700;color:var(--road-grey-900);text-align:center;background:var(--road-grey-000);border:1px solid var(--road-grey-500);border-radius:0;outline:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.plate-number-input.sc-road-plate-number::-webkit-input-placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number::-moz-placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number:-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number::-ms-input-placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-grey-500);opacity:1}.plate-number-input.sc-road-plate-number:disabled,.plate-number-input[readonly].sc-road-plate-number{color:var(--road-grey-900);cursor:not-allowed;background:var(--road-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input[readonly].sc-road-plate-number~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number,.plate-number-input[readonly].sc-road-plate-number~.input-group-append.sc-road-plate-number{background:var(--road-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-primary-700)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{border-color:var(--road-primary-700);outline:0}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{-ms-flex-align:start;align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";
 
 let PlateNumber = class {
   constructor(hostRef) {
@@ -44,6 +44,16 @@ let PlateNumber = class {
         country: 'PL',
         letter: 'PL',
         placeholder: 'GD 921KF',
+      },
+      {
+        country: 'AT',
+        letter: 'A',
+        placeholder: 'FF 10 FF',
+      },
+      {
+        country: 'DE',
+        letter: 'D',
+        placeholder: 'RA KL 8136',
       }
     ];
     /**

package/dist/esm/road-progress.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-0c8a0e04.js';
 
-const progressCss = ":host{--border-radius:0.25rem;display:-ms-flexbox;display:flex;height:0.25rem;overflow:hidden;font-size:0.75rem;background-color:var(--road-grey-200);border-radius:var(--border-radius)}.progress-bar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;-webkit-transition:width 0.6s ease;transition:width 0.6s ease}:host(.progress-primary) .progress-bar{background:var(--road-primary-500)}:host(.progress-secondary) .progress-bar{background:var(--road-secondary-500)}:host(.progress-info) .progress-bar{background:var(--road-info-default)}:host(.progress-success) .progress-bar{background:var(--road-success-default)}:host(.progress-warning) .progress-bar{background:var(--road-warning-default)}:host(.progress-danger) .progress-bar{background:var(--road-danger-default)}";
+const progressCss = ":host{--border-radius:0.25rem;display:-ms-flexbox;display:flex;height:0.25rem;overflow:hidden;font-size:0.75rem;background-color:var(--road-grey-200);border-radius:var(--border-radius)}.progress-bar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;-webkit-transition:width 0.6s ease;transition:width 0.6s ease}:host(.progress-primary) .progress-bar{background:var(--road-primary-500)}:host(.progress-secondary) .progress-bar{background:var(--road-secondary-600)}:host(.progress-info) .progress-bar{background:var(--road-info-default)}:host(.progress-success) .progress-bar{background:var(--road-success-default)}:host(.progress-warning) .progress-bar{background:var(--road-warning-default)}:host(.progress-danger) .progress-bar{background:var(--road-danger-default)}";
 
 let ProgressBar = class {
   constructor(hostRef) {