@roadtrip/components 3.11.0 → 3.11.2

package/dist/roadtrip/p-39d1c90a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ratingCss","Rating","render","rate","Math","floor","this","rateDecimale","sizeRatingStarsClass","size","undefined","sizeRatingNumberClass","h","Host","class","Array","map","icon","star","color","starHalfColor","showreviews","href","reviews","reviewsText"],"sources":["src/components/rating/rating.css?tag=road-rating&encapsulation=shadow","src/components/rating/rating.tsx"],"sourcesContent":["/*\n * Rating\n *\n * Index\n * - Stars\n * - Star\n * - Rating number\n */\n\n/* STARS\n -------------------- */\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\n.rating-stars {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n/* STAR\n -------------------- */\n\n.rating-star {\n  color: var(--road-surface-disabled);\n}\n\n.rating-stars.rating-stars--small .icon-sm{\n  width: 1rem;\n  height: 1rem;\n}\n\n/* RATING NUMBER\n -------------------- */\n\n.rating-number {\n  margin-left: 0.5rem;\n  font-size: var(--road-link-medium);\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n.rating-number.rating-number--small {\n  font-size: var(--road-link-small);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { star, starHalfColor } from '../../../icons';\n\n@Component({\n  tag: 'road-rating',\n  styleUrl: 'rating.css',\n  shadow: true,\n})\nexport class Rating {\n\n  /**\n    * The button size.\n    */\n   @Prop({ reflect: true }) size?: 'small' | 'medium' = 'medium';\n\n  /**\n   * Rate review between 0 and 5\n   */\n  @Prop() rate: number = 0;\n\n  /**\n * Show reviews\n */\n  @Prop() showreviews: boolean = true;\n\n  /**\n   * number of reviews\n   */\n  @Prop() reviews: number = 0;\n\n  /**\n   * Word display next to the number of reviews.\n   */\n  @Prop() reviewsText: string = 'reviews';\n\n  render() {\n    const rate = Math.floor(this.rate);\n    const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;\n    const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';\n    const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';\n\n    return (\n      <Host>\n        <div class={`${sizeRatingStarsClass}`}>\n          {[...Array(rate)].map(() =>\n            <road-icon icon={star} size=\"sm\" color=\"warning\"></road-icon>\n          )}\n          {[...Array(rateDecimale)].map(() =>\n            <road-icon icon={starHalfColor} size=\"sm\" class=\"rating-star\"></road-icon>\n          )}\n          {[...Array(5 - rate - rateDecimale)].map(() =>\n            <road-icon icon={star} size=\"sm\" class=\"rating-star\"></road-icon>\n          )}\n        </div>\n        {this.showreviews && <a class={`${sizeRatingNumberClass}`} href=\"#\">({this.reviews}{this.reviewsText && ` ${this.reviewsText}`})</a>}\n        \n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAY,2Y,MCQLC,EAAM,M,mCAKqC,S,UAK/B,E,iBAKQ,K,aAKL,E,iBAKI,S,CAE9B,MAAAC,GACE,MAAMC,EAAOC,KAAKC,MAAMC,KAAKH,MAC7B,MAAMI,EAAeD,KAAKH,KAAOC,KAAKC,MAAMC,KAAKH,MAAQ,EAAI,EAAI,EACjE,MAAMK,EAAuBF,KAAKG,OAASC,UAAY,8BAA8BJ,KAAKG,OAAS,eACnG,MAAME,EAAwBL,KAAKG,OAASC,UAAY,gCAAgCJ,KAAKG,OAAS,gBAEtG,OACEG,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAO,GAAGN,KACZ,IAAIO,MAAMZ,IAAOa,KAAI,IACpBJ,EAAA,aAAWK,KAAMC,EAAMT,KAAK,KAAKU,MAAM,cAExC,IAAIJ,MAAMR,IAAeS,KAAI,IAC5BJ,EAAA,aAAWK,KAAMG,EAAeX,KAAK,KAAKK,MAAM,kBAEjD,IAAIC,MAAM,EAAIZ,EAAOI,IAAeS,KAAI,IACvCJ,EAAA,aAAWK,KAAMC,EAAMT,KAAK,KAAKK,MAAM,mBAG1CR,KAAKe,aAAeT,EAAA,KAAGE,MAAO,GAAGH,IAAyBW,KAAK,KAAG,IAAGhB,KAAKiB,QAASjB,KAAKkB,aAAe,IAAIlB,KAAKkB,cAAa,K"}

package/dist/roadtrip/{p-c8e9807b.entry.js → p-40daa53b.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,e as a,h as s,H as e}from"./p-abdbf6ac.js";import"./p-e8c090a5.js";const i=":host{position:fixed;top:0;z-index:2;width:100%}";const n=class{constructor(s){t(this,s);this.roadnavbarchanged=a(this,"roadnavbarchanged",7);this.roadNavbarChanged=a(this,"roadNavbarChanged",7);this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){return s(e,{role:"tablist"},s("slot",null))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};n.style=i;export{n as road_global_navigation};
-//# sourceMappingURL=p-c8e9807b.entry.js.map
+import{r as t,c as s,h as a,H as e}from"./p-f3d586b3.js";import"./p-1ccae339.js";const i=":host{position:fixed;top:0;z-index:2;width:100%}";const n=class{constructor(a){t(this,a);this.roadnavbarchanged=s(this,"roadnavbarchanged",7);this.roadNavbarChanged=s(this,"roadNavbarChanged",7);this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){return a(e,{role:"tablist"},a("slot",null))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};n.style=i;export{n as road_global_navigation};
+//# sourceMappingURL=p-40daa53b.entry.js.map

package/dist/roadtrip/p-40daa53b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["globalNavigationCss","GlobalNavigation","selectedTabChanged","this","selectedTab","undefined","roadnavbarchanged","emit","tab","roadNavbarChanged","onNavbarChanged","ev","detail","componentWillLoad","render","h","Host","role"],"sources":["src/components/global-navigation/global-navigation.css?tag=road-global-navigation&encapsulation=shadow","src/components/global-navigation/global-navigation.tsx"],"sourcesContent":["/*\n * Global Navigation\n *\n */\n\n:host {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  width: 100%;\n}\n\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot navbar - it should be road-navbar-item elements. Max 5 items on Mobile or add them to the drawer\n */\n\n@Component({\n  tag: 'road-global-navigation',\n  styleUrl: 'global-navigation.css',\n  shadow: true,\n})\nexport class GlobalNavigation {\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"tablist\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"iFAAA,MAAMA,EAAsB,mD,MCYfC,EAAgB,M,8JAO3B,kBAAAC,GACE,GAAIC,KAAKC,cAAgBC,UAAW,CAClCF,KAAKG,kBAAkBC,KAAK,CAC1BC,IAAKL,KAAKC,cAEZD,KAAKM,kBAAkBF,KAAK,CAC1BC,IAAKL,KAAKC,a,EAYhB,eAAAM,CAAgBC,GACdR,KAAKC,YAAcO,EAAGC,OAAOJ,G,CAG/B,iBAAAK,GACEV,KAAKD,oB,CAGP,MAAAY,GACE,OACEC,EAACC,EAAI,CACHC,KAAK,WAELF,EAAA,a"}

package/dist/roadtrip/p-414a2791.entry.js

@@ -0,0 +1,2 @@
+import{r as c,c as e,h as o,H as r}from"./p-f3d586b3.js";import{c as a,b as i}from"./p-73fe2357.js";import"./p-1ccae339.js";const s='.sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-16);line-height:1.5;color:var(--road-on-surface)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:"";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;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;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;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-input-surface-variant)}.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-input-surface-variant)}}.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-input-surface);border-color:var(--road-input-surface)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{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-input-surface-variant);border-color:var(--road-input-surface-variant)}.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-surface-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-on-surface-disabled)}.invalid-feedback.sc-road-checkbox{display:none;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:var(--road-font-size-12);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-outline)}.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:flex;flex-direction:row-reverse;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 h=class{constructor(o){c(this,o);this.roadchange=e(this,"roadchange",7);this.roadChange=e(this,"roadChange",7);this.roadfocus=e(this,"roadfocus",7);this.roadFocus=e(this,"roadFocus",7);this.roadblur=e(this,"roadblur",7);this.roadBlur=e(this,"roadBlur",7);this.onClick=()=>{this.checked=!this.checked;this.indeterminate=false};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.checkboxId=`road-checkbox-${t++}`;this.name=this.checkboxId;this.required=false;this.checked=false;this.indeterminate=false;this.disabled=false;this.value="on";this.label=`${this.checkboxId}-label`;this.inverse=false;this.error=undefined;this.helper=undefined}checkedChanged(c){this.roadchange.emit({checked:c,value:this.value});this.roadChange.emit({checked:c,value:this.value})}render(){const c=this.checkboxId+"-label";const e=this.inverse&&"form-checkbox-inverse";const s=this.error!==undefined&&!this.checked&&this.error!==""?"is-invalid":"";return o(r,null,o("input",{class:`form-check-input ${s}`,type:"checkbox",id:this.checkboxId,name:this.name,required:this.required,disabled:this.disabled,indeterminate:this.indeterminate,checked:this.checked,value:this.value,"aria-checked":`${this.checked}`,"aria-disabled":this.disabled?"true":null,"aria-labelledby":c,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur}),o("label",{class:`form-check-label ${e}`,id:c,htmlFor:this.checkboxId},o("div",null,this.label,o("slot",null)),this.checked&&!this.indeterminate&&o("road-icon",{class:"form-check-icon",icon:a}),this.indeterminate&&o("road-icon",{class:"form-check-icon",icon:i})),this.error&&this.error!==""&&o("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&o("p",{class:"helper"},this.helper))}static get watchers(){return{checked:["checkedChanged"]}}};let t=0;h.style=s;export{h as road_checkbox};
+//# sourceMappingURL=p-414a2791.entry.js.map

package/dist/roadtrip/p-414a2791.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","Checkbox","this","onClick","checked","indeterminate","onFocus","roadfocus","emit","roadFocus","onBlur","roadblur","roadBlur","checkboxIds","checkboxId","checkedChanged","isChecked","roadchange","value","roadChange","render","labelId","inverseClass","inverse","isInvalidClass","error","undefined","h","Host","class","type","id","name","required","disabled","htmlFor","label","icon","checkWide","navigationAddLess","helper"],"sources":["src/components/checkbox/checkbox.css?tag=road-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * Checkbox\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Checkbox\n * - Label\n * - Error\n * - Helper\n * - Position\n */\n\n\n/* CHECKBOX\n -------------------- */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-16);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-check-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-check-label {\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-check-label::before {\n  box-sizing: border-box;\n  display: block;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 0.75rem 0 0;\n  content: \"\";\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;\n}\n\n.form-check-icon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--road-primary-contrast);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-check-input:not(:disabled) ~ .form-check-label:hover::before {\n    border-color: var(--road-input-surface-variant);\n  }\n\n  .form-check-input:not(:disabled):checked ~ .form-check-label:hover::before,\n  .form-check-input:not(:disabled):indeterminate ~ .form-check-label:hover::before {\n    background: var(--road-input-surface-variant);\n  }\n}\n\n/**\n * Checked state\n */\n\n.form-check-input:checked ~ .form-check-label .form-check-icon,\n.form-check-input:indeterminate ~ .form-check-label .form-check-icon {\n  opacity: 1;\n}\n\n.form-check-input:checked ~ .form-check-label::before,\n.form-check-input:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface);\n  border-color: var(--road-input-surface);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-check-input.focus-visible ~ .form-check-label::before {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);\n}\n\n.form-check-input.focus-visible:checked ~ .form-check-label::before,\n.form-check-input.focus-visible:indeterminate ~ .form-check-label::before {\n  background: var(--road-input-surface-variant);\n  border-color: var(--road-input-surface-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-check-input:disabled ~ .form-check-label,\n.form-check-input[readonly] ~ .form-check-label {\n  cursor: not-allowed;\n}\n\n.form-check-input:disabled ~ .form-check-label::before,\n.form-check-input[readonly] ~ .form-check-label::before {\n  background: var(--road-surface-disabled);\n  border: none;\n}\n\n.form-check-input:disabled ~ .form-check-label .form-check-icon,\n.form-check-input[readonly] ~ .form-check-label .form-check-icon {\n  fill: var(--road-on-surface-disabled);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  flex: 0 0 100%;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-font-size-12);\n  color: var(--road-danger-default);\n}\n\n.form-check-input.is-invalid ~ .form-check-label::before,\n.was-validated .form-check-input:invalid ~ .form-check-label::before {\n  border-color: var(--road-danger-outline);\n}\n\n.form-check-input.is-invalid ~ .invalid-feedback,\n.was-validated .form-check-input:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* POSITION\n -------------------- */\n\n.form-checkbox-inverse {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n.form-checkbox-inverse::before {\n  margin: 0 0 0 1rem;\n}\n\n.form-checkbox-inverse .form-check-icon {\n  right: 0;\n  left: auto;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--road-grey-500);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { checkWide, navigationAddLess } from '../../../icons';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Adding additional elements next to the label (e.g. number of items in filters).\n */\n\n@Component({\n  tag: 'road-checkbox',\n  styleUrl: 'checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n\n  /**\n   * The id of checkbox\n   */\n  @Prop() checkboxId: string = `road-checkbox-${checkboxIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.checkboxId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   */\n   @Prop() indeterminate: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.checkboxId}-label`;\n\n  /**\n   * If `true`, the label and the checkbox are inverse and spaced\n   */\n  @Prop() inverse: boolean = false;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n   @Prop() helper?: string;\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean,\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the checkbox has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  render() {\n    const labelId = this.checkboxId + '-label';\n    const inverseClass = this.inverse && 'form-checkbox-inverse';\n    const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host>\n        <input\n          class={`form-check-input ${isInvalidClass}`}\n          type=\"checkbox\"\n          id={this.checkboxId}\n          name={this.name}\n          required={this.required}\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-check-label ${inverseClass}`} id={labelId} htmlFor={this.checkboxId}>\n          <div>\n            {this.label}<slot/>\n          </div>\n          {this.checked && !this.indeterminate && <road-icon class=\"form-check-icon\" icon={checkWide}></road-icon>}\n          {this.indeterminate && <road-icon class=\"form-check-icon\" icon={navigationAddLess}></road-icon>}\n        </label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"],"mappings":"4HAAA,MAAMA,EAAc,44H,MCcPC,EAAQ,M,uPAgGXC,KAAAC,QAAU,KAChBD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,cAAgB,KAAK,EAGpBH,KAAAI,QAAU,KAChBJ,KAAKK,UAAUC,OACfN,KAAKO,UAAUD,MAAM,EAGfN,KAAAQ,OAAS,KACfR,KAAKS,SAASH,OACdN,KAAKU,SAASJ,MAAM,E,gBAvGO,iBAAiBK,M,UAKvBX,KAAKY,W,cAKA,M,aAKO,M,mBAKD,M,cAKN,M,WAKJ,K,WAKA,GAAGZ,KAAKY,mB,aAKL,M,2CAwC3B,cAAAC,CAAeC,GACbd,KAAKe,WAAWT,KAAK,CACnBJ,QAASY,EACTE,MAAOhB,KAAKgB,QAEdhB,KAAKiB,WAAWX,KAAK,CACnBJ,QAASY,EACTE,MAAOhB,KAAKgB,O,CAmBhB,MAAAE,GACE,MAAMC,EAAUnB,KAAKY,WAAa,SAClC,MAAMQ,EAAepB,KAAKqB,SAAW,wBACrC,MAAMC,EAAiBtB,KAAKuB,QAAUC,YAAcxB,KAAKE,SAAWF,KAAKuB,QAAU,GAAK,aAAe,GAEvG,OACEE,EAACC,EAAI,KACHD,EAAA,SACEE,MAAO,oBAAoBL,IAC3BM,KAAK,WACLC,GAAI7B,KAAKY,WACTkB,KAAM9B,KAAK8B,KACXC,SAAU/B,KAAK+B,SACfC,SAAUhC,KAAKgC,SACf7B,cAAeH,KAAKG,cACpBD,QAASF,KAAKE,QACdc,MAAOhB,KAAKgB,MAAK,eACH,GAAGhB,KAAKE,UAAS,gBAChBF,KAAKgC,SAAW,OAAS,KAAI,kBAC3Bb,EACjBlB,QAASD,KAAKC,QACdG,QAASJ,KAAKI,QACdI,OAAQR,KAAKQ,SAEfiB,EAAA,SAAOE,MAAO,oBAAoBP,IAAgBS,GAAIV,EAASc,QAASjC,KAAKY,YAC3Ea,EAAA,WACGzB,KAAKkC,MAAMT,EAAA,cAEbzB,KAAKE,UAAYF,KAAKG,eAAiBsB,EAAA,aAAWE,MAAM,kBAAkBQ,KAAMC,IAChFpC,KAAKG,eAAiBsB,EAAA,aAAWE,MAAM,kBAAkBQ,KAAME,KAEjErC,KAAKuB,OAASvB,KAAKuB,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoB3B,KAAKuB,OACrEvB,KAAKsC,QAAUtC,KAAKsC,SAAW,IAAMb,EAAA,KAAGE,MAAM,UAAU3B,KAAKsC,Q,4DAMtE,IAAI3B,EAAc,E"}

package/dist/roadtrip/p-46cccafc.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as i,a}from"./p-f3d586b3.js";const s=':host{--max-width:16rem;--z-index:1;--width:auto;position:relative;display:inline-block}:host([trigger="hover"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger="hover"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;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:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);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}:host([data-tooltip-position="top"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position="top"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position="left"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position="left"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position="bottom"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position="bottom"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position="right"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position="right"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}';const r=class{constructor(o){t(this,o);this.onClick=()=>{if(this.hasTrigger("click")){this.isOpen?this.close():this.open()}};this.onMouseOver=()=>{if(this.hasTrigger("hover")){this.open()}};this.onMouseOut=()=>{if(this.hasTrigger("hover")){this.close()}};this.tooltipId=`road-tooltip-${++e}`;this.content="";this.position="top";this.contentAlign="center";this.isOpen=false;this.trigger="hover"}async open(){this.isOpen=true}async close(){this.isOpen=false}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}render(){return o(i,{onMouseOver:this.onMouseOver,onMouseOut:this.onMouseOut,onClick:this.onClick,"data-tooltip-position":this.position},o("slot",{"aria-describedby":this.tooltipId}),o("div",{part:"tooltip",id:this.tooltipId,class:{tooltip:true,"tooltip-open":this.isOpen},role:"tooltip","aria-hidden":!this.isOpen},this.content,o("slot",{name:"tooltip-content"})))}get el(){return a(this)}};let e=0;r.style=s;export{r as road_tooltip};
+//# sourceMappingURL=p-46cccafc.entry.js.map

package/dist/roadtrip/p-46cccafc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipCss","Tooltip","this","onClick","hasTrigger","isOpen","close","open","onMouseOver","onMouseOut","tooltipIds","triggerType","triggers","trigger","split","includes","render","h","Host","position","tooltipId","part","id","class","tooltip","role","content","name"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n  --max-width: 16rem;\n  --z-index: 1;\n  --width: auto;\n\n  position: relative;\n  display: inline-block;\n}\n\n:host([trigger=\"hover\"]) .tooltip {\n  display: none;\n}\n\n@media (min-width: 1200px) {\n\n  :host([trigger=\"hover\"]) .tooltip {\n    display: block;\n  }\n}\n\n.tooltip {\n  position: absolute;\n  top: -0.5rem;\n  left: 50%;\n  z-index: 1;\n  width: var(--width);\n  min-width: 6rem;\n  max-width: var(--max-width);\n  padding: 0.5rem;\n  font-family: var(--road-font);\n  font-size: var(--road-body-small);\n  color: var(--road-on-surface);\n  text-align: center;\n  pointer-events: none;\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n  text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n  text-align: left;\n}\n\n.tooltip-open {\n  opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n  left: 50%;\n  transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n  left: 50%;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n  top: 50%;\n  left: 0%;\n  margin-right: 0.5rem;\n  transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n  transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n  top: 100%;\n  left: 50%;\n  margin-top: 0.5rem;\n  transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n  transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n  top: 50%;\n  left: 100%;\n  margin-left: 0.5rem;\n  transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n  transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n   @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen}\n        >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"],"mappings":"oDAAA,MAAMA,EAAa,usD,MCaNC,EAAO,M,yBA0DVC,KAAAC,QAAU,KAChB,GAAID,KAAKE,WAAW,SAAU,CAC5BF,KAAKG,OAASH,KAAKI,QAAUJ,KAAKK,M,GAI9BL,KAAAM,YAAc,KACpB,GAAIN,KAAKE,WAAW,SAAU,CAC5BF,KAAKK,M,GAIDL,KAAAO,WAAa,KACnB,GAAIP,KAAKE,WAAW,SAAU,CAC5BF,KAAKI,O,kBAjEmB,kBAAkBI,I,aAK5B,G,cASL,M,kBAOA,S,YAKqB,M,aAOR,O,CAM1B,UAAMH,GACJL,KAAKG,OAAS,I,CAOhB,WAAMC,GACJJ,KAAKG,OAAS,K,CAqBR,UAAAD,CAAWO,GACjB,MAAMC,EAAWV,KAAKW,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAG3B,MAAAK,GACE,OACEC,EAACC,EAAI,CACHV,YAAaN,KAAKM,YAClBC,WAAYP,KAAKO,WACjBN,QAASD,KAAKC,QAAO,wBACED,KAAKiB,UAE5BF,EAAA,2BAAwBf,KAAKkB,YAE7BH,EAAA,OACEI,KAAK,UACLC,GAAIpB,KAAKkB,UACTG,MAAO,CACLC,QAAS,KACT,eAAgBtB,KAAKG,QAEvBoB,KAAK,UAAS,eACAvB,KAAKG,QAElBH,KAAKwB,QACNT,EAAA,QAAMU,KAAK,qB,2BAOrB,IAAIjB,EAAa,E"}

package/dist/roadtrip/{p-91e92e99.entry.js → p-4ba769a9.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,e as s,h as i,H as e,f as n}from"./p-abdbf6ac.js";const r=":host{position:relative;display:block}";const a=class{constructor(i){t(this,i);this.roadtabswillchange=s(this,"roadtabswillchange",3);this.roadTabsWillChange=s(this,"roadTabsWillChange",3);this.roadtabsdidchange=s(this,"roadtabsdidchange",3);this.roadTabsDidChange=s(this,"roadTabsDidChange",3);this.transitioning=false;this.onTabClicked=t=>{const{tab:s}=t.detail;this.select(s)};this.selectedTab=undefined}async componentWillLoad(){const t=this.tabs;if(t.length>0){this.select(t[0])}}componentWillRender(){const t=this.el.querySelector("road-segmented-button-bar");if(t){const s=this.selectedTab?this.selectedTab.tab:undefined;t.selectedTab=s}}async select(t){const s=h(this.tabs,t);if(!this.shouldSwitch(s)){return false}await this.setActive(s);this.tabSwitch();return true}async getTab(t){return h(this.tabs,t)}getSelected(){return Promise.resolve(this.selectedTab?this.selectedTab.tab:undefined)}setActive(t){if(this.transitioning){return Promise.reject("transitioning already happening")}this.transitioning=true;this.leavingTab=this.selectedTab;this.selectedTab=t;this.roadTabsWillChange.emit({tab:t.tab});t.active=true;return Promise.resolve()}tabSwitch(){const t=this.selectedTab;const s=this.leavingTab;this.leavingTab=undefined;this.transitioning=false;if(!t){return}if(s!==t){if(s){s.active=false}this.roadTabsDidChange.emit({tab:t.tab})}}shouldSwitch(t){const s=this.selectedTab;return t!==undefined&&t!==s&&!this.transitioning}get tabs(){return Array.from(this.el.querySelectorAll("road-tab"))}render(){return i(e,{onRoadSegmentedButtonClick:this.onTabClicked},i("slot",{name:"top"}),i("slot",null))}get el(){return n(this)}};const h=(t,s)=>{const i=typeof s==="string"?t.find((t=>t.tab===s)):s;if(!i){console.error(`tab with id: "${i}" does not exist`)}return i};a.style=r;export{a as road_segmented_buttons};
-//# sourceMappingURL=p-91e92e99.entry.js.map
+import{r as t,c as s,h as i,H as e,a as n}from"./p-f3d586b3.js";const r=":host{position:relative;display:block}";const h=class{constructor(i){t(this,i);this.roadtabswillchange=s(this,"roadtabswillchange",3);this.roadTabsWillChange=s(this,"roadTabsWillChange",3);this.roadtabsdidchange=s(this,"roadtabsdidchange",3);this.roadTabsDidChange=s(this,"roadTabsDidChange",3);this.transitioning=false;this.onTabClicked=t=>{const{tab:s}=t.detail;this.select(s)};this.selectedTab=undefined}async componentWillLoad(){const t=this.tabs;if(t.length>0){this.select(t[0])}}componentWillRender(){const t=this.el.querySelector("road-segmented-button-bar");if(t){const s=this.selectedTab?this.selectedTab.tab:undefined;t.selectedTab=s}}async select(t){const s=o(this.tabs,t);if(!this.shouldSwitch(s)){return false}await this.setActive(s);this.tabSwitch();return true}async getTab(t){return o(this.tabs,t)}getSelected(){return Promise.resolve(this.selectedTab?this.selectedTab.tab:undefined)}setActive(t){if(this.transitioning){return Promise.reject("transitioning already happening")}this.transitioning=true;this.leavingTab=this.selectedTab;this.selectedTab=t;this.roadTabsWillChange.emit({tab:t.tab});t.active=true;return Promise.resolve()}tabSwitch(){const t=this.selectedTab;const s=this.leavingTab;this.leavingTab=undefined;this.transitioning=false;if(!t){return}if(s!==t){if(s){s.active=false}this.roadTabsDidChange.emit({tab:t.tab})}}shouldSwitch(t){const s=this.selectedTab;return t!==undefined&&t!==s&&!this.transitioning}get tabs(){return Array.from(this.el.querySelectorAll("road-tab"))}render(){return i(e,{onRoadSegmentedButtonClick:this.onTabClicked},i("slot",{name:"top"}),i("slot",null))}get el(){return n(this)}};const o=(t,s)=>{const i=typeof s==="string"?t.find((t=>t.tab===s)):s;if(!i){console.error(`tab with id: "${i}" does not exist`)}return i};h.style=r;export{h as road_segmented_buttons};
+//# sourceMappingURL=p-4ba769a9.entry.js.map

package/dist/roadtrip/p-4ba769a9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["segmentedButtonsCss","Tabs","this","transitioning","onTabClicked","ev","tab","detail","select","componentWillLoad","tabs","length","componentWillRender","buttonBar","el","querySelector","selectedTab","undefined","getTab","shouldSwitch","setActive","tabSwitch","getSelected","Promise","resolve","reject","leavingTab","roadTabsWillChange","emit","active","roadTabsDidChange","Array","from","querySelectorAll","render","h","Host","onRoadSegmentedButtonClick","name","tabEl","find","t","console","error"],"sources":["src/components/segmented-buttons/segmented-buttons.css?tag=road-segmented-buttons&encapsulation=shadow","src/components/segmented-buttons/segmented-buttons.tsx"],"sourcesContent":["/*\n * Segmented buttons\n *\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n  tag: 'road-segmented-buttons',\n  styleUrl: 'segmented-buttons.css',\n  shadow: true,\n})\nexport class Tabs {\n\n  private transitioning = false;\n  private leavingTab?: HTMLRoadTabElement;\n\n  @Element() el!: HTMLRoadTabsElement;\n\n  @State() selectedTab?: HTMLRoadTabElement;\n\n  /**\n   * Emitted when the navigation is about to transition to a new component.\n   */\n  @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n  /**\n   * Emitted when the navigation has finished transitioning to a new component.\n   */\n  @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n  async componentWillLoad() {\n    const tabs = this.tabs;\n    if (tabs.length > 0) {\n      this.select(tabs[0]);\n    }\n  }\n\n  componentWillRender() {\n    const buttonBar = this.el.querySelector('road-segmented-button-bar');\n    if (buttonBar) {\n      const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n      buttonBar.selectedTab = tab;\n    }\n  }\n\n  /**\n   * Select a tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n    const selectedTab = getTab(this.tabs, tab);\n    if (!this.shouldSwitch(selectedTab)) {\n      return false;\n    }\n    await this.setActive(selectedTab);\n    this.tabSwitch();\n\n    return true;\n  }\n\n  /**\n   * Get a specific tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n    return getTab(this.tabs, tab);\n  }\n\n  /**\n   * Get the currently selected tab.\n   */\n  @Method()\n  getSelected(): Promise<string | undefined> {\n    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n  }\n\n  private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n    if (this.transitioning) {\n      return Promise.reject('transitioning already happening');\n    }\n\n    this.transitioning = true;\n    this.leavingTab = this.selectedTab;\n    this.selectedTab = selectedTab;\n    this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n    selectedTab.active = true;\n    return Promise.resolve();\n  }\n\n  private tabSwitch() {\n    const selectedTab = this.selectedTab;\n    const leavingTab = this.leavingTab;\n\n    this.leavingTab = undefined;\n    this.transitioning = false;\n    if (!selectedTab) {\n      return;\n    }\n\n    if (leavingTab !== selectedTab) {\n      if (leavingTab) {\n        leavingTab.active = false;\n      }\n      this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n    }\n  }\n\n  private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n    const leavingTab = this.selectedTab;\n    return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('road-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent) => {\n    const { tab } = ev.detail;\n    this.select(tab);\n  };\n\n  render() {\n\n    return (\n      <Host\n        onRoadSegmentedButtonClick={this.onTabClicked}>\n        <slot name=\"top\"/>\n          <slot/>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n  const tabEl = (typeof tab === 'string')\n    ? tabs.find(t => t.tab === tab)\n    : tab;\n\n  if (!tabEl) {\n    console.error(`tab with id: \"${tabEl}\" does not exist`);\n  }\n  return tabEl;\n};"],"mappings":"gEAAA,MAAMA,EAAsB,yC,MCWfC,EAAI,M,iPAEPC,KAAAC,cAAgB,MA+GhBD,KAAAE,aAAgBC,IACtB,MAAMC,IAAEA,GAAQD,EAAGE,OACnBL,KAAKM,OAAOF,EAAI,E,2BA5FlB,uBAAMG,GACJ,MAAMC,EAAOR,KAAKQ,KAClB,GAAIA,EAAKC,OAAS,EAAG,CACnBT,KAAKM,OAAOE,EAAK,G,EAIrB,mBAAAE,GACE,MAAMC,EAAYX,KAAKY,GAAGC,cAAc,6BACxC,GAAIF,EAAW,CACb,MAAMP,EAAMJ,KAAKc,YAAcd,KAAKc,YAAYV,IAAMW,UACtDJ,EAAUG,YAAcV,C,EAU5B,YAAME,CAAOF,GACX,MAAMU,EAAcE,EAAOhB,KAAKQ,KAAMJ,GACtC,IAAKJ,KAAKiB,aAAaH,GAAc,CACnC,OAAO,K,OAEHd,KAAKkB,UAAUJ,GACrBd,KAAKmB,YAEL,OAAO,I,CAST,YAAMH,CAAOZ,GACX,OAAOY,EAAOhB,KAAKQ,KAAMJ,E,CAO3B,WAAAgB,GACE,OAAOC,QAAQC,QAAQtB,KAAKc,YAAcd,KAAKc,YAAYV,IAAMW,U,CAG3D,SAAAG,CAAUJ,GAChB,GAAId,KAAKC,cAAe,CACtB,OAAOoB,QAAQE,OAAO,kC,CAGxBvB,KAAKC,cAAgB,KACrBD,KAAKwB,WAAaxB,KAAKc,YACvBd,KAAKc,YAAcA,EACnBd,KAAKyB,mBAAmBC,KAAK,CAAEtB,IAAKU,EAAYV,MAChDU,EAAYa,OAAS,KACrB,OAAON,QAAQC,S,CAGT,SAAAH,GACN,MAAML,EAAcd,KAAKc,YACzB,MAAMU,EAAaxB,KAAKwB,WAExBxB,KAAKwB,WAAaT,UAClBf,KAAKC,cAAgB,MACrB,IAAKa,EAAa,CAChB,M,CAGF,GAAIU,IAAeV,EAAa,CAC9B,GAAIU,EAAY,CACdA,EAAWG,OAAS,K,CAEtB3B,KAAK4B,kBAAkBF,KAAK,CAAEtB,IAAKU,EAAYV,K,EAI3C,YAAAa,CAAaH,GACnB,MAAMU,EAAaxB,KAAKc,YACxB,OAAOA,IAAgBC,WAAaD,IAAgBU,IAAexB,KAAKC,a,CAG1E,QAAYO,GACV,OAAOqB,MAAMC,KAAK9B,KAAKY,GAAGmB,iBAAiB,Y,CAQ7C,MAAAC,GAEE,OACEC,EAACC,EAAI,CACHC,2BAA4BnC,KAAKE,cACjC+B,EAAA,QAAMG,KAAK,QACTH,EAAA,a,2BAMV,MAAMjB,EAAS,CAACR,EAA4BJ,KAC1C,MAAMiC,SAAgBjC,IAAQ,SAC1BI,EAAK8B,MAAKC,GAAKA,EAAEnC,MAAQA,IACzBA,EAEJ,IAAKiC,EAAO,CACVG,QAAQC,MAAM,iBAAiBJ,oB,CAEjC,OAAOA,CAAK,E"}

package/dist/roadtrip/{p-093973f5.entry.js → p-4f47f4f7.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o,H as i}from"./p-abdbf6ac.js";import{a as e}from"./p-37ab7c7f.js";import"./p-e8c090a5.js";const a=":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;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:inline-flex;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-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}: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-on-surface);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-surface);border-color:var(--road-outline)}:host(.chip-secondary){color:var(--road-surface-inverse);background:var(--road-button-primary);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";const t=class{constructor(o){r(this,o);this.color="default";this.outline=false;this.size="md";this.hasCloseIcon=false}render(){const r=this.outline?"chip-outline":"";return o(i,{class:`${r} chip-${this.color} chip-${this.size}`},o("div",{class:"chip-description"},o("slot",null)),this.hasCloseIcon&&o("road-icon",{class:"chip-close",icon:e}))}};t.style=a;export{t as road_chip};
-//# sourceMappingURL=p-093973f5.entry.js.map
+import{r,h as o,H as i}from"./p-f3d586b3.js";import{a as e}from"./p-73fe2357.js";import"./p-1ccae339.js";const a=":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;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:inline-flex;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-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}: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-on-surface);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-surface);border-color:var(--road-outline)}:host(.chip-secondary){color:var(--road-surface-inverse);background:var(--road-button-primary);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";const t=class{constructor(o){r(this,o);this.color="default";this.outline=false;this.size="md";this.hasCloseIcon=false}render(){const r=this.outline?"chip-outline":"";return o(i,{class:`${r} chip-${this.color} chip-${this.size}`},o("div",{class:"chip-description"},o("slot",null)),this.hasCloseIcon&&o("road-icon",{class:"chip-close",icon:e}))}};t.style=a;export{t as road_chip};
+//# sourceMappingURL=p-4f47f4f7.entry.js.map

package/dist/roadtrip/p-4f47f4f7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","Chip","render","outlineClass","this","outline","h","Host","class","color","size","hasCloseIcon","icon","navigationClose"],"sources":["src/components/chip/chip.css?tag=road-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Outline\n * - Icon\n * - Close\n * - Size\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  height: 1.5rem;\n  padding: 0.25rem 0.5rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--road-font-size-14);\n  cursor: pointer;\n  border: 0;\n  border-radius: 1.625rem;\n  outline: 0;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.chip-description {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 0.5rem;\n}\n\n/* OUTLINE\n -------------------- */\n\n:host(.chip-outline) {\n  border-style: solid;\n  border-width: 1px;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-right: 0.5rem;\n  margin-left: -0.5rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.chip-close {\n  width: 1rem;\n  height: 1rem;\n  margin-right: -0.25rem;\n  color: var(--road-surface);\n  background: var(--road-on-surface-weak);\n  border-radius: 50%;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n/* SIZE\n -------------------- */\n\n:host(.chip-lg) {\n  height: 2.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-16);\n}\n\n:host(.chip-lg) ::slotted(road-icon) {\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.75rem;\n  margin-left: -0.75rem;\n}\n\n:host(.chip-lg) .chip-description {\n  padding: 0 0.75rem;\n}\n\n:host(.chip-lg) .chip-close {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.chip-default) {\n  color: var(--road-on-surface);\n  background: var(--road-grey-200);\n}\n\n:host(.chip-outline.chip-default) {\n  background: var(--road-surface);\n  border-color: var(--road-outline);\n}\n\n:host(.chip-secondary) {\n  color: var(--road-surface-inverse);\n  background: var(--road-button-primary);\n  border-color: transparent;\n}\n\n:host(.chip-secondary) .chip-close {\n  color: var(--road-primary);\n  background: var(--road-surface);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:hover) {\n  border-color: var(--road-outline-variant);\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class Chip {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'default' | 'secondary' = 'default';\n\n  /**\n   * Display an outline style chip.\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'md' | 'lg' = 'md';\n\n  /**\n   * Display a close icon\n   */\n  @Prop() hasCloseIcon: boolean = false;\n\n  render() {\n    const outlineClass = this.outline ? 'chip-outline' : '';\n\n    return (\n      <Host\n        class={`${outlineClass} chip-${this.color} chip-${this.size}`}\n      >\n        <div class=\"chip-description\">\n          <slot/>\n        </div>\n        {this.hasCloseIcon && <road-icon class=\"chip-close\" icon={navigationClose}></road-icon>}\n      </Host>\n    );\n  }\n}"],"mappings":"yGAAA,MAAMA,EAAU,kyD,MCaHC,EAAI,M,oCAI2B,U,aAKf,M,UAKC,K,kBAKI,K,CAEhC,MAAAC,GACE,MAAMC,EAAeC,KAAKC,QAAU,eAAiB,GAErD,OACEC,EAACC,EAAI,CACHC,MAAO,GAAGL,UAAqBC,KAAKK,cAAcL,KAAKM,QAEvDJ,EAAA,OAAKE,MAAM,oBACTF,EAAA,cAEDF,KAAKO,cAAgBL,EAAA,aAAWE,MAAM,aAAaI,KAAMC,I"}

package/dist/roadtrip/{p-1baffcc2.entry.js → p-4f5e8cc2.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o,H as i}from"./p-abdbf6ac.js";const a=':host{display:block}.progress-indicator-horizontal{display:flex;padding-left:0;margin:0;font-family:var(--road-font);line-height:1.5;list-style:none}.progress-indicator-horizontal.progress-indicator-horizontal-header{background-color:var(--road-header-surface)}.progress-indicator-horizontal-item{display:flex;flex:1;flex-direction:column;text-align:center}.progress-indicator-horizontal-item:last-child{margin-top:0.125rem}.progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:"";background:var(--road-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:"";background:var(--road-header-surface-disabled)}.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link{cursor:not-allowed}.progress-indicator-horizontal-link{z-index:1;display:flex;flex-direction:column;align-items:center;text-decoration:none}.progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}::slotted([slot="progress-indicator-horizontal-icon"]) road-icon{color:currentColor}.progress-indicator-horizontal-header ::slotted([slot="progress-indicator-horizontal-icon"]) road-icon{color:currentColor}.progress-indicator-horizontal-header .progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-header-surface-disabled);background:var(--road-header-surface-disabled);border-radius:50%;fill:currentColor}.progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-weak)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-header-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-header-surface-weak)}.completed:not(:last-child)::after{background:var(--road-primary)}.progress-indicator-horizontal-header .completed:not(:last-child)::after{background:var(--road-header-badge)}.current .progress-indicator-horizontal-icon{color:var(--road-on-primary);background:var(--road-primary);border:0}.completed .progress-indicator-horizontal-icon{width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon{color:var(--road-header-badge);background:none;border:2px solid var(--road-header-badge)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon{width:calc(1.5rem);height:calc(1.5rem);color:var(--road-on-header-badge);background:var(--road-header-badge);border:0}.current .progress-indicator-horizontal-title,.completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-surface)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-header-surface)}';const e=class{constructor(o){r(this,o);this.color="default";this.stateFirstStep=undefined;this.stateSecondStep=undefined;this.stateThirdStep=undefined;this.urlStep1=undefined;this.urlStep2=undefined;this.urlStep3=undefined}render(){const r=this.color!==undefined?`progress-indicator-horizontal progress-indicator-horizontal-${this.color}`:"progress-indicator-horizontal";const a=this.stateFirstStep!==undefined?`progress-indicator-horizontal-item ${this.stateFirstStep}`:"progress-indicator-horizontal-item";const e=this.stateSecondStep!==undefined?`progress-indicator-horizontal-item ${this.stateSecondStep}`:"progress-indicator-horizontal-item";const t=this.stateSecondStep!==undefined?`progress-indicator-horizontal-item ${this.stateThirdStep}`:"progress-indicator-horizontal-item";const n=this.urlStep1!==undefined?`${this.urlStep1}`:"#";const s=this.urlStep2!==undefined?`${this.urlStep2}`:"#";const d=this.urlStep3!==undefined?`${this.urlStep3}`:"#";return o(i,null,o("nav",null,o("ul",{class:`${r}`},o("li",{class:`${a}`},o("a",{class:"progress-indicator-horizontal-link",href:`${n}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title"})))),o("li",{class:`${e}`},o("a",{class:"progress-indicator-horizontal-link",href:`${s}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon2"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title2"})))),o("li",{class:`${t}`},o("a",{class:"progress-indicator-horizontal-link",href:`${d}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon3"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title3"})))))))}};e.style=a;export{e as road_progress_indicator_horizontal};
-//# sourceMappingURL=p-1baffcc2.entry.js.map
+import{r,h as o,H as i}from"./p-f3d586b3.js";const a=':host{display:block}.progress-indicator-horizontal{display:flex;padding-left:0;margin:0;font-family:var(--road-font);line-height:1.5;list-style:none}.progress-indicator-horizontal.progress-indicator-horizontal-header{background-color:var(--road-header-surface)}.progress-indicator-horizontal-item{display:flex;flex:1;flex-direction:column;text-align:center}.progress-indicator-horizontal-item:last-child{margin-top:0.125rem}.progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:"";background:var(--road-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:"";background:var(--road-header-surface-disabled)}.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link{cursor:not-allowed}.progress-indicator-horizontal-link{z-index:1;display:flex;flex-direction:column;align-items:center;text-decoration:none}.progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}::slotted([slot="progress-indicator-horizontal-icon"]) road-icon{color:currentColor}.progress-indicator-horizontal-header ::slotted([slot="progress-indicator-horizontal-icon"]) road-icon{color:currentColor}.progress-indicator-horizontal-header .progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-header-surface-disabled);background:var(--road-header-surface-disabled);border-radius:50%;fill:currentColor}.progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-weak)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-header-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-header-surface-weak)}.completed:not(:last-child)::after{background:var(--road-primary)}.progress-indicator-horizontal-header .completed:not(:last-child)::after{background:var(--road-header-badge)}.current .progress-indicator-horizontal-icon{color:var(--road-on-primary);background:var(--road-primary);border:0}.completed .progress-indicator-horizontal-icon{width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon{color:var(--road-header-badge);background:none;border:2px solid var(--road-header-badge)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon{width:calc(1.5rem);height:calc(1.5rem);color:var(--road-on-header-badge);background:var(--road-header-badge);border:0}.current .progress-indicator-horizontal-title,.completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-surface)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-header-surface)}';const e=class{constructor(o){r(this,o);this.color="default";this.stateFirstStep=undefined;this.stateSecondStep=undefined;this.stateThirdStep=undefined;this.urlStep1=undefined;this.urlStep2=undefined;this.urlStep3=undefined}render(){const r=this.color!==undefined?`progress-indicator-horizontal progress-indicator-horizontal-${this.color}`:"progress-indicator-horizontal";const a=this.stateFirstStep!==undefined?`progress-indicator-horizontal-item ${this.stateFirstStep}`:"progress-indicator-horizontal-item";const e=this.stateSecondStep!==undefined?`progress-indicator-horizontal-item ${this.stateSecondStep}`:"progress-indicator-horizontal-item";const t=this.stateSecondStep!==undefined?`progress-indicator-horizontal-item ${this.stateThirdStep}`:"progress-indicator-horizontal-item";const n=this.urlStep1!==undefined?`${this.urlStep1}`:"#";const s=this.urlStep2!==undefined?`${this.urlStep2}`:"#";const d=this.urlStep3!==undefined?`${this.urlStep3}`:"#";return o(i,null,o("nav",null,o("ul",{class:`${r}`},o("li",{class:`${a}`},o("a",{class:"progress-indicator-horizontal-link",href:`${n}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title"})))),o("li",{class:`${e}`},o("a",{class:"progress-indicator-horizontal-link",href:`${s}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon2"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title2"})))),o("li",{class:`${t}`},o("a",{class:"progress-indicator-horizontal-link",href:`${d}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon3"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title3"})))))))}};e.style=a;export{e as road_progress_indicator_horizontal};
+//# sourceMappingURL=p-4f5e8cc2.entry.js.map

package/dist/roadtrip/p-4f5e8cc2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["progressIndicatorHorizontalCss","Stepper","render","colorClass","this","color","undefined","stateClass","stateFirstStep","stateSecondStepClass","stateSecondStep","stateThirdStepClass","stateThirdStep","urlStep1","urlStep2","urlStep3","h","Host","class","href","name"],"sources":["src/components/progress-indicator-horizontal/progress-indicator-horizontal.css?tag=road-progress-indicator-horizontal&encapsulation=shadow","src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"sourcesContent":["/*\n * Progress-indicator-horizontal\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n  display: block;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL\n -------------------- */\n\n.progress-indicator-horizontal {\n  display: flex;\n  padding-left: 0;\n  margin: 0;\n  font-family: var(--road-font);\n  line-height: 1.5;\n  list-style: none;\n}\n\n.progress-indicator-horizontal.progress-indicator-horizontal-header {\n  background-color: var(--road-header-surface);\n}\n\n\n/* PROGRESS INDICATOR HORIZONTAL ITEM\n -------------------- */\n\n.progress-indicator-horizontal-item {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  text-align: center;\n}\n\n.progress-indicator-horizontal-item:last-child {\n  margin-top: 0.125rem;\n}\n\n/**\n * Line between items\n */\n\n\n.progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {\n  position: relative;\n  top: 0.8rem;\n  left: calc(50% + 12px);\n  order: -1;\n  width: calc(100% - 24px);\n  height: 2px;\n  content: \"\";\n  background: var(--road-header-surface-disabled);\n}\n\n\n/**\n * Disabled click for current and next steps\n */\n\n\n.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {\n  cursor: not-allowed;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL LINK\n -------------------- */\n\n.progress-indicator-horizontal-link {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-decoration: none;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL ICON\n -------------------- */\n\n.progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n  color: currentColor;\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n  background: var(--road-header-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL TITLE\n -------------------- */\n\n.progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-surface-weak);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: var(--road-body-small);\n  font-weight: 700;\n  color: var(--road-on-header-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{\n  display: block;\n  font-size: var(--road-body-small);\n  font-weight: 400;\n  color: var(--road-on-header-surface-weak);\n}\n\n/* STEP COMPLETED\n -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed:not(:last-child)::after {\n  background: var(--road-header-badge);\n}\n\n.current .progress-indicator-horizontal-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n  border: 0;\n}\n\n.completed .progress-indicator-horizontal-icon{\n  width: calc(1.5rem - 4px);\n  height: calc(1.5rem - 4px);\n  color: var(--road-primary);\n  background: var(--road-surface);\n  border: 2px solid var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon {\n  color: var(--road-header-badge);\n  background: none;\n  border: 2px solid var(--road-header-badge);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {\n  width: calc(1.5rem);\n  height: calc(1.5rem);\n  color: var(--road-on-header-badge);\n  background: var(--road-header-badge);\n  border: 0;\n}\n\n.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title {\n  font-weight: 700;\n  color: var(--road-on-header-surface);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n */\n\n@Component({\n  tag: 'road-progress-indicator-horizontal',\n  styleUrl: 'progress-indicator-horizontal.css',\n  shadow: true,\n})\nexport class Stepper {\n\n  /**\n    * The color progress-indicator-horizontal.\n    */\n    @Prop({ reflect: true }) color?: 'default' | 'header' = 'default';\n\n    /**\n   * The color of the first step.\n   */\n   @Prop() stateFirstStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the second step.\n   */\n    @Prop() stateSecondStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The color of the third step.\n   */\n     @Prop() stateThirdStep?: 'default' | 'current' | 'comleted';\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep1?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep2?: string;\n\n    /**\n   * The url of the first step.\n   */\n    @Prop() urlStep3?: string;\n    \n\n     render() {\n\n       const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n       const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n       const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n       const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n       const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n       const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n       const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n\n\n       return (\n         <Host>\n           <nav>\n             <ul class={`${colorClass}`}>\n               <li class={`${stateClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title\"/>\n                   </span>\n                 </a>\n               </li>\n               <li class={`${stateSecondStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon2\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title2\"/>\n                   </span>\n                 </a>\n               </li>\n               <li class={`${stateThirdStepClass}`}>\n                 <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n                   <span class=\"progress-indicator-horizontal-icon\">\n                     <slot name=\"progress-indicator-horizontal-icon3\"/>\n                   </span>\n                   <span class=\"progress-indicator-horizontal-title\">\n                     <slot name=\"progress-indicator-horizontal-title3\"/>\n                   </span>\n                 </a>\n               </li>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"],"mappings":"6CAAA,MAAMA,EAAiC,ywH,MCmB1BC,EAAO,M,oCAKwC,U,mKAiCvD,MAAAC,GAEE,MAAMC,EAAaC,KAAKC,QAAUC,UAAY,+DAA+DF,KAAKC,QAAU,gCAC5H,MAAME,EAAaH,KAAKI,iBAAmBF,UAAY,sCAAsCF,KAAKI,iBAAmB,qCACrH,MAAMC,EAAuBL,KAAKM,kBAAoBJ,UAAY,sCAAsCF,KAAKM,kBAAoB,qCACjI,MAAMC,EAAsBP,KAAKM,kBAAoBJ,UAAY,sCAAsCF,KAAKQ,iBAAmB,qCAC/H,MAAMC,EAAWT,KAAKS,WAAaP,UAAY,GAAGF,KAAKS,WAAa,IACpE,MAAMC,EAAWV,KAAKU,WAAaR,UAAY,GAAGF,KAAKU,WAAa,IACpE,MAAMC,EAAWX,KAAKW,WAAaT,UAAY,GAAGF,KAAKW,WAAa,IAIpE,OACEC,EAACC,EAAI,KACHD,EAAA,WACEA,EAAA,MAAIE,MAAO,GAAGf,KACZa,EAAA,MAAIE,MAAO,GAAGX,KACZS,EAAA,KAAGE,MAAM,qCAAqCC,KAAM,GAAGN,KACrDG,EAAA,QAAME,MAAM,sCACVF,EAAA,QAAMI,KAAK,wCAEbJ,EAAA,QAAME,MAAM,uCACVF,EAAA,QAAMI,KAAK,2CAIjBJ,EAAA,MAAIE,MAAO,GAAGT,KACZO,EAAA,KAAGE,MAAM,qCAAqCC,KAAM,GAAGL,KACrDE,EAAA,QAAME,MAAM,sCACVF,EAAA,QAAMI,KAAK,yCAEbJ,EAAA,QAAME,MAAM,uCACVF,EAAA,QAAMI,KAAK,4CAIjBJ,EAAA,MAAIE,MAAO,GAAGP,KACZK,EAAA,KAAGE,MAAM,qCAAqCC,KAAM,GAAGJ,KACrDC,EAAA,QAAME,MAAM,sCACVF,EAAA,QAAMI,KAAK,yCAEbJ,EAAA,QAAME,MAAM,uCACVF,EAAA,QAAMI,KAAK,8C"}

package/dist/roadtrip/{p-8e216f6a.entry.js → p-5483109e.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as r,H as t}from"./p-abdbf6ac.js";const a=":host(.text-primary){color:var(--road-primary-10)}:host(.text-secondary){color:var(--road-secondary)}:host(.text-accent){color:var(--road-secondary-50)}:host(.text-info){color:var(--road-on-info-surface)}:host(.text-success){color:var(--road-on-success-surface)}:host(.text-warning){color:var(--road-on-warning-surface)}:host(.text-danger){color:var(--road-on-danger-surface)}:host(.text-default){color:var(--road-on-surface)}:host(.text-default-second){color:var(--road-grey-40)}:host(.text-disabled){color:var(--road-grey-60)}:host(.text-white){color:var(--road-grey-100-new)}";const s=class{constructor(r){o(this,r);this.color="default"}render(){const o=this.color!==undefined?`text-${this.color}`:"";return r(t,{class:`${o}`},r("slot",null))}};s.style=a;export{s as road_text};
-//# sourceMappingURL=p-8e216f6a.entry.js.map
+import{r as o,h as r,H as t}from"./p-f3d586b3.js";const a=":host(.text-primary){color:var(--road-primary-10)}:host(.text-secondary){color:var(--road-secondary)}:host(.text-accent){color:var(--road-secondary-50)}:host(.text-info){color:var(--road-on-info-surface)}:host(.text-success){color:var(--road-on-success-surface)}:host(.text-warning){color:var(--road-on-warning-surface)}:host(.text-danger){color:var(--road-on-danger-surface)}:host(.text-default){color:var(--road-on-surface)}:host(.text-default-second){color:var(--road-grey-40)}:host(.text-disabled){color:var(--road-grey-60)}:host(.text-white){color:var(--road-grey-100-new)}";const s=class{constructor(r){o(this,r);this.color="default"}render(){const o=this.color!==undefined?`text-${this.color}`:"";return r(t,{class:`${o}`},r("slot",null))}};s.style=a;export{s as road_text};
+//# sourceMappingURL=p-5483109e.entry.js.map

package/dist/roadtrip/p-5483109e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textCss","Text","render","colorClass","this","color","undefined","h","Host","class"],"sources":["src/components/text/text.css?tag=road-text&encapsulation=shadow","src/components/text/text.tsx"],"sourcesContent":["/*\n * Text\n *\n * Index\n * - Colors\n */\n\n/* COLORS\n -------------------- */\n\n/**\n * Primary\n */\n\n:host(.text-primary) {\n  color: var(--road-primary-10);\n}\n\n/**\n * Secondary\n */\n\n:host(.text-secondary) {\n  color: var(--road-secondary);\n}\n\n/**\n * Accent\n */\n\n:host(.text-accent) {\n  color: var(--road-secondary-50);\n}\n\n/**\n * Info\n */\n\n:host(.text-info) {\n  color: var(--road-on-info-surface);\n}\n\n/**\n * Success\n */\n\n:host(.text-success) {\n  color: var(--road-on-success-surface);\n}\n\n/**\n * Warning\n */\n\n:host(.text-warning) {\n  color: var(--road-on-warning-surface);\n}\n\n/**\n * Danger\n */\n\n:host(.text-danger) {\n  color: var(--road-on-danger-surface);\n}\n\n/**\n * Default\n */\n\n:host(.text-default) {\n  color: var(--road-on-surface);\n}\n\n/**\n * Default second\n */\n\n:host(.text-default-second) {\n  color: var(--road-grey-40);\n}\n\n/**\n * Disabled\n */\n\n:host(.text-disabled) {\n  color: var(--road-grey-60);\n}\n\n/**\n * White\n */\n\n:host(.text-white) {\n  color: var(--road-grey-100-new);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content of the text.\n */\n\n@Component({\n  tag: 'road-text',\n  styleUrl: 'text.css',\n  shadow: true,\n})\nexport class Text {\n\n  /**\n   * Color of the text.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'default' | 'default-second' | 'disabled' | 'white' = 'default';\n\n  render() {\n    const colorClass = this.color !== undefined ? `text-${this.color}` : '';\n\n    return (\n      <Host class={`${colorClass}`}>\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,qkB,MCWHC,EAAI,M,oCAKwI,S,CAEvJ,MAAAC,GACE,MAAMC,EAAaC,KAAKC,QAAUC,UAAY,QAAQF,KAAKC,QAAU,GAErE,OACEE,EAACC,EAAI,CAACC,MAAO,GAAGN,KACdI,EAAA,a"}

package/dist/roadtrip/{p-9419bdaf.entry.js → p-5ab03aa4.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,e as r,h as e,H as t}from"./p-abdbf6ac.js";const o='.sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="date"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="time"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-grey-500)}';const s=class{constructor(e){a(this,e);this.roadinput=r(this,"roadinput",7);this.roadInput=r(this,"roadInput",7);this.roadchange=r(this,"roadchange",7);this.roadChange=r(this,"roadChange",7);this.roadblur=r(this,"roadblur",7);this.roadBlur=r(this,"roadBlur",7);this.roadfocus=r(this,"roadfocus",7);this.roadFocus=r(this,"roadFocus",7);this.onInput=a=>{const r=a.target;if(r){this.value=r.value||""}this.roadinput.emit(a);this.roadInput.emit(a)};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.textareaId=`road-textarea-${i++}`;this.autocapitalize="none";this.autofocus=false;this.disabled=false;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.textareaId;this.placeholder=undefined;this.sizes="lg";this.readonly=false;this.required=false;this.spellcheck=false;this.resize=true;this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.value="";this.label=`${this.textareaId}-label`;this.error=undefined;this.helper=undefined}valueChanged(){this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}getValue(){return this.value||""}render(){const a=this.getValue();const r=this.textareaId+"-label";const o=this.value!==""?"has-value":"";const s=this.resize==false?"no-resize":"";const i=this.error!==undefined&&this.error!==""?"is-invalid":"";return e(t,{"aria-disabled":this.disabled?"true":null,class:this.sizes&&`input-${this.sizes}`},e("textarea",{class:`form-control textarea-control ${o} ${s} ${i}`,id:this.textareaId,"aria-disabled":this.disabled?"true":null,"aria-labelledby":r,disabled:this.disabled,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,value:a,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),e("label",{class:"form-label",id:r,htmlFor:this.textareaId},this.label),this.error&&this.error!==""&&e("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&e("p",{class:"helper"},this.helper))}static get watchers(){return{value:["valueChanged"]}}};let i=0;s.style=o;export{s as road_textarea};
-//# sourceMappingURL=p-9419bdaf.entry.js.map
+import{r as a,c as r,h as e,H as t}from"./p-f3d586b3.js";const o='.sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="date"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type="time"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-grey-500)}';const s=class{constructor(e){a(this,e);this.roadinput=r(this,"roadinput",7);this.roadInput=r(this,"roadInput",7);this.roadchange=r(this,"roadchange",7);this.roadChange=r(this,"roadChange",7);this.roadblur=r(this,"roadblur",7);this.roadBlur=r(this,"roadBlur",7);this.roadfocus=r(this,"roadfocus",7);this.roadFocus=r(this,"roadFocus",7);this.onInput=a=>{const r=a.target;if(r){this.value=r.value||""}this.roadinput.emit(a);this.roadInput.emit(a)};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.textareaId=`road-textarea-${i++}`;this.autocapitalize="none";this.autofocus=false;this.disabled=false;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.textareaId;this.placeholder=undefined;this.sizes="lg";this.readonly=false;this.required=false;this.spellcheck=false;this.resize=true;this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.value="";this.label=`${this.textareaId}-label`;this.error=undefined;this.helper=undefined}valueChanged(){this.roadchange.emit({value:this.value});this.roadChange.emit({value:this.value})}getValue(){return this.value||""}render(){const a=this.getValue();const r=this.textareaId+"-label";const o=this.value!==""?"has-value":"";const s=this.resize==false?"no-resize":"";const i=this.error!==undefined&&this.error!==""?"is-invalid":"";return e(t,{"aria-disabled":this.disabled?"true":null,class:this.sizes&&`input-${this.sizes}`},e("textarea",{class:`form-control textarea-control ${o} ${s} ${i}`,id:this.textareaId,"aria-disabled":this.disabled?"true":null,"aria-labelledby":r,disabled:this.disabled,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,value:a,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus}),e("label",{class:"form-label",id:r,htmlFor:this.textareaId},this.label),this.error&&this.error!==""&&e("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&e("p",{class:"helper"},this.helper))}static get watchers(){return{value:["valueChanged"]}}};let i=0;s.style=o;export{s as road_textarea};
+//# sourceMappingURL=p-5ab03aa4.entry.js.map

package/dist/roadtrip/p-5ab03aa4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textareaCss","Textarea","this","onInput","ev","input","target","value","roadinput","emit","roadInput","onBlur","roadblur","roadBlur","onFocus","roadfocus","roadFocus","textareaIds","textareaId","valueChanged","roadchange","roadChange","getValue","render","labelId","hasValueClass","noResizeClass","resize","isInvalidClass","error","undefined","h","Host","disabled","class","sizes","id","autoCapitalize","autocapitalize","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","maxLength","maxlength","minLength","minlength","name","placeholder","readOnly","readonly","required","spellcheck","cols","rows","wrap","htmlFor","label","helper"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  color: var(--road-on-surface-weak);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n  height: auto;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n  resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-extra-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-grey-500);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-textarea',\n  styleUrl: 'textarea.css',\n  scoped: true,\n})\nexport class Textarea {\n\n  /**\n   * The id of textarea\n   */\n  @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize: string = 'none';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the textarea.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.textareaId;\n\n  /**\n   * Instructional text that shows before the textarea has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n    /**\n   * If `false`, to disabled resize.\n   */\n    @Prop() resize: boolean = true;\n\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n   */\n  @Prop() cols?: number;\n\n  /**\n   * The number of rows of the control.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Indicates how the control wraps text.\n   */\n  @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.textareaId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value });\n    this.roadChange.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.textareaId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const noResizeClass = this.resize == false ? 'no-resize' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <textarea\n          class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n          id={this.textareaId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoFocus={this.autofocus}\n          enterKeyHint={this.enterkeyhint}\n          inputMode={this.inputmode}\n          maxLength={this.maxlength}\n          minLength={this.minlength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          value={value}\n          spellcheck={this.spellcheck}\n          cols={this.cols}\n          rows={this.rows}\n          wrap={this.wrap}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n        >\n        </textarea>\n        <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet textareaIds = 0;\n"],"mappings":"yDAAA,MAAMA,EAAc,23G,MCOPC,EAAQ,M,iUAgKXC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9BL,KAAKM,UAAUC,KAAKL,GACpBF,KAAKQ,UAAUD,KAAKL,EAAoB,EAGlCF,KAAAS,OAAS,KACfT,KAAKU,SAASH,OACdP,KAAKW,SAASJ,MAAM,EAGdP,KAAAY,QAAU,KAChBZ,KAAKa,UAAUN,OACfP,KAAKc,UAAUP,MAAM,E,gBA3KM,iBAAiBQ,M,oBAKb,O,eAKJ,M,cAKD,M,iHA4BLf,KAAKgB,W,sCAUE,K,cAKF,M,cAKA,M,gBAKE,M,YAKF,K,uEAoBqB,G,WAKzB,GAAGhB,KAAKgB,mB,2CAgBtB,YAAAC,GACRjB,KAAKkB,WAAWX,KAAK,CAAEF,MAAOL,KAAKK,QACnCL,KAAKmB,WAAWZ,KAAK,CAAEF,MAAOL,KAAKK,O,CAmC7B,QAAAe,GACN,OAAOpB,KAAKK,OAAS,E,CAsBvB,MAAAgB,GACE,MAAMhB,EAAQL,KAAKoB,WACnB,MAAME,EAAUtB,KAAKgB,WAAa,SAClC,MAAMO,EAAgBvB,KAAKK,QAAU,GAAK,YAAc,GACxD,MAAMmB,EAAgBxB,KAAKyB,QAAU,MAAQ,YAAc,GAC3D,MAAMC,EAAiB1B,KAAK2B,QAAUC,WAAa5B,KAAK2B,QAAU,GAAK,aAAe,GAEtF,OACEE,EAACC,EAAI,iBAAgB9B,KAAK+B,SAAW,OAAS,KAAMC,MAAOhC,KAAKiC,OAAS,SAASjC,KAAKiC,SACrFJ,EAAA,YACEG,MAAO,iCAAiCT,KAAiBC,KAAiBE,IAC1EQ,GAAIlC,KAAKgB,WAAU,gBACJhB,KAAK+B,SAAW,OAAS,KAAI,kBAC3BT,EACjBS,SAAU/B,KAAK+B,SACfI,eAAgBnC,KAAKoC,eACrBC,UAAWrC,KAAKsC,UAChBC,aAAcvC,KAAKwC,aACnBC,UAAWzC,KAAK0C,UAChBC,UAAW3C,KAAK4C,UAChBC,UAAW7C,KAAK8C,UAChBC,KAAM/C,KAAK+C,KACXC,YAAahD,KAAKgD,YAClBC,SAAUjD,KAAKkD,SACfC,SAAUnD,KAAKmD,SACf9C,MAAOA,EACP+C,WAAYpD,KAAKoD,WACjBC,KAAMrD,KAAKqD,KACXC,KAAMtD,KAAKsD,KACXC,KAAMvD,KAAKuD,KACXtD,QAASD,KAAKC,QACdQ,OAAQT,KAAKS,OACbG,QAASZ,KAAKY,UAGhBiB,EAAA,SAAOG,MAAM,aAAaE,GAAIZ,EAASkC,QAASxD,KAAKgB,YAAahB,KAAKyD,OACtEzD,KAAK2B,OAAS3B,KAAK2B,QAAU,IAAME,EAAA,KAAGG,MAAM,oBAAoBhC,KAAK2B,OACrE3B,KAAK0D,QAAU1D,KAAK0D,SAAW,IAAM7B,EAAA,KAAGG,MAAM,UAAUhC,KAAK0D,Q,wDAOtE,IAAI3C,EAAc,E"}

package/dist/roadtrip/p-60e25858.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,H as i}from"./p-f3d586b3.js";import"./p-1ccae339.js";const a=":host{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline)}@media (max-width: 576px){:host{overflow-x:auto}}@media (min-width: 1200px){:host{bottom:auto;flex-direction:column;width:104px;height:100%;border-top:0;border-right:1px solid var(--road-outline)}}::slotted(.drawer-button-save){position:absolute;bottom:0;width:100%}";const r=class{constructor(o){t(this,o);this.roadnavbarchanged=e(this,"roadnavbarchanged",7);this.roadNavbarChanged=e(this,"roadNavbarChanged",7);this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadnavbarchanged.emit({tab:this.selectedTab});this.roadNavbarChanged.emit({tab:this.selectedTab})}}onNavbarChanged(t){this.selectedTab=t.detail.tab}componentWillLoad(){this.selectedTabChanged()}render(){return o(i,{role:"tablist"},o("slot",null))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};r.style=a;export{r as road_navbar};
+//# sourceMappingURL=p-60e25858.entry.js.map

package/dist/roadtrip/p-60e25858.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["navbarCss","Navbar","selectedTabChanged","this","selectedTab","undefined","roadnavbarchanged","emit","tab","roadNavbarChanged","onNavbarChanged","ev","detail","componentWillLoad","render","h","Host","role"],"sources":["src/components/navbar/navbar.css?tag=road-navbar&encapsulation=shadow","src/components/navbar/navbar.tsx"],"sourcesContent":["/*\n * Navbar\n *\n */\n\n/**\n * @prop --z-index: The z-index of the Navbar.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--z-index);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 5.125rem;\n  padding-left: 0;\n  margin: 0;\n  text-align: center;\n  user-select: none;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-outline);\n}\n\n@media (max-width: 576px) {\n\n  :host {\n    overflow-x: auto;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    bottom: auto;\n    flex-direction: column;\n    width: 104px;\n    height: 100%;\n    border-top: 0;\n    border-right: 1px solid var(--road-outline);\n  }\n}\n\n/**\n * Button save drawer.\n */\n\n::slotted(.drawer-button-save) {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile\n */\n\n@Component({\n  tag: 'road-navbar',\n  styleUrl: 'navbar.css',\n  shadow: true,\n})\nexport class Navbar {\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"tablist\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,wkB,MCYLC,EAAM,M,8JAOjB,kBAAAC,GACE,GAAIC,KAAKC,cAAgBC,UAAW,CAClCF,KAAKG,kBAAkBC,KAAK,CAC1BC,IAAKL,KAAKC,cAEZD,KAAKM,kBAAkBF,KAAK,CAC1BC,IAAKL,KAAKC,a,EAYhB,eAAAM,CAAgBC,GACdR,KAAKC,YAAcO,EAAGC,OAAOJ,G,CAG/B,iBAAAK,GACEV,KAAKD,oB,CAGP,MAAAY,GACE,OACEC,EAACC,EAAI,CACHC,KAAK,WAELF,EAAA,a"}

package/dist/roadtrip/{p-93030cec.entry.js → p-6177bb46.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,e as o,h as e,H as r}from"./p-abdbf6ac.js";import{a as s}from"./p-37ab7c7f.js";const i=":host{display:none}:host(.banner-open){position:relative;display:block;padding:1rem 2rem;font-size:var(--road-body-medium);text-align:center;background-color:var(--road-leading-banner)}.banner-close{position:absolute;top:0;right:0;padding:0.25rem;color:currentColor;cursor:pointer;background:none;border:0}.banner-close road-icon{color:currentColor}.banner-open-label{font-weight:700}.banner-open-link{display:block;margin:0.25rem 0.75rem;font-size:var(--road-font-size-14);color:currentColor}@media (min-width: 992px){.banner-close{right:0.25rem;bottom:0}.banner-open-link{display:initial}}";const a=class{constructor(e){n(this,e);this.onClose=o(this,"close",7);this.onClick=n=>{n.stopPropagation();n.preventDefault();this.close()};this.isOpen=true;this.label="";this.link=undefined;this.url=undefined}async close(){this.isOpen=false;this.onClose.emit()}render(){const n=this.isOpen?"banner-open":"";return e(r,{class:n},e("div",null,e("span",{class:"banner-open-label"},this.label),this.link&&e("a",{href:this.url,class:"banner-open-link"},this.link),e("button",{type:"button",class:"banner-close",onClick:this.onClick},e("road-icon",{icon:s,size:"md"}))))}};a.style=i;export{a as road_banner};
-//# sourceMappingURL=p-93030cec.entry.js.map
+import{r as n,c as o,h as e,H as r}from"./p-f3d586b3.js";import{a as s}from"./p-73fe2357.js";const i=":host{display:none}:host(.banner-open){position:relative;display:block;padding:1rem 2rem;font-size:var(--road-body-medium);text-align:center;background-color:var(--road-leading-banner)}.banner-close{position:absolute;top:0;right:0;padding:0.25rem;color:currentColor;cursor:pointer;background:none;border:0}.banner-close road-icon{color:currentColor}.banner-open-label{font-weight:700}.banner-open-link{display:block;margin:0.25rem 0.75rem;font-size:var(--road-font-size-14);color:currentColor}@media (min-width: 992px){.banner-close{right:0.25rem;bottom:0}.banner-open-link{display:initial}}";const t=class{constructor(e){n(this,e);this.onClose=o(this,"close",7);this.onClick=n=>{n.stopPropagation();n.preventDefault();this.close()};this.isOpen=true;this.label="";this.link=undefined;this.url=undefined}async close(){this.isOpen=false;this.onClose.emit()}render(){const n=this.isOpen?"banner-open":"";return e(r,{class:n},e("div",null,e("span",{class:"banner-open-label"},this.label),this.link&&e("a",{href:this.url,class:"banner-open-link"},this.link),e("button",{type:"button",class:"banner-close",onClick:this.onClick},e("road-icon",{icon:s,size:"md"}))))}};t.style=i;export{t as road_banner};
+//# sourceMappingURL=p-6177bb46.entry.js.map

package/dist/roadtrip/p-6177bb46.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["bannerCss","Banner","this","onClick","ev","stopPropagation","preventDefault","close","isOpen","onClose","emit","render","bannerIsOpenClass","h","Host","class","label","link","href","url","type","icon","navigationClose","size"],"sources":["src/components/banner/banner.css?tag=road-banner&encapsulation=shadow","src/components/banner/banner.tsx"],"sourcesContent":["/* BANNER\n -------------------- */\n\n:host{\n  display: none;\n}\n\n:host(.banner-open) {\n  position: relative;\n  display: block;\n  padding: 1rem 2rem;\n  font-size: var(--road-body-medium);\n  text-align: center;\n  background-color: var(--road-leading-banner);\n}\n\n.banner-close{\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 0.25rem;\n  color: currentColor;\n  cursor: pointer;\n  background: none;\n  border: 0;\n}\n\n.banner-close road-icon{\n  color: currentColor;\n}\n\n.banner-open-label{\n  font-weight: 700;\n}\n\n.banner-open-link{\n  display: block;\n  margin: 0.25rem 0.75rem;\n  font-size: var(--road-font-size-14);\n  color: currentColor;\n}\n\n@media (min-width: 992px) {\n\n  .banner-close{\n    right: 0.25rem;\n    bottom: 0;\n  }\n\n  .banner-open-link{\n    display: initial;\n  }\n}\n","import { Component, Host, h, Prop, Method, Event, EventEmitter} from '@stencil/core';\nimport { navigationClose } from '../../../icons';\n\n@Component({\n  tag: 'road-banner',\n  styleUrl: 'banner.css',\n  shadow: true,\n})\nexport class Banner {\n\n  /**\n   * Set `open` property to `true` to open the banner\n   */\n  @Prop({ mutable: true }) isOpen: boolean = true;\n\n  /**\n   * Text display in the banner\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Text Link display in the banner\n   */\n  @Prop() link?: string;\n\n  /**\n   * Text Link display in the banner\n   */\n  @Prop() url?: string;\n\n  /**\n   * Close the dialog when clicking on the cross or layer\n   */\n  private onClick = (ev: UIEvent) => {\n    ev.stopPropagation();\n    ev.preventDefault();\n\n    this.close();\n  };\n\n  /**\n   * Close the banner\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n    this.onClose.emit();\n  }\n\n  /**\n   * Indicate when closing the banner\n   */\n  @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n  render() {\n    const bannerIsOpenClass = this.isOpen ? 'banner-open' : '';\n\n    return (\n      <Host class={bannerIsOpenClass}>\n        <div>\n          <span class=\"banner-open-label\">{this.label}</span>\n          {this.link && <a href={this.url} class=\"banner-open-link\">{this.link}</a>}\n          <button type=\"button\" class=\"banner-close\" onClick={this.onClick}>\n            <road-icon icon={navigationClose} size=\"md\"></road-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,klB,MCQLC,EAAM,M,wDAyBTC,KAAAC,QAAWC,IACjBA,EAAGC,kBACHD,EAAGE,iBAEHJ,KAAKK,OAAO,E,YAxB6B,K,WAKnB,G,uCA0BxB,WAAMA,GACJL,KAAKM,OAAS,MACdN,KAAKO,QAAQC,M,CAQf,MAAAC,GACE,MAAMC,EAAoBV,KAAKM,OAAS,cAAgB,GAExD,OACEK,EAACC,EAAI,CAACC,MAAOH,GACXC,EAAA,WACEA,EAAA,QAAME,MAAM,qBAAqBb,KAAKc,OACrCd,KAAKe,MAAQJ,EAAA,KAAGK,KAAMhB,KAAKiB,IAAKJ,MAAM,oBAAoBb,KAAKe,MAChEJ,EAAA,UAAQO,KAAK,SAASL,MAAM,eAAeZ,QAASD,KAAKC,SACvDU,EAAA,aAAWQ,KAAMC,EAAiBC,KAAK,S"}

package/dist/roadtrip/{p-4fd8c4db.entry.js → p-64aa6fd0.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,e as o,h as r,H as t}from"./p-abdbf6ac.js";import"./p-e8c090a5.js";const g='.sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:"";background:var(--road-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:"";background:var(--road-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-info-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-warning-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-on-warning-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-danger-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}';const a=class{constructor(r){e(this,r);this.roadchange=o(this,"roadchange",7);this.roadChange=o(this,"roadChange",7);this.roadfocus=o(this,"roadfocus",7);this.roadFocus=o(this,"roadFocus",7);this.roadblur=o(this,"roadblur",7);this.roadBlur=o(this,"roadBlur",7);this.onClick=()=>{this.checked=!this.checked};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadBlur.emit();this.roadblur.emit()};this.toggleId=`road-toggle-${s++}`;this.name=this.toggleId;this.checked=false;this.disabled=false;this.label=`${this.toggleId}-label`;this.color="success";this.hasLeftLabel=false;this.isSpaced=false;this.value="on";this.on="yes";this.off="no"}checkedChanged(e){this.roadchange.emit({checked:e,value:this.value});this.roadChange.emit({checked:e,value:this.value})}render(){const e=this.toggleId+"-label";const o=r("label",{class:"form-toggle-label",id:e,htmlFor:this.toggleId},this.label);const g=this.color!==undefined?"form-toggle-"+this.color:"";const a=this.isSpaced&&"form-toggle-spaced";const s=this.hasLeftLabel?"form-toggle-right":"";return r(t,null,r("input",{class:"form-toggle-input",type:"checkbox",id:this.toggleId,name:this.name,checked:this.checked,disabled:this.disabled,value:this.value,"aria-checked":`${this.checked}`,"aria-disabled":this.disabled?"true":null,"aria-labelledby":e,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur}),r("label",{class:`form-toggle-label ${a} ${g}`,htmlFor:this.toggleId},this.hasLeftLabel&&o,r("div",{class:`form-toggle-lever ${s}`,"data-off":this.off,"data-on":this.on}),this.hasLeftLabel?"":o))}static get watchers(){return{checked:["checkedChanged"]}}};let s=0;a.style=g;export{a as road_toggle};
-//# sourceMappingURL=p-4fd8c4db.entry.js.map
+import{r as e,c as o,h as r,H as t}from"./p-f3d586b3.js";import"./p-1ccae339.js";const g='.sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:"";background:var(--road-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:"";background:var(--road-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-info-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-warning-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-on-warning-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-danger-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}';const a=class{constructor(r){e(this,r);this.roadchange=o(this,"roadchange",7);this.roadChange=o(this,"roadChange",7);this.roadfocus=o(this,"roadfocus",7);this.roadFocus=o(this,"roadFocus",7);this.roadblur=o(this,"roadblur",7);this.roadBlur=o(this,"roadBlur",7);this.onClick=()=>{this.checked=!this.checked};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadBlur.emit();this.roadblur.emit()};this.toggleId=`road-toggle-${s++}`;this.name=this.toggleId;this.checked=false;this.disabled=false;this.label=`${this.toggleId}-label`;this.color="success";this.hasLeftLabel=false;this.isSpaced=false;this.value="on";this.on="yes";this.off="no"}checkedChanged(e){this.roadchange.emit({checked:e,value:this.value});this.roadChange.emit({checked:e,value:this.value})}render(){const e=this.toggleId+"-label";const o=r("label",{class:"form-toggle-label",id:e,htmlFor:this.toggleId},this.label);const g=this.color!==undefined?"form-toggle-"+this.color:"";const a=this.isSpaced&&"form-toggle-spaced";const s=this.hasLeftLabel?"form-toggle-right":"";return r(t,null,r("input",{class:"form-toggle-input",type:"checkbox",id:this.toggleId,name:this.name,checked:this.checked,disabled:this.disabled,value:this.value,"aria-checked":`${this.checked}`,"aria-disabled":this.disabled?"true":null,"aria-labelledby":e,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur}),r("label",{class:`form-toggle-label ${a} ${g}`,htmlFor:this.toggleId},this.hasLeftLabel&&o,r("div",{class:`form-toggle-lever ${s}`,"data-off":this.off,"data-on":this.on}),this.hasLeftLabel?"":o))}static get watchers(){return{checked:["checkedChanged"]}}};let s=0;a.style=g;export{a as road_toggle};
+//# sourceMappingURL=p-64aa6fd0.entry.js.map

package/dist/roadtrip/p-64aa6fd0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toggleCss","toggle","this","onClick","checked","onFocus","roadfocus","emit","roadFocus","onBlur","roadBlur","roadblur","toggleIds","toggleId","checkedChanged","isChecked","roadchange","value","roadChange","render","labelId","textLabel","h","class","id","htmlFor","label","colorClass","color","undefined","isSpacedClass","isSpaced","righttoggleClass","hasLeftLabel","Host","type","name","disabled","off","on"],"sources":["src/components/toggle/toggle.css?tag=road-toggle&encapsulation=scoped","src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * Toggle\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Toggle\n * - Label\n * - Lever\n * - Feedback\n * - Position\n */\n\n/**\n * @prop --toggle-lever-width: width of the lever\n */\n\n/* toggle\n -------------------- */\n\n:host {\n  --toggle-lever-width: 4.5rem;\n\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-label-medium);\n  color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-toggle-input {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-toggle-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* LEVER\n -------------------- */\n\n.form-toggle-lever {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  width: var(--toggle-lever-width);\n  height: 2rem;\n  padding: 0.5rem 0.625rem;\n  margin-right: 0.75rem;\n  font-size: 0.625rem;\n  font-weight: 700;\n  line-height: 1.6;\n  content: \"\";\n  background: var(--road-on-surface-extra-weak);\n  border: 0.125rem solid transparent;\n  border-radius: 1.125rem;\n  transition: background 0.2s ease-in-out;\n}\n\n/**\n * Text in the toggle widget\n */\n\n.form-toggle-lever::before {\n  font-size: 0.625rem;\n  font-weight: 700;\n  color: var(--road-surface);\n  text-transform: uppercase;\n  content: attr(data-off);\n}\n\n/**\n * Round lever in the widget\n */\n\n.form-toggle-lever::after {\n  position: absolute;\n  top: 0.0625rem;\n  left: 0.0625rem;\n  display: block;\n  width: 1.625rem;\n  height: 1.625rem;\n  content: \"\";\n  background: var(--road-on-success-surface-inverse);\n  border-radius: 50%;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n}\n\n/**\n * Checked state\n */\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever {\n  justify-content: flex-start;\n  background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::before {\n  color: var(--road-surface);\n  content: attr(data-on);\n}\n\n.form-toggle-input:checked ~ .form-toggle-label .form-toggle-lever::after {\n  transform: translateX(calc(var(--toggle-lever-width) - 2rem));\n}\n\n/**\n * Focus on Tab\n */\n\n.form-toggle-input.focus-visible ~ .form-toggle-label .form-toggle-lever {\n  box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary);\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Secondary\n */\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever {\n  background: var(--road-secondary);\n}\n\n.form-toggle-input:checked ~ .form-toggle-secondary .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Info\n */\n\n.form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever {\n  background: var(--road-info-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-info .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Success\n */\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever {\n  background: var(--road-success-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-success .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/**\n * Warning\n */\n\n.form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever {\n  background: var(--road-warning-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-warning .form-toggle-lever::before {\n  color: var(--road-on-warning-surface-inverse);\n}\n\n/**\n * Danger\n */\n\n.form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever {\n  background: var(--road-danger-surface-inverse);\n}\n\n.form-toggle-input:checked ~ .form-toggle-danger .form-toggle-lever::before {\n  color: var(--road-surface);\n}\n\n/* POSITION\n -------------------- */\n\n.form-toggle-right {\n  margin-right: 0;\n  margin-left: 0.75rem;\n}\n\n.form-toggle-spaced {\n  display: flex;\n  justify-content: space-between;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport '../../utils/polyfill';\n\nimport { FeedbackColors } from '../../interface';\n\n@Component({\n  tag: 'road-toggle',\n  styleUrl: 'toggle.css',\n  scoped: true,\n})\nexport class toggle {\n\n  /**\n   * The id of toggle\n   */\n  @Prop() toggleId: string = `road-toggle-${toggleIds++}`;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.toggleId;\n\n  /**\n   * If `true`, the toggle is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * If `true`, the user cannot interact with the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.toggleId}-label`;\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color?: 'success' | FeedbackColors = 'success';\n\n  /**\n   * If `true`, the label is at left of the toggle\n   */\n  @Prop() hasLeftLabel: boolean = false;\n\n  /**\n   * Add space between label and toggle element\n   */\n  @Prop() isSpaced: boolean = false;\n\n  /**\n   * Value the form will get\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Text display for \"`on`\" state in the toggle lever\n   */\n  @Prop() on: string = \"yes\";\n\n  /**\n   * Text display for \"`off`\" state in the toggle lever\n   */\n  @Prop() off: string = \"no\";\n\n  /**\n   * Emitted when the checked property has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    checked: boolean;\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.roadchange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n    this.roadChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onClick = () => {\n    this.checked = !this.checked;\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.roadBlur.emit();\n    this.roadblur.emit();\n  };\n\n  render() {\n    const labelId = this.toggleId + '-label';\n    const textLabel = <label class=\"form-toggle-label\" id={labelId} htmlFor={this.toggleId}>{this.label}</label>;\n    const colorClass = this.color !== undefined ? 'form-toggle-' + this.color : '';\n    const isSpacedClass = this.isSpaced && 'form-toggle-spaced';\n    const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';\n\n    return (\n      <Host>\n        <input\n          class=\"form-toggle-input\"\n          type=\"checkbox\"\n          id={this.toggleId}\n          name={this.name}\n          checked={this.checked}\n          disabled={this.disabled}\n          value={this.value}\n          aria-checked={`${this.checked}`}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        />\n        <label class={`form-toggle-label ${isSpacedClass} ${colorClass}`} htmlFor={this.toggleId}>\n          {this.hasLeftLabel && textLabel}\n          <div class={`form-toggle-lever ${righttoggleClass}`} data-off={this.off} data-on={this.on}></div>\n          {this.hasLeftLabel ? '' : textLabel}\n        </label>\n      </Host>\n    );\n  }\n}\n\nlet toggleIds = 0;\n"],"mappings":"iFAAA,MAAMA,EAAY,umH,MCULC,EAAM,M,uPAgGTC,KAAAC,QAAU,KAChBD,KAAKE,SAAWF,KAAKE,OAAO,EAGtBF,KAAAG,QAAU,KAChBH,KAAKI,UAAUC,OACfL,KAAKM,UAAUD,MAAM,EAGfL,KAAAO,OAAS,KACfP,KAAKQ,SAASH,OACdL,KAAKS,SAASJ,MAAM,E,cAtGK,eAAeK,M,UAKnBV,KAAKW,S,aAKO,M,cAKhB,M,WAKK,GAAGX,KAAKW,iB,WAKa,U,kBAKb,M,cAKJ,M,WAKJ,K,QAKH,M,SAKC,I,CA8BtB,cAAAC,CAAeC,GACbb,KAAKc,WAAWT,KAAK,CACnBH,QAASW,EACTE,MAAOf,KAAKe,QAEdf,KAAKgB,WAAWX,KAAK,CACnBH,QAASW,EACTE,MAAOf,KAAKe,O,CAkBhB,MAAAE,GACE,MAAMC,EAAUlB,KAAKW,SAAW,SAChC,MAAMQ,EAAYC,EAAA,SAAOC,MAAM,oBAAoBC,GAAIJ,EAASK,QAASvB,KAAKW,UAAWX,KAAKwB,OAC9F,MAAMC,EAAazB,KAAK0B,QAAUC,UAAY,eAAiB3B,KAAK0B,MAAQ,GAC5E,MAAME,EAAgB5B,KAAK6B,UAAY,qBACvC,MAAMC,EAAmB9B,KAAK+B,aAAe,oBAAsB,GAEnE,OACEX,EAACY,EAAI,KACHZ,EAAA,SACEC,MAAM,oBACNY,KAAK,WACLX,GAAItB,KAAKW,SACTuB,KAAMlC,KAAKkC,KACXhC,QAASF,KAAKE,QACdiC,SAAUnC,KAAKmC,SACfpB,MAAOf,KAAKe,MAAK,eACH,GAAGf,KAAKE,UAAS,gBAChBF,KAAKmC,SAAW,OAAS,KAAI,kBAC3BjB,EACjBjB,QAASD,KAAKC,QACdE,QAASH,KAAKG,QACdI,OAAQP,KAAKO,SAEfa,EAAA,SAAOC,MAAO,qBAAqBO,KAAiBH,IAAcF,QAASvB,KAAKW,UAC7EX,KAAK+B,cAAgBZ,EACtBC,EAAA,OAAKC,MAAO,qBAAqBS,IAAkB,WAAY9B,KAAKoC,IAAG,UAAWpC,KAAKqC,KACtFrC,KAAK+B,aAAe,GAAKZ,G,4DAOpC,IAAIT,EAAY,E"}

package/dist/roadtrip/{p-ff473633.entry.js → p-68599145.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as e,H as o}from"./p-abdbf6ac.js";const i="road-progress-indicator-vertical-item{display:flex;flex-direction:row;justify-content:flex-start;min-height:65px}.progress-indicator-vertical-item-content{display:inline-block;margin-left:1rem}road-progress-indicator-vertical-item:not(.completed) .progress-indicator-vertical-link{cursor:not-allowed}.progress-indicator-vertical-link{position:relative;z-index:1;display:flex}.progress-indicator-vertical-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}.progress-indicator-vertical-icon road-icon{display:flex}.progress-indicator-vertical-substep-link{position:relative;z-index:1;display:flex;margin:0 0.5rem}.progress-indicator-vertical-line{position:absolute;top:24px;left:11px;z-index:-1;height:calc(100% - 24px);border-left:2px solid var(--road-surface-disabled)}road-progress-indicator-vertical-item:last-child .progress-indicator-vertical-line{border-left:0}.progress-indicator-vertical-substep-icon{display:inline-flex;align-items:center;justify-content:center;width:0.5rem;height:0.5rem;margin-top:0.7rem;background:var(--road-surface-disabled);border-radius:50%}.progress-indicator-vertical-substep-beforeline{position:absolute;top:0;left:3px;z-index:-1;height:calc(30% - 8px);border-left:2px solid var(--road-surface-disabled)}.progress-indicator-vertical-substep-line{position:absolute;top:19px;left:3px;z-index:-1;height:calc(83% - 8px);border-left:2px solid var(--road-surface-disabled)}.progress-indicator-vertical-title road-label{display:block;font-size:var(--road-body-large);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-vertical-description{display:block;margin:0;font-size:var(--road-label-small);font-weight:400;color:var(--road-on-surface-disabled)}.current .progress-indicator-vertical-icon{color:var(--road-on-primary);background:var(--road-primary)}.current .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.current .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.current .progress-indicator-vertical-substep-icon{background:var(--road-primary);border:0}.current .progress-indicator-vertical-substep-beforeline{border-left:2px solid var(--road-primary)}.in-progress .progress-indicator-vertical-icon{color:var(--road-on-primary);background:var(--road-primary);border:0}.in-progress .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.in-progress .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.in-progress .progress-indicator-vertical-line{background:var(--road-primary)}.completed:not(:last-child)::after{background:var(--road-primary)}.completed .progress-indicator-vertical-icon{color:var(--road-primary);background:none;border:2px solid var(--road-primary)}.completed .progress-indicator-vertical-line{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-substep-beforeline{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-substep-line{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.completed .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.completed .progress-indicator-vertical-substep-icon{background:none;border:2px solid var(--road-primary)}";const a=class{constructor(e){r(this,e)}render(){return e(o,null,e("slot",null))}};a.style=i;export{a as road_progress_indicator_vertical_item};
-//# sourceMappingURL=p-ff473633.entry.js.map
+import{r,h as e,H as o}from"./p-f3d586b3.js";const i="road-progress-indicator-vertical-item{display:flex;flex-direction:row;justify-content:flex-start;min-height:65px}.progress-indicator-vertical-item-content{display:inline-block;margin-left:1rem}road-progress-indicator-vertical-item:not(.completed) .progress-indicator-vertical-link{cursor:not-allowed}.progress-indicator-vertical-link{position:relative;z-index:1;display:flex}.progress-indicator-vertical-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}.progress-indicator-vertical-icon road-icon{display:flex}.progress-indicator-vertical-substep-link{position:relative;z-index:1;display:flex;margin:0 0.5rem}.progress-indicator-vertical-line{position:absolute;top:24px;left:11px;z-index:-1;height:calc(100% - 24px);border-left:2px solid var(--road-surface-disabled)}road-progress-indicator-vertical-item:last-child .progress-indicator-vertical-line{border-left:0}.progress-indicator-vertical-substep-icon{display:inline-flex;align-items:center;justify-content:center;width:0.5rem;height:0.5rem;margin-top:0.7rem;background:var(--road-surface-disabled);border-radius:50%}.progress-indicator-vertical-substep-beforeline{position:absolute;top:0;left:3px;z-index:-1;height:calc(30% - 8px);border-left:2px solid var(--road-surface-disabled)}.progress-indicator-vertical-substep-line{position:absolute;top:19px;left:3px;z-index:-1;height:calc(83% - 8px);border-left:2px solid var(--road-surface-disabled)}.progress-indicator-vertical-title road-label{display:block;font-size:var(--road-body-large);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-vertical-description{display:block;margin:0;font-size:var(--road-label-small);font-weight:400;color:var(--road-on-surface-disabled)}.current .progress-indicator-vertical-icon{color:var(--road-on-primary);background:var(--road-primary)}.current .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.current .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.current .progress-indicator-vertical-substep-icon{background:var(--road-primary);border:0}.current .progress-indicator-vertical-substep-beforeline{border-left:2px solid var(--road-primary)}.in-progress .progress-indicator-vertical-icon{color:var(--road-on-primary);background:var(--road-primary);border:0}.in-progress .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.in-progress .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.in-progress .progress-indicator-vertical-line{background:var(--road-primary)}.completed:not(:last-child)::after{background:var(--road-primary)}.completed .progress-indicator-vertical-icon{color:var(--road-primary);background:none;border:2px solid var(--road-primary)}.completed .progress-indicator-vertical-line{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-substep-beforeline{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-substep-line{border-left:2px solid var(--road-primary)}.completed .progress-indicator-vertical-title road-label{font-weight:700;color:var(--road-on-surface)}.completed .progress-indicator-vertical-description{color:var(--road-on-surface-weak)}.completed .progress-indicator-vertical-substep-icon{background:none;border:2px solid var(--road-primary)}";const a=class{constructor(e){r(this,e)}render(){return e(o,null,e("slot",null))}};a.style=i;export{a as road_progress_indicator_vertical_item};
+//# sourceMappingURL=p-68599145.entry.js.map

package/dist/roadtrip/p-68599145.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["progressIndicatorVerticalItemCss","ProgressIndicatorVerticalItem","render","h","Host"],"sources":["src/components/progress-indicator-vertical-item/progress-indicator-vertical-item.css?tag=road-progress-indicator-vertical-item","src/components/progress-indicator-vertical-item/progress-indicator-vertical-item.tsx"],"sourcesContent":["/*\n * Progress Indicator Vertical Item\n *\n */\n\n/* PROGRESS INDICATOR VERTICAL ITEM\n   -------------------- */\n\nroad-progress-indicator-vertical-item {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  min-height: 65px;\n}\n\n.progress-indicator-vertical-item-content {\n  display: inline-block;\n  margin-left: 1rem;\n}\n\n/**\n* Disabled click for current and next steps\n*/\n\nroad-progress-indicator-vertical-item:not(.completed) .progress-indicator-vertical-link {\n  cursor: not-allowed;\n}\n\n/* VERTICAL STEPPER LINK\n    -------------------- */\n\n.progress-indicator-vertical-link {\n  position: relative;\n  z-index: 1;\n  display: flex;\n}\n\n/* VERTICAL STEPPER ICON\n    -------------------- */\n\n.progress-indicator-vertical-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: var(--road-font-size-12);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n  fill: currentColor;\n}\n\n.progress-indicator-vertical-icon road-icon{\n  display: flex;\n}\n\n.progress-indicator-vertical-substep-link {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  margin: 0 0.5rem;\n}\n\n.progress-indicator-vertical-line {\n  position: absolute;\n  top: 24px;\n  left: 11px;\n  z-index: -1;\n  height: calc(100% - 24px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\nroad-progress-indicator-vertical-item:last-child .progress-indicator-vertical-line {\n  border-left: 0;\n}\n\n.progress-indicator-vertical-substep-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.5rem;\n  height: 0.5rem;\n  margin-top: 0.7rem;\n  background: var(--road-surface-disabled);\n  border-radius: 50%;\n}\n\n.progress-indicator-vertical-substep-beforeline {\n  position: absolute;\n  top: 0;\n  left: 3px;\n  z-index: -1;\n  height: calc(30% - 8px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\n.progress-indicator-vertical-substep-line {\n  position: absolute;\n  top: 19px;\n  left: 3px;\n  z-index: -1;\n  height: calc(83% - 8px);\n  border-left: 2px solid var(--road-surface-disabled);\n}\n\n/* VERTICAL STEPPER TITLE\n    -------------------- */\n\n.progress-indicator-vertical-title road-label{\n  display: block;\n  font-size: var(--road-body-large);\n  font-weight: 700;\n  color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-vertical-description{\n  display: block;\n  margin: 0;\n  font-size: var(--road-label-small);\n  font-weight: 400;\n  color: var(--road-on-surface-disabled);\n}\n\n/* STEP CURRENT\n    -------------------- */\n\n.current .progress-indicator-vertical-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n}\n\n.current .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.current .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.current .progress-indicator-vertical-substep-icon {\n  background: var(--road-primary);\n  border: 0;\n}\n\n.current .progress-indicator-vertical-substep-beforeline {\n  border-left: 2px solid var(--road-primary);\n}\n\n\n/* STEP IN PROGRESS\n   -------------------- */\n\n.in-progress .progress-indicator-vertical-icon {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n  border: 0;\n}\n\n.in-progress .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.in-progress .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.in-progress .progress-indicator-vertical-line {\n  background: var(--road-primary);\n}\n\n/* STEP COMPLETED\n    -------------------- */\n\n.completed:not(:last-child)::after {\n  background: var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-icon {\n  color: var(--road-primary);\n  background: none;\n  border: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-line {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-substep-beforeline {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-substep-line {\n  border-left: 2px solid var(--road-primary);\n}\n\n.completed .progress-indicator-vertical-title road-label{\n  font-weight: 700;\n  color: var(--road-on-surface);\n}\n\n.completed .progress-indicator-vertical-description{\n  color: var(--road-on-surface-weak);\n}\n\n.completed .progress-indicator-vertical-substep-icon {\n  background: none;\n  border: 2px solid var(--road-primary);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot - Content of the progress indicator vertical item\n */\n\n@Component({\n  tag: 'road-progress-indicator-vertical-item',\n  styleUrl: 'progress-indicator-vertical-item.css',\n})\nexport class ProgressIndicatorVerticalItem {\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAmC,s9G,MCU5BC,EAA6B,M,yBAExC,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}

package/dist/roadtrip/p-6a27b5fc.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as a,a as e}from"./p-f3d586b3.js";const i=":host{display:block}:host(.tab-hidden){display:none}";const n=class{constructor(s){t(this,s);this.active=false;this.tab=undefined}async componentWillLoad(){if(this.active){await this.setActive()}}async setActive(){this.active=true}render(){const{tab:t,active:e}=this;return s(a,{role:"tabpanel","aria-hidden":!e?"true":null,"aria-labelledby":`tab-button-${t}`,class:{"tab-hidden":!e}},s("slot",null))}get el(){return e(this)}};n.style=i;export{n as road_tab};
+//# sourceMappingURL=p-6a27b5fc.entry.js.map

package/dist/roadtrip/p-6a27b5fc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabCss","Tab","componentWillLoad","this","active","setActive","render","tab","h","Host","role","class"],"sources":["src/components/tab/tab.css?tag=road-tab&encapsulation=shadow","src/components/tab/tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host(.tab-hidden) {\n  display: none;\n}\n","import { Component, Element, Host, Method, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - content of the tab sync with selected tab.\n */\n\n@Component({\n  tag: 'road-tab',\n  styleUrl: 'tab.css',\n  shadow: true,\n})\nexport class Tab {\n\n  @Element() el!: HTMLRoadTabElement;\n\n  /** @internal */\n  @Prop({ mutable: true }) active = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab or by the router to switch between them.\n   */\n  @Prop() tab!: string;\n\n\n  async componentWillLoad() {\n    if (this.active) {\n      await this.setActive();\n    }\n  }\n\n  /** Set the active component for the tab */\n  @Method()\n  async setActive() {\n    this.active = true;\n  }\n\n  render() {\n    const { tab, active } = this;\n    return (\n      <Host\n        role=\"tabpanel\"\n        aria-hidden={!active ? 'true' : null}\n        aria-labelledby={`tab-button-${tab}`}\n        class={{\n          'tab-hidden': !active,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAS,uD,MCWFC,EAAG,M,qCAKoB,M,mBASlC,uBAAMC,GACJ,GAAIC,KAAKC,OAAQ,OACTD,KAAKE,W,EAMf,eAAMA,GACJF,KAAKC,OAAS,I,CAGhB,MAAAE,GACE,MAAMC,IAAEA,EAAGH,OAAEA,GAAWD,KACxB,OACEK,EAACC,EAAI,CACHC,KAAK,WAAU,eACDN,EAAS,OAAS,KAAI,kBACnB,cAAcG,IAC/BI,MAAO,CACL,cAAeP,IAGjBI,EAAA,a"}

package/dist/roadtrip/{p-1974c993.entry.js → p-6f170c25.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as a,H as o}from"./p-abdbf6ac.js";const e=":host{position:relative;display:flex;align-items:flex-start;padding:0.5rem 1rem 0.5rem 0.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.25;color:var(--road-on-surface);border:1px solid transparent;border-radius:0.25rem}.alert-icon{flex-shrink:0;width:2rem;height:2rem;margin-right:0.5rem}.alert-title{padding:0.375rem 0 0;font-weight:700}.alert-link{display:block;margin:0;color:var(--road-on-surface);text-decoration:underline}.alert-description{padding:0.375rem 0;margin:0}:host(.alert-info){color:var(--road-on-info-surface);background:var(--road-info-surface);border-color:var(--road-info-outline)}:host(.alert-info) ::slotted(road-icon){fill:var(--road-info-default)}:host(.alert-info) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse);fill:var(--road-on-info-surface-inverse)}:host(.alert-success){color:var(--road-on-success-surface);background:var(--road-success-surface);border-color:var(--road-success-outline)}:host(.alert-success) ::slotted(road-icon){fill:var(--road-success-icon)}:host(.alert-success) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse);fill:var(--road-on-success-surface-inverse)}:host(.alert-warning){color:var(--road-on-warning-surface);background:var(--road-warning-surface);border-color:var(--road-warning-outline)}:host(.alert-warning) ::slotted(road-icon){fill:var(--road-warning-icon)}:host(.alert-warning) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse);fill:var(--road-on-warning-surface-inverse)}:host(.alert-danger){color:var(--road-on-danger-surface);background:var(--road-danger-surface);border-color:var(--road-danger-outline)}:host(.alert-danger) ::slotted(road-icon){fill:var(--road-danger-icon)}:host(.alert-danger) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-danger-surface-inverse);background:var(--road-danger-surface-inverse);fill:var(--road-on-danger-surface-inverse)}";const n=class{constructor(a){r(this,a);this.color="info";this.label=undefined;this.button=undefined;this.link=undefined;this.url=undefined}render(){const r=this.color!==undefined?`alert-${this.color}`:"";return a(o,{class:r,role:"alert"},a("div",{class:"alert-icon"},a("slot",{name:"icon"})),a("div",null,this.label&&a("span",{class:"alert-title d-block"},this.label),a("p",{class:"alert-description"},a("slot",null),this.link&&a("a",{href:this.url,class:"alert-link link link-default"},this.link))))}};n.style=e;export{n as road_alert};
-//# sourceMappingURL=p-1974c993.entry.js.map
+import{r,h as a,H as o}from"./p-f3d586b3.js";const e=":host{position:relative;display:flex;align-items:flex-start;padding:0.5rem 1rem 0.5rem 0.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.25;color:var(--road-on-surface);border:1px solid transparent;border-radius:0.25rem}.alert-icon{flex-shrink:0;width:2rem;height:2rem;margin-right:0.5rem}.alert-title{padding:0.375rem 0 0;font-weight:700}.alert-link{display:block;margin:0;color:var(--road-on-surface);text-decoration:underline}.alert-description{padding:0.375rem 0;margin:0}:host(.alert-info){color:var(--road-on-info-surface);background:var(--road-info-surface);border-color:var(--road-info-outline)}:host(.alert-info) ::slotted(road-icon){fill:var(--road-info-default)}:host(.alert-info) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse);fill:var(--road-on-info-surface-inverse)}:host(.alert-success){color:var(--road-on-success-surface);background:var(--road-success-surface);border-color:var(--road-success-outline)}:host(.alert-success) ::slotted(road-icon){fill:var(--road-success-icon)}:host(.alert-success) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse);fill:var(--road-on-success-surface-inverse)}:host(.alert-warning){color:var(--road-on-warning-surface);background:var(--road-warning-surface);border-color:var(--road-warning-outline)}:host(.alert-warning) ::slotted(road-icon){fill:var(--road-warning-icon)}:host(.alert-warning) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse);fill:var(--road-on-warning-surface-inverse)}:host(.alert-danger){color:var(--road-on-danger-surface);background:var(--road-danger-surface);border-color:var(--road-danger-outline)}:host(.alert-danger) ::slotted(road-icon){fill:var(--road-danger-icon)}:host(.alert-danger) ::slotted(road-button){display:block;margin:0.375rem 0 0;color:var(--road-on-danger-surface-inverse);background:var(--road-danger-surface-inverse);fill:var(--road-on-danger-surface-inverse)}";const n=class{constructor(a){r(this,a);this.color="info";this.label=undefined;this.button=undefined;this.link=undefined;this.url=undefined}render(){const r=this.color!==undefined?`alert-${this.color}`:"";return a(o,{class:r,role:"alert"},a("div",{class:"alert-icon"},a("slot",{name:"icon"})),a("div",null,this.label&&a("span",{class:"alert-title d-block"},this.label),a("p",{class:"alert-description"},a("slot",null),this.link&&a("a",{href:this.url,class:"alert-link link link-default"},this.link))))}};n.style=e;export{n as road_alert};
+//# sourceMappingURL=p-6f170c25.entry.js.map

package/dist/roadtrip/p-6f170c25.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","Alert","render","colorClass","this","color","undefined","h","Host","class","role","name","label","link","href","url"],"sources":["src/components/alert/alert.css?tag=road-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["/*\n * Alert\n *\n * Index\n * - Alert\n * - Icon\n * - Description\n * - Feedback\n */\n\n\n/* ALERT\n -------------------- */\n\n:host {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding: 0.5rem 1rem 0.5rem 0.5rem;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-body-medium);\n  line-height: 1.25;\n  color: var(--road-on-surface);\n  border: 1px solid transparent;\n  border-radius: 0.25rem;\n}\n\n/* ICON\n -------------------- */\n\n.alert-icon {\n  flex-shrink: 0;\n  width: 2rem;\n  height: 2rem;\n  margin-right: 0.5rem;\n}\n\n/* ALERT TITLE\n -------------------- */\n\n.alert-title {\n  padding: 0.375rem 0 0;\n  font-weight: 700;\n}\n\n/* ALERT LINK\n -------------------- */\n\n.alert-link {\n  display: block;\n  margin: 0;\n  color: var(--road-on-surface);\n  text-decoration: underline;\n}\n\n/* DESCRIPTION\n -------------------- */\n\n.alert-description {\n  padding: 0.375rem 0;\n  margin: 0;\n}\n\n/* FEEDBACK\n -------------------- */\n\n/**\n * Info\n */\n\n:host(.alert-info) {\n  color: var(--road-on-info-surface);\n  background: var(--road-info-surface);\n  border-color: var(--road-info-outline);\n}\n\n:host(.alert-info) ::slotted(road-icon) {\n  fill: var(--road-info-default);\n}\n\n:host(.alert-info) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-info-surface-inverse);\n  background: var(--road-info-surface-inverse);\n  fill: var(--road-on-info-surface-inverse);\n}\n\n/**\n * Success\n */\n\n:host(.alert-success) {\n  color: var(--road-on-success-surface);\n  background: var(--road-success-surface);\n  border-color: var(--road-success-outline);\n}\n\n:host(.alert-success) ::slotted(road-icon) {\n  fill: var(--road-success-icon);\n}\n\n:host(.alert-success) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-success-surface-inverse);\n  background: var(--road-success-surface-inverse);\n  fill: var(--road-on-success-surface-inverse);\n}\n\n/**\n * Warning\n */\n\n:host(.alert-warning) {\n  color: var(--road-on-warning-surface);\n  background: var(--road-warning-surface);\n  border-color: var(--road-warning-outline);\n}\n\n:host(.alert-warning) ::slotted(road-icon) {\n  fill: var(--road-warning-icon);\n}\n\n:host(.alert-warning) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-warning-surface-inverse);\n  background: var(--road-warning-surface-inverse);\n  fill: var(--road-on-warning-surface-inverse);\n}\n\n/**\n * Danger\n */\n\n:host(.alert-danger) {\n  color: var(--road-on-danger-surface);\n  background: var(--road-danger-surface);\n  border-color: var(--road-danger-outline);\n}\n\n:host(.alert-danger) ::slotted(road-icon) {\n  fill: var(--road-danger-icon);\n}\n\n:host(.alert-danger) ::slotted(road-button) {\n  display: block;\n  margin: 0.375rem 0 0;\n  color: var(--road-on-danger-surface-inverse);\n  background: var(--road-danger-surface-inverse);\n  fill: var(--road-on-danger-surface-inverse);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\nimport { FeedbackColors } from '../../interface';\n\n/**\n * @slot icon - Icon of the alert, it should be a road-icon element.\n * @slot  - Message of the alert.\n */\n\n@Component({\n  tag: 'road-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class Alert {\n\n  /**\n   * Set the color of alert. e.g. info, success, warning, danger\n   */\n  @Prop() color: FeedbackColors = 'info';\n\n  /**\n   * Title display in the alert\n   */\n   @Prop() label?: string;\n\n   /**\n   * Button display in the alert\n   * `<road-button size=\"sm\">Label</road-button>`\n   */\n   @Prop() button?: string;\n\n   /**\n   * Text Link display in the alert\n   */\n   @Prop() link?: string;\n\n   /**\n    * url display in the link\n    */\n   @Prop() url?: string;\n\n   render() {\n     const colorClass = this.color !== undefined ? `alert-${this.color}` : '';\n\n     return (\n       <Host class={colorClass} role=\"alert\">\n         <div class=\"alert-icon\">\n           <slot name=\"icon\"/>\n         </div>\n         <div>\n           {this.label && <span class=\"alert-title d-block\">{this.label}</span>}\n           <p class=\"alert-description\">\n             <slot/>\n             {this.link && <a href={this.url} class=\"alert-link link link-default\">{this.link}</a>}\n           </p>\n         </div>\n       </Host>\n     );\n   }\n}"],"mappings":"6CAAA,MAAMA,EAAW,opE,MCcJC,EAAK,M,oCAKgB,O,kFAuB/B,MAAAC,GACE,MAAMC,EAAaC,KAAKC,QAAUC,UAAY,SAASF,KAAKC,QAAU,GAEtE,OACEE,EAACC,EAAI,CAACC,MAAON,EAAYO,KAAK,SAC5BH,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMI,KAAK,UAEbJ,EAAA,WACGH,KAAKQ,OAASL,EAAA,QAAME,MAAM,uBAAuBL,KAAKQ,OACvDL,EAAA,KAAGE,MAAM,qBACPF,EAAA,aACCH,KAAKS,MAAQN,EAAA,KAAGO,KAAMV,KAAKW,IAAKN,MAAM,gCAAgCL,KAAKS,Q"}

package/dist/roadtrip/{p-3604d557.entry.js → p-7048f786.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,e as t,h as e,H as a,f as r}from"./p-abdbf6ac.js";const s=".sc-road-autocomplete-h{position:relative;display:block}.sc-road-autocomplete-s>road-input-group,.sc-road-autocomplete-s>road-input{position:relative;z-index:2}.sc-road-autocomplete-s>road-button{position:absolute;right:0;height:100%;background-color:var(--road-surface)}.autocomplete-list.sc-road-autocomplete{position:absolute;top:3rem;z-index:1;width:100%;max-height:16rem;padding:0.5rem 0;margin:0;overflow-y:scroll;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-14);color:var(--road-on-surface);list-style-type:none;background:var(--road-surface);border-radius:0 0 0.25rem 0.25rem;box-shadow:var(--road-elevation-low)}.autocomplete-item.sc-road-autocomplete{padding:0.75rem 1rem;cursor:pointer}.autocomplete-item.sc-road-autocomplete:hover,.autocomplete-item.focus.sc-road-autocomplete{color:var(--road-on-primary);background:var(--road-primary)}";const i=class{constructor(e){o(this,e);this.roadselected=t(this,"roadselected",7);this.roadSelected=t(this,"roadSelected",7);this.onClick=(o,t)=>{this.el.querySelector("road-input").value=o;this.visible=false;this.roadselected.emit({value:o.toString(),label:t});this.roadSelected.emit({value:o.toString(),label:t})};this.visible=false;this.options=[]}handleFocus(){this.visible=true}onClickOutside(o){if(this.visible&&!this.el.contains(o.target)){this.visible=false}}render(){return e(a,null,e("slot",null),this.visible&&this.options.length>0&&e("ul",{class:"autocomplete-list"},this.options&&this.options.map((o=>e("li",{class:"autocomplete-item",role:"menuitem",onClick:()=>this.onClick(o.value,o.label)},o.label)))))}get el(){return r(this)}};i.style=s;export{i as road_autocomplete};
-//# sourceMappingURL=p-3604d557.entry.js.map
+import{r as o,c as t,h as e,H as a,a as r}from"./p-f3d586b3.js";const s=".sc-road-autocomplete-h{position:relative;display:block}.sc-road-autocomplete-s>road-input-group,.sc-road-autocomplete-s>road-input{position:relative;z-index:2}.sc-road-autocomplete-s>road-button{position:absolute;right:0;height:100%;background-color:var(--road-surface)}.autocomplete-list.sc-road-autocomplete{position:absolute;top:3rem;z-index:1;width:100%;max-height:16rem;padding:0.5rem 0;margin:0;overflow-y:scroll;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-14);color:var(--road-on-surface);list-style-type:none;background:var(--road-surface);border-radius:0 0 0.25rem 0.25rem;box-shadow:var(--road-elevation-low)}.autocomplete-item.sc-road-autocomplete{padding:0.75rem 1rem;cursor:pointer}.autocomplete-item.sc-road-autocomplete:hover,.autocomplete-item.focus.sc-road-autocomplete{color:var(--road-on-primary);background:var(--road-primary)}";const i=class{constructor(e){o(this,e);this.roadselected=t(this,"roadselected",7);this.roadSelected=t(this,"roadSelected",7);this.onClick=(o,t)=>{this.el.querySelector("road-input").value=o;this.visible=false;this.roadselected.emit({value:o.toString(),label:t});this.roadSelected.emit({value:o.toString(),label:t})};this.visible=false;this.options=[]}handleFocus(){this.visible=true}onClickOutside(o){if(this.visible&&!this.el.contains(o.target)){this.visible=false}}render(){return e(a,null,e("slot",null),this.visible&&this.options.length>0&&e("ul",{class:"autocomplete-list"},this.options&&this.options.map((o=>e("li",{class:"autocomplete-item",role:"menuitem",onClick:()=>this.onClick(o.value,o.label)},o.label)))))}get el(){return r(this)}};i.style=s;export{i as road_autocomplete};
+//# sourceMappingURL=p-7048f786.entry.js.map

package/dist/roadtrip/p-7048f786.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["autocompleteCss","Autocomplete","this","onClick","value","label","el","querySelector","visible","roadselected","emit","toString","roadSelected","handleFocus","onClickOutside","event","contains","target","render","h","Host","options","length","class","map","option","role"],"sources":["src/components/autocomplete/autocomplete.css?tag=road-autocomplete&encapsulation=scoped","src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["/*\n * Autocomplete\n *\n * Index\n * - List\n * - Item\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n\n/* INPUT\n -------------------- */\n\n::slotted(road-input-group),\n::slotted(road-input) {\n  position: relative;\n  z-index: 2;\n}\n\n::slotted(road-button){\n  position: absolute;\n  right: 0;\n  height: 100%;\n  background-color: var(--road-surface);\n}\n\n/* LIST\n -------------------- */\n\n.autocomplete-list {\n  position: absolute;\n  top: 3rem;\n  z-index: 1;\n  width: 100%;\n  max-height: 16rem;\n  padding: 0.5rem 0;\n  margin: 0;\n  overflow-y: scroll;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-font-size-14);\n  color: var(--road-on-surface);\n  list-style-type: none;\n  background: var(--road-surface);\n  border-radius: 0 0 0.25rem 0.25rem;\n  box-shadow: var(--road-elevation-low);\n}\n\n/* ITEM\n -------------------- */\n\n.autocomplete-item {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n}\n\n/**\n * Hover state\n */\n\n.autocomplete-item:hover,\n.autocomplete-item.focus {\n  color: var(--road-on-primary);\n  background: var(--road-primary);\n}\n","import { Component, Element, Host, Listen, Prop, State, h, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot  - Input element for the widget, it should be a road-input element.\n */\n\n@Component({\n  tag: 'road-autocomplete',\n  styleUrl: 'autocomplete.css',\n  scoped: true,\n})\nexport class Autocomplete {\n\n  @Element() el!: HTMLRoadAutocompleteElement;\n\n  @State() visible: boolean = false;\n\n  /**\n   * List of autocomplete options\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n  }> = [];\n\n  @Listen('roadFocus')\n  @Listen('roadfocus')\n  handleFocus() {\n    this.visible = true;\n  }\n\n  @Listen('click', { target: 'document' })\n  onClickOutside(event: MouseEvent) {\n    if (this.visible && !this.el.contains(event.target as Node)) {\n      this.visible = false;\n    }\n  }\n\n  /**\n   * Emitted the value and label of the option selected.\n   */\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n  /** @internal */\n  @Event() roadSelected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\n  private onClick = (value: string | number, label: string) => {\n    (this.el.querySelector('road-input') as HTMLRoadInputElement).value = value;\n    this.visible = false;\n    this.roadselected.emit({\n      value: value.toString(),\n      label: label,\n    });\n    this.roadSelected.emit({\n      value: value.toString(),\n      label: label,\n    });\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot/>\n        {this.visible && this.options.length > 0 &&\n          <ul class=\"autocomplete-list\">\n            {this.options && this.options.map(option => (\n              <li class=\"autocomplete-item\" role=\"menuitem\" onClick={() => this.onClick(option.value, option.label)}>\n                {option.label}\n              </li>\n            ))}\n          </ul>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,+2B,MCWXC,EAAY,M,+GAwCfC,KAAAC,QAAU,CAACC,EAAwBC,KACxCH,KAAKI,GAAGC,cAAc,cAAuCH,MAAQA,EACtEF,KAAKM,QAAU,MACfN,KAAKO,aAAaC,KAAK,CACrBN,MAAOA,EAAMO,WACbN,MAAOA,IAETH,KAAKU,aAAaF,KAAK,CACrBN,MAAOA,EAAMO,WACbN,MAAOA,GACP,E,aA9CwB,M,aAQvB,E,CAIL,WAAAQ,GACEX,KAAKM,QAAU,I,CAIjB,cAAAM,CAAeC,GACb,GAAIb,KAAKM,UAAYN,KAAKI,GAAGU,SAASD,EAAME,QAAiB,CAC3Df,KAAKM,QAAU,K,EA8BnB,MAAAU,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,aACCjB,KAAKM,SAAWN,KAAKmB,QAAQC,OAAS,GACrCH,EAAA,MAAII,MAAM,qBACPrB,KAAKmB,SAAWnB,KAAKmB,QAAQG,KAAIC,GAChCN,EAAA,MAAII,MAAM,oBAAoBG,KAAK,WAAWvB,QAAS,IAAMD,KAAKC,QAAQsB,EAAOrB,MAAOqB,EAAOpB,QAC5FoB,EAAOpB,U"}

package/dist/roadtrip/{p-37ab7c7f.js → p-73fe2357.js}

@@ -1,2 +1,2 @@
 const a='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M40.115 55.5h-15.74a4.222 4.222 0 0 1-3.005-1.245l-11.13-11.13a4.222 4.222 0 0 1-1.245-3.005V24.38a4.222 4.222 0 0 1 1.245-3l11.13-11.13a4.222 4.222 0 0 1 3.005-1.245h15.74a4.222 4.222 0 0 1 3.005 1.245l11.13 11.13a4.222 4.222 0 0 1 1.245 3v15.74a4.222 4.222 0 0 1-1.245 3.005l-11.13 11.13a4.222 4.222 0 0 1-3.005 1.245Zm-15.74-44a1.738 1.738 0 0 0-1.237.513l-11.13 11.13a1.738 1.738 0 0 0-.513 1.237v15.74a1.742 1.742 0 0 0 .513 1.238l11.13 11.129a1.738 1.738 0 0 0 1.237.513h15.74a1.738 1.738 0 0 0 1.237-.513l11.13-11.129a1.742 1.742 0 0 0 .513-1.238V24.38a1.738 1.738 0 0 0-.513-1.237l-11.13-11.13a1.738 1.738 0 0 0-1.237-.513Z"/><path d="M30.75 21.368h3v14.003h-3zm0 18.435h3v3.329h-3z"/></svg>';const t='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M33.75 29.128h-3v14.004h3V29.128Zm0-7.76h-3v3.328h3v-3.328Z"/><path d="M32.25 55.5A23.276 23.276 0 0 1 9 32.25 23.276 23.276 0 0 1 32.25 9 23.276 23.276 0 0 1 55.5 32.25 23.276 23.276 0 0 1 32.25 55.5Zm0-44A20.774 20.774 0 0 0 11.5 32.25 20.773 20.773 0 0 0 32.25 53 20.774 20.774 0 0 0 53 32.25 20.774 20.774 0 0 0 32.25 11.5Z"/></svg>';const v='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M32.25 55.5A23.276 23.276 0 0 1 9 32.25 23.276 23.276 0 0 1 32.25 9 23.276 23.276 0 0 1 55.5 32.25 23.276 23.276 0 0 1 32.25 55.5Zm0-44A20.774 20.774 0 0 0 11.5 32.25 20.774 20.774 0 0 0 32.25 53 20.773 20.773 0 0 0 53 32.25 20.774 20.774 0 0 0 32.25 11.5Z"/><path d="m29.53 40.779-6.964-6.963 1.768-1.768 5.2 5.2 12.637-12.64 1.768 1.768Z"/></svg>';const h='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M34.295 23.155h-3v14.003h3V23.155Zm0 18.435h-3v3.329h3V41.59Z"/><path d="M53.334 53.074H12.256a4.206 4.206 0 0 1-3.68-2.125 4.21 4.21 0 0 1 0-4.25l20.539-35.574A4.208 4.208 0 0 1 32.795 9a4.208 4.208 0 0 1 3.681 2.125L57.015 46.7a4.21 4.21 0 0 1 0 4.25 4.208 4.208 0 0 1-3.681 2.125ZM32.795 11.5a1.73 1.73 0 0 0-1.515.875L10.741 47.95a1.734 1.734 0 0 0 0 1.75 1.734 1.734 0 0 0 1.515.875h41.078a1.733 1.733 0 0 0 1.516-.875 1.734 1.734 0 0 0 0-1.75L34.311 12.375a1.733 1.733 0 0 0-1.516-.875Z"/></svg>';const s='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="m25.59 39.75-8.34-8.34-2.84 2.82 11.18 11.18 24-24-2.82-2.82Z"/></svg>';const d='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="m22.457 49.187-.774-2.406-.773 2.406h-2.523l2.013 1.489-.774 2.406 2.038-1.482 2.046 1.474-.773-2.407 2.042-1.481ZM19.66 17.173l2.058-1.493 2.042 1.481-.773-2.406 2.042-1.482h-2.522l-.774-2.406-.773 2.406-2.569.012 2.043 1.482Zm-5.66.99-.774 2.406H10.7l2.023 1.482-.774 2.406L14 22.975l2.027 1.466-.774-2.406 2.047-1.466h-2.529ZM32.743 52.1l-.774-2.406-.774 2.406H28.65l2.043 1.482-.774 2.406 2.042-1.488L34 55.984l-.774-2.406 2.047-1.478Zm-2.735-37.79 2.042-1.481 2.043 1.481-.774-2.41 2.043-1.481h-2.523l-.773-2.407-.774 2.407h-2.553l2.042 1.481ZM14.647 41.644l-.774-2.406-.773 2.406h-2.523l2.043 1.481-.774 2.406 2.043-1.481 2.042 1.481-.8-2.406 2.043-1.481Zm-3.613-8.139 2.042 1.481-.776-2.406 2.045-1.48h-2.514l-.774-2.406-.774 2.406H7.761l2 1.481-.774 2.406Zm37.004-8.982 2.039-1.49 2.042 1.482-.774-2.406 2.043-1.482h-2.522l-.774-2.406-.774 2.406-2.549.008 2.043 1.481Zm2.828 17.194-.774-2.406-.774 2.406H46.8l2.039 1.483-.774 2.4 2.043-1.482L52.15 45.6l-.785-2.4 2.042-1.482Zm5.373-10.529h-2.522l-.774-2.406-.774 2.406h-2.522l2.043 1.481-.774 2.406 2.043-1.481L55 35.075l-.8-2.406ZM42.367 10.9l-.774 2.407h-2.522l2.047 1.493-.774 2.4 2.042-1.482 2.043 1.482-.774-2.406 2.062-1.489h-2.576Zm.642 38.329-.773-2.406-.774 2.406h-2.5L41 50.711l-.774 2.406 2.042-1.481 2.043 1.481-.824-2.406 2.042-1.482Z"/></svg>';const l='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M49.87 30.19H14.51v4h35.36v-4Z"/></svg>';const g='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M14.706 31.135h35.355v2.5H14.706z"/></svg>';const i='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M49.87 30.19H34.19V14.51h-4v15.68H14.51v4h15.68v15.68h4V34.19h15.68v-4Z"/></svg>';const e='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M28.121 46.121 26 44l11.44-11.44L26 21.121 28.121 19l13.561 13.56Z"/></svg>';const m='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="m19 20.767 1.768-1.768 25 25L44 45.767z"/><path d="m19 44 25-25 1.768 1.768-25 25z"/></svg>';const Z='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M32 47.425V6.5l7.514 17.755 19.17 1.637L44.152 38.61l4.384 18.89Z"/><path d="M32 47.425 15.461 57.5l4.387-18.89L5.316 25.892l19.165-1.637L32 6.5Z" fill="var(--warning, rgb(252, 183, 49))"/></svg>';const r='data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M32 47.425V6.5l7.514 17.755 19.17 1.637L44.152 38.61l4.384 18.89Zm0 0L15.461 57.5l4.387-18.89L5.316 25.892l19.165-1.637L32 6.5Z"/></svg>';export{m as a,g as b,s as c,t as d,a as e,h as f,v as g,i as h,l as i,Z as j,d as l,e as n,r as s};
-//# sourceMappingURL=p-37ab7c7f.js.map
+//# sourceMappingURL=p-73fe2357.js.map