@roadtrip/components 3.17.0 → 3.18.0

package/dist/roadtrip/p-9a929988.entry.js

@@ -0,0 +1,2 @@
+import{r,c as e,h as a,H as n,a as o}from"./p-f3d586b3.js";import{h as i,i as t}from"./p-ac7a8bca.js";const s='.sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;-webkit-appearance:none;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-label.sc-road-range{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;-webkit-appearance:none;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:"";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc((var(--value) * 100%) / var(--max));height:0.5rem;content:"";background:var(--road-primary);border-radius:1.125rem}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);-webkit-appearance:none;appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.focus-visible.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:active .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:focus .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}';const d=class{constructor(a){r(this,a);this.roadchange=e(this,"roadchange",7);this.roadChange=e(this,"roadChange",7);this.onInput=r=>{const e=r.target;if(e){this.value=e.value||""}if(this.value!==null&&this.value!==undefined){this.el.style.setProperty("--value",`${this.value}`)}};this.rangeId=`road-range-${c++}`;this.value="";this.min=undefined;this.max=undefined;this.step=undefined;this.showValue=false;this.showTick=false;this.showLabels=false}valueChanged(){this.roadchange.emit({value:this.value==null?this.value:this.value.toString()});this.roadChange.emit({value:this.value==null?this.value:this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}handleFocus(){this.el.classList.add("focus-visible")}handleBlur(){this.el.classList.remove("focus-visible")}componentDidLoad(){const r=this.el.querySelector(".form-label");const e=this.el.querySelector(".form-control.sc-road-input");if(r){r.style.clip="rect(0 0 0 0)";r.style.border="0";r.style.height="1px";r.style.left="0";r.style.margin="-1px";r.style.overflow="hidden";r.style.padding="0";r.style.position="absolute";r.style.top="0";r.style.width="1px";e.style.padding="0 1rem 0"}}render(){const r=this.getValue();const e=this.showLabels!==undefined?`tickmarks`:"";return a(n,{tabindex:"0"},a("div",{class:"form-group d-flex align-items-end"},this.showTick&&a("road-icon",{icon:i,class:"mr-8",size:"sm"}),a("div",{class:"form-range",style:{"--min:":this.min,"--max":this.max,"--value":r}},this.showValue&&a("output",null),this.showLabels&&a("slot",{name:"datalist"}),a("input",{type:"range",class:"form-range-input",id:this.rangeId,min:this.min,max:this.max,value:r,onInput:this.onInput,list:e,"aria-label":"Valeur",tabindex:"0"}),a("label",{class:"form-range-label"},"Valeur"),a("div",{class:"form-range-progress"})),this.showTick&&a("road-icon",{icon:t,class:"ml-8",size:"sm"})))}get el(){return o(this)}static get watchers(){return{value:["valueChanged"]}}};let c=0;d.style=s;export{d as road_range};
+//# sourceMappingURL=p-9a929988.entry.js.map

package/dist/roadtrip/p-9a929988.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["rangeCss","Range","this","onInput","ev","input","target","value","undefined","el","style","setProperty","rangeIds","valueChanged","roadchange","emit","toString","roadChange","getValue","handleFocus","classList","add","handleBlur","remove","componentDidLoad","label","querySelector","clip","border","height","left","margin","overflow","padding","position","top","width","render","datalist","showLabels","h","Host","tabindex","class","showTick","icon","navigationAddLessSolid","size","min","max","showValue","name","type","id","rangeId","list","navigationAddMoreSolid"],"sources":["src/components/range/range.css?tag=road-range&encapsulation=scoped","src/components/range/range.tsx"],"sourcesContent":["/*\n * Range\n *\n *\n * Index\n * - Input\n * - Value\n * - Slider\n * - Progress\n * - Cursor\n */\n\n:host {\n  display: block;\n}\n\n.form-group{\n  width: 100%;\n}\n\n.form-range {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  margin-bottom: 6px;\n}\n\n/* INPUT\n -------------------- */\n\n.form-range-input {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: transparent;\n  outline: 0;\n  appearance: none;\n}\n\n/* VALUE\n -------------------- */\n\n.form-range > output::after {\n  display: block;\n  font-size: var(--road-label-medium);\n  text-align: right;\n  content: counter(variable);\n  counter-reset: variable var(--value);\n}\n\n/* SLIDER\n -------------------- */\n\n.form-range-label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n}\n\n.form-range-progress {\n  position: relative;\n  z-index: 0;\n  display: block;\n  width: 100%;\n  margin-top: -1rem;\n}\n\n.form-range-input::-webkit-slider-runnable-track {\n  border: 0;\n  appearance: none;\n}\n\n.form-range-input::-moz-range-track {\n  height: 0.5rem;\n  border: 0;\n  appearance: none;\n}\n\n.form-range-progress::before {\n  display: block;\n  height: 0.5rem;\n  content: \"\";\n  background-color: var(--road-on-surface-disabled);\n  border: 0;\n  border-radius: 1.125rem;\n}\n\n/* PROGRESS\n -------------------- */\n\n.form-range-progress::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  display: block;\n  width: calc((var(--value) * 100%) / var(--max));\n  height: 0.5rem;\n  content: \"\";\n  background: var(--road-primary);\n  border-radius: 1.125rem;\n}\n\n/* CURSOR\n-------------------- */\n\n.form-range-input::-webkit-slider-thumb {\n  position: relative;\n  z-index: 1;\n  width: 1.625rem;\n  height: 1.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n.form-range-input::-moz-range-thumb {\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 1.625rem;\n  height: 1.625rem;\n  margin-top: -0.625rem;\n  cursor: grab;\n  background: var(--road-surface);\n  border: none;\n  border-radius: 1.625rem;\n  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);\n  appearance: none;\n}\n\n/**\n *  Focus state\n */\n\n:host(.focus-visible) .form-range-input::-webkit-slider-thumb,\n:host(:active) .form-range-input::-webkit-slider-thumb,\n:host(:focus) .form-range-input::-webkit-slider-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n:host(.focus-visible) .form-range-input::-moz-range-thumb,\n:host(:active) .form-range-input::-moz-range-thumb,\n:host(:focus) .form-range-input::-moz-range-thumb {\n  background: var(--road-input-surface-variant);\n  border: 0.5rem solid var(--road-grey-100-new);\n}\n\n/* DATALIST\n -------------------- */\n\n::slotted(datalist) {\n  display: flex;\n  justify-content: space-between;\n}\n\n::slotted(datalist) option {\n  width: 32px;\n  margin: 0;\n  font-size: var(--road-label-medium);\n  text-align: center;\n}\n\n","import { Component, h, Element, Prop, Event, Host, EventEmitter, Watch, Listen } from '@stencil/core';\nimport { navigationAddLessSolid, navigationAddMoreSolid } from '../../../icons';\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n      `<option value=\"0\" label=\"0%\"></option>`\n      `<option value=\"10\" label=\"10%\"></option>`\n      `<option value=\"20\" label=\"20%\"></option>`\n      `<option value=\"30\" label=\"30%\"></option>`\n      `<option value=\"40\" label=\"40%\"></option>`\n      `<option value=\"50\" label=\"50%\"></option>`\n      `<option value=\"60\" label=\"60%\"></option>`\n     `<option value=\"70\" label=\"70%\"></option>`\n     `<option value=\"80\" label=\"80%\"></option>`\n      `<option value=\"90\" label=\"90%\"></option>`\n      `<option value=\"100\" label=\"100%\"></option>`\n    `</datalist>`\n */\n\n@Component({\n  tag: 'road-range',\n  styleUrl: 'range.css',\n  scoped: true,\n})\nexport class Range {\n\n  @Element() el!: HTMLRoadRangeElement;\n\n  /**\n   * The id of range\n   */\n  @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n  /**\n   * The value of the range.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min!: string;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max!: string;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Display the current value of the range\n   */\n  @Prop() showValue: boolean = false;\n\n  /**\n   * Display Tick of the range\n   */\n  @Prop() showTick: boolean = false;\n\n    /**\n   * Display labels of the range\n   */\n     @Prop() showLabels: boolean = false;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });\n    this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });\n  }\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  private getValue(): string {\n    return typeof this.value === 'number'\n      ? this.value.toString()\n      : (this.value || '').toString();\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    if(this.value !== null && this.value !== undefined) {\n      this.el.style.setProperty('--value', `${this.value}`);\n    }\n  };\n\n  @Listen('focus', { capture: true })\n  handleFocus() {\n    this.el.classList.add('focus-visible');\n  }\n\n  @Listen('blur', { capture: true })\n  handleBlur() {\n    this.el.classList.remove('focus-visible');\n  }\n\n  componentDidLoad() {\n    // Cacher le label pour accessibilité\n\n  const label = this.el.querySelector('.form-label') as HTMLElement;\n  const input = this.el.querySelector('.form-control.sc-road-input') as HTMLElement;\n  if (label) {\n    label.style.clip = 'rect(0 0 0 0)';\n    label.style.border = '0';\n    label.style.height = '1px';\n    label.style.left = '0';\n    label.style.margin = '-1px';\n    label.style.overflow = 'hidden';\n    label.style.padding = '0';\n    label.style.position = 'absolute';\n    label.style.top = '0';\n    label.style.width = '1px';\n\n    input.style.padding = '0 1rem 0';\n    \n  }\n}\n\n  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\n      <Host tabindex=\"0\">\n      <div class=\"form-group d-flex align-items-end\">\n        {this.showTick && <road-icon icon={navigationAddLessSolid} class=\"mr-8\" size='sm'></road-icon>}\n        <div class=\"form-range\" style={{'--min:': this.min, '--max': this.max, '--value': value}}>\n          {this.showValue && <output></output>}\n          {this.showLabels && <slot name=\"datalist\"/>}\n          <input\n            type=\"range\"\n            class=\"form-range-input\"\n            id={this.rangeId}\n            min={this.min}\n            max={this.max}\n            value={value}\n            onInput={this.onInput}\n            list={datalist}\n            aria-label=\"Valeur\"\n            tabindex=\"0\"\n          />\n          <label class=\"form-range-label\">Valeur</label>\n          <div class=\"form-range-progress\"></div>\n        </div>\n        {this.showTick && <road-icon icon={navigationAddMoreSolid} class=\"ml-8\" size='sm'></road-icon>}\n      </div>\n      </Host>\n    );\n  }\n\n}\n\nlet rangeIds = 0;\n"],"mappings":"sGAAA,MAAMA,EAAW,6rF,MCyBJC,EAAK,M,uGAuERC,KAAAC,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTH,KAAKK,MAAQF,EAAME,OAAS,E,CAE9B,GAAGL,KAAKK,QAAU,MAAQL,KAAKK,QAAUC,UAAW,CAClDN,KAAKO,GAAGC,MAAMC,YAAY,UAAW,GAAGT,KAAKK,Q,gBAtEvB,cAAcK,M,WAKkB,G,yEAqB7B,M,cAKD,M,gBAKK,K,CAMvB,YAAAC,GACRX,KAAKY,WAAWC,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,aAC3Ed,KAAKe,WAAWF,KAAK,CAAER,MAAOL,KAAKK,OAAS,KAAOL,KAAKK,MAAQL,KAAKK,MAAMS,Y,CAcrE,QAAAE,GACN,cAAchB,KAAKK,QAAU,SACzBL,KAAKK,MAAMS,YACVd,KAAKK,OAAS,IAAIS,U,CAczB,WAAAG,GACEjB,KAAKO,GAAGW,UAAUC,IAAI,gB,CAIxB,UAAAC,GACEpB,KAAKO,GAAGW,UAAUG,OAAO,gB,CAG3B,gBAAAC,GAGA,MAAMC,EAAQvB,KAAKO,GAAGiB,cAAc,eACpC,MAAMrB,EAAQH,KAAKO,GAAGiB,cAAc,+BACpC,GAAID,EAAO,CACTA,EAAMf,MAAMiB,KAAO,gBACnBF,EAAMf,MAAMkB,OAAS,IACrBH,EAAMf,MAAMmB,OAAS,MACrBJ,EAAMf,MAAMoB,KAAO,IACnBL,EAAMf,MAAMqB,OAAS,OACrBN,EAAMf,MAAMsB,SAAW,SACvBP,EAAMf,MAAMuB,QAAU,IACtBR,EAAMf,MAAMwB,SAAW,WACvBT,EAAMf,MAAMyB,IAAM,IAClBV,EAAMf,MAAM0B,MAAQ,MAEpB/B,EAAMK,MAAMuB,QAAU,U,EAKxB,MAAAI,GACE,MAAM9B,EAAQL,KAAKgB,WACnB,MAAMoB,EAAWpC,KAAKqC,aAAe/B,UAAY,YAAc,GAE/D,OACEgC,EAACC,EAAI,CAACC,SAAS,KACfF,EAAA,OAAKG,MAAM,qCACRzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMC,EAAwBH,MAAM,OAAOI,KAAK,OAC7EP,EAAA,OAAKG,MAAM,aAAajC,MAAO,CAAC,SAAUR,KAAK8C,IAAK,QAAS9C,KAAK+C,IAAK,UAAW1C,IAC/EL,KAAKgD,WAAaV,EAAA,eAClBtC,KAAKqC,YAAcC,EAAA,QAAMW,KAAK,aAC/BX,EAAA,SACEY,KAAK,QACLT,MAAM,mBACNU,GAAInD,KAAKoD,QACTN,IAAK9C,KAAK8C,IACVC,IAAK/C,KAAK+C,IACV1C,MAAOA,EACPJ,QAASD,KAAKC,QACdoD,KAAMjB,EAAQ,aACH,SACXI,SAAS,MAEXF,EAAA,SAAOG,MAAM,oBAAkB,UAC/BH,EAAA,OAAKG,MAAM,yBAEZzC,KAAK0C,UAAYJ,EAAA,aAAWK,KAAMW,EAAwBb,MAAM,OAAOI,KAAK,Q,gFAQrF,IAAInC,EAAW,E"}

package/dist/roadtrip/{p-336aa5f6.entry.js → p-9ff79904.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as o,a}from"./p-f3d586b3.js";const r=':host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-disabled),:host(.tab-disabled) road-tooltip,:host(.tab-disabled) road-tooltip road-icon,:host(.tab-disabled) ::slotted(road-icon){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}:host(.tab-selected),:host(.tab-selected) road-tooltip road-icon,:host(.tab-selected) ::slotted(road-icon){color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:"";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-on-button-tertiary)}:host(.tab-disabled.focus-visible) ::slotted(road-icon),:host(.tab-disabled.focus-visible) ::slotted(road-label),:host(.tab-disabled:hover) ::slotted(road-icon),:host(.tab-disabled:hover) ::slotted(road-label){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.tab-disabled) .button-native{cursor:not-allowed}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}';const s=class{constructor(i){t(this,i);this.roadnavbaritemclick=e(this,"roadnavbaritemclick",7);this.roadNavbarItemClick=e(this,"roadNavbarItemClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.disabled=false;this.download=undefined;this.href=undefined;this.rel=undefined;this.selected=false;this.tab=undefined;this.target=undefined}onNavbarChanged(t){this.selected=this.tab===t.detail.tab}selectTab(t){if(this.tab!==undefined){if(!this.disabled){this.roadnavbaritemclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadNavbarItemClick.emit({tab:this.tab,href:this.href,selected:this.selected})}if(this.href===undefined){t.preventDefault()}}}render(){const{href:t,rel:e,target:a,selected:r,tab:s,disabled:l}=this;const n={download:this.download,href:t,rel:e,target:a};return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:"0","aria-selected":r?"true":null,id:s!==undefined?`navbar-item-${s}`:null,disabled:l,class:{"navbar-item":true,"tab-selected":r,"tab-disabled":l}},i("a",Object.assign({},n,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return a(this)}};s.style=r;export{s as road_navbar_item};
-//# sourceMappingURL=p-336aa5f6.entry.js.map
+import{r as t,c as e,h as i,H as o,a}from"./p-f3d586b3.js";const r=':host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-disabled),:host(.tab-disabled) road-tooltip,:host(.tab-disabled) road-tooltip road-icon,:host(.tab-disabled) ::slotted(road-icon){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}:host(.tab-selected),:host(.tab-selected) road-tooltip road-icon,:host(.tab-selected) ::slotted(road-icon){color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:"";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-on-button-tertiary)}:host(.tab-disabled.focus-visible) ::slotted(road-icon),:host(.tab-disabled.focus-visible) ::slotted(road-label),:host(.tab-disabled:hover) ::slotted(road-icon),:host(.tab-disabled:hover) ::slotted(road-label){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.tab-disabled) .button-native{cursor:not-allowed}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}';const s=class{constructor(i){t(this,i);this.roadnavbaritemclick=e(this,"roadnavbaritemclick",7);this.roadNavbarItemClick=e(this,"roadNavbarItemClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.disabled=false;this.download=undefined;this.href=undefined;this.rel=undefined;this.selected=false;this.tab=undefined;this.target=undefined}onNavbarChanged(t){this.selected=this.tab===t.detail.tab}selectTab(t){if(this.tab!==undefined){if(!this.disabled){this.roadnavbaritemclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadNavbarItemClick.emit({tab:this.tab,href:this.href,selected:this.selected})}if(this.href===undefined){t.preventDefault()}}}render(){const{href:t,rel:e,target:a,selected:r,tab:s,disabled:l}=this;const n={download:this.download,href:t,rel:e,target:a};return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"menu",tabindex:"0","aria-selected":r?"true":null,id:s!==undefined?`navbar-item-${s}`:null,disabled:l,class:{"navbar-item":true,"tab-selected":r,"tab-disabled":l}},i("a",Object.assign({},n,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return a(this)}};s.style=r;export{s as road_navbar_item};
+//# sourceMappingURL=p-9ff79904.entry.js.map

package/dist/roadtrip/{p-336aa5f6.entry.js.map → p-9ff79904.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["navbarItemCss","NavbarItem","this","onKeyUp","ev","key","selectTab","onClick","onNavbarChanged","selected","tab","detail","undefined","disabled","roadnavbaritemclick","emit","href","roadNavbarItemClick","preventDefault","render","rel","target","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","tabIndex","part"],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/*\n * Navbar item\n *\n * Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n */\n\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-basis: 0;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-grow: inherit;\n    width: 100%;\n    padding: 0.5rem;\n  }\n\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled),\n:host(.tab-disabled) road-tooltip,\n:host(.tab-disabled) road-tooltip road-icon,\n:host(.tab-disabled) ::slotted(road-icon) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n/**\n * Selected state\n */\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon,\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--road-on-button-tertiary);\n  fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 4px;\n  color: var(--road-on-button-tertiary);\n  content: \"\";\n  background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n  :host(.tab-selected)::after {\n    bottom: auto;\n    left: 0;\n    width: 4px;\n    height: 100%;\n  }\n\n}\n\n\n/**\n * Focus on Tab state\n */\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n  color: var(--road-on-button-tertiary);\n}\n\n:host(.tab-disabled.focus-visible) ::slotted(road-icon),\n:host(.tab-disabled.focus-visible) ::slotted(road-label),\n:host(.tab-disabled:hover) ::slotted(road-icon),\n:host(.tab-disabled:hover) ::slotted(road-label) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host(.tab-disabled) .button-native {\n  cursor: not-allowed;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  margin-right: auto;\n  margin-bottom: 0.25rem;\n  margin-left: auto;\n  fill: currentColor;\n}\n\n/* TOOLTIP\n -------------------- */\n\n@media (min-width: 1200px) {\n\n  :host ::slotted(road-tooltip) {\n    width: 100%;\n  }\n\n}\n\n/* LABEL\n -------------------- */\n\n::slotted(road-label) {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  font-size: var(--road-label-small);\n  font-weight: 700;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  ::slotted(road-label)  {\n    display: block;\n  }\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 4px;\n  left: calc(50% + 0.375rem);\n  z-index: 1;\n  box-sizing: border-box;\n  height: auto;\n  font-size: var(--road-font-size-10);\n  font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,iiG,MCaTC,EAAU,M,2IAiFbC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,cAjFD,M,6EAyBiB,M,yCAyBpC,eAAAI,CAAgBJ,GACdF,KAAKO,SAAWP,KAAKQ,MAAQN,EAAGO,OAAOD,G,CAGjC,SAAAJ,CAAUF,GAChB,GAAIF,KAAKQ,MAAQE,UAAW,CAC1B,IAAKV,KAAKW,SAAU,CAClBX,KAAKY,oBAAoBC,KAAK,CAC5BL,IAAKR,KAAKQ,IACVM,KAAMd,KAAKc,KACXP,SAAUP,KAAKO,WAEjBP,KAAKe,oBAAoBF,KAAK,CAC5BL,IAAKR,KAAKQ,IACVM,KAAMd,KAAKc,KACXP,SAAUP,KAAKO,U,CAGnB,GAAGP,KAAKc,OAASJ,UAAW,CAC1BR,EAAGc,gB,GAeT,MAAAC,GACE,MAAMH,KAAEA,EAAII,IAAEA,EAAGC,OAAEA,EAAMZ,SAAEA,EAAQC,IAAEA,EAAGG,SAAEA,GAAaX,KACvD,MAAMoB,EAAQ,CACZC,SAAUrB,KAAKqB,SACfP,OACAI,MACAC,UAGF,OACEG,EAACC,EAAI,CACHlB,QAASL,KAAKK,QACdmB,QAASxB,KAAKC,QACdwB,KAAK,MACLC,SAAS,IAAG,gBACGnB,EAAW,OAAS,KACnCoB,GAAInB,IAAQE,UAAY,eAAeF,IAAQ,KAC/CG,SAAUA,EACViB,MAAO,CACL,cAAe,KACf,eAAgBrB,EAChB,eAAgBI,IAGlBW,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEW,UAAW,EAAGH,MAAM,gBAAgBI,KAAK,WACrDV,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}
+{"version":3,"names":["navbarItemCss","NavbarItem","this","onKeyUp","ev","key","selectTab","onClick","onNavbarChanged","selected","tab","detail","undefined","disabled","roadnavbaritemclick","emit","href","roadNavbarItemClick","preventDefault","render","rel","target","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","tabIndex","part"],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/*\n * Navbar item\n *\n * Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n */\n\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-basis: 0;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    flex-grow: inherit;\n    width: 100%;\n    padding: 0.5rem;\n  }\n\n}\n\n/**\n * Disabled\n */\n\n:host(.tab-disabled),\n:host(.tab-disabled) road-tooltip,\n:host(.tab-disabled) road-tooltip road-icon,\n:host(.tab-disabled) ::slotted(road-icon) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n/**\n * Selected state\n */\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon,\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--road-on-button-tertiary);\n  fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n  position: absolute;\n  bottom: -12px;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 4px;\n  color: var(--road-on-button-tertiary);\n  content: \"\";\n  background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n  :host(.tab-selected)::after {\n    bottom: auto;\n    left: 0;\n    width: 4px;\n    height: 100%;\n  }\n\n}\n\n\n/**\n * Focus on Tab state\n */\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n  color: var(--road-on-button-tertiary);\n}\n\n:host(.tab-disabled.focus-visible) ::slotted(road-icon),\n:host(.tab-disabled.focus-visible) ::slotted(road-label),\n:host(.tab-disabled:hover) ::slotted(road-icon),\n:host(.tab-disabled:hover) ::slotted(road-label) {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  fill: var(--road-on-surface-disabled);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  overflow: visible;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host(.tab-disabled) .button-native {\n  cursor: not-allowed;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  display: block;\n  width: 2rem;\n  height: 2rem;\n  margin-right: auto;\n  margin-bottom: 0.25rem;\n  margin-left: auto;\n  fill: currentColor;\n}\n\n/* TOOLTIP\n -------------------- */\n\n@media (min-width: 1200px) {\n\n  :host ::slotted(road-tooltip) {\n    width: 100%;\n  }\n\n}\n\n/* LABEL\n -------------------- */\n\n::slotted(road-label) {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  font-size: var(--road-label-small);\n  font-weight: 700;\n  text-align: center;\n  white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n  ::slotted(road-label)  {\n    display: block;\n  }\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n  position: absolute;\n  top: 4px;\n  left: calc(50% + 0.375rem);\n  z-index: 1;\n  box-sizing: border-box;\n  height: auto;\n  font-size: var(--road-font-size-10);\n  font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item',\n  styleUrl: 'navbar-item.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"menu\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,iiG,MCaTC,EAAU,M,2IAiFbC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,cAjFD,M,6EAyBiB,M,yCAyBpC,eAAAI,CAAgBJ,GACdF,KAAKO,SAAWP,KAAKQ,MAAQN,EAAGO,OAAOD,G,CAGjC,SAAAJ,CAAUF,GAChB,GAAIF,KAAKQ,MAAQE,UAAW,CAC1B,IAAKV,KAAKW,SAAU,CAClBX,KAAKY,oBAAoBC,KAAK,CAC5BL,IAAKR,KAAKQ,IACVM,KAAMd,KAAKc,KACXP,SAAUP,KAAKO,WAEjBP,KAAKe,oBAAoBF,KAAK,CAC5BL,IAAKR,KAAKQ,IACVM,KAAMd,KAAKc,KACXP,SAAUP,KAAKO,U,CAGnB,GAAGP,KAAKc,OAASJ,UAAW,CAC1BR,EAAGc,gB,GAeT,MAAAC,GACE,MAAMH,KAAEA,EAAII,IAAEA,EAAGC,OAAEA,EAAMZ,SAAEA,EAAQC,IAAEA,EAAGG,SAAEA,GAAaX,KACvD,MAAMoB,EAAQ,CACZC,SAAUrB,KAAKqB,SACfP,OACAI,MACAC,UAGF,OACEG,EAACC,EAAI,CACHlB,QAASL,KAAKK,QACdmB,QAASxB,KAAKC,QACdwB,KAAK,OACLC,SAAS,IAAG,gBACGnB,EAAW,OAAS,KACnCoB,GAAInB,IAAQE,UAAY,eAAeF,IAAQ,KAC/CG,SAAUA,EACViB,MAAO,CACL,cAAe,KACf,eAAgBrB,EAChB,eAAgBI,IAGlBW,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEW,UAAW,EAAGH,MAAM,gBAAgBI,KAAK,WACrDV,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}

package/dist/roadtrip/p-a5eee655.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as a,h as s,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(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:"application"},s("slot",null))}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};n.style=i;export{n as road_global_navigation};
+//# sourceMappingURL=p-a5eee655.entry.js.map

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

@@ -1 +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"}
+{"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=\"application\"\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,eAELF,EAAA,a"}

package/dist/roadtrip/{p-73fe2357.js → p-ac7a8bca.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-73fe2357.js.map
+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,l as h,i,Z as j,d as l,e as n,r as s};
+//# sourceMappingURL=p-ac7a8bca.js.map

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

@@ -1,2 +1,2 @@
-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
+import{r as n,c as o,h as e,H as r}from"./p-f3d586b3.js";import{a as s}from"./p-ac7a8bca.js";const a=":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 i=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,"aria-label":"closed"},e("road-icon",{icon:s,size:"md"}))))}};i.style=a;export{i as road_banner};
+//# sourceMappingURL=p-b510e552.entry.js.map

package/dist/roadtrip/{p-6177bb46.entry.js.map → p-b510e552.entry.js.map}

@@ -1 +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"}
+{"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} aria-label=\"closed\">\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,QAAO,aAAa,UAC3EU,EAAA,aAAWQ,KAAMC,EAAiBC,KAAK,S"}

package/dist/roadtrip/{p-46cccafc.entry.js → p-c096723c.entry.js}

@@ -1,2 +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
+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?"true":"false"},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-c096723c.entry.js.map

package/dist/roadtrip/{p-46cccafc.entry.js.map → p-c096723c.entry.js.map}

@@ -1 +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"}
+{"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 ? 'true' : 'false'}\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,OAAS,OAAS,SAEpCH,KAAKwB,QACNT,EAAA,QAAMU,KAAK,qB,2BAOrB,IAAIjB,EAAa,E"}

package/dist/roadtrip/p-c7866ae4.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as r,h as t,H as e}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;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-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-on-surface-weak)}';const s=class{constructor(t){a(this,t);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 t(e,{"aria-disabled":this.disabled?"true":null,class:this.sizes&&`input-${this.sizes}`},t("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}),t("label",{class:"form-label",id:r,htmlFor:this.textareaId},this.label),this.error&&this.error!==""&&t("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&t("p",{class:"helper"},this.helper))}static get watchers(){return{value:["valueChanged"]}}};let i=0;s.style=o;export{s as road_textarea};
+//# sourceMappingURL=p-c7866ae4.entry.js.map

package/dist/roadtrip/p-c7866ae4.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-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-on-surface-weak);\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,u2G,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-cdefa79c.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as r,a as t}from"./p-f3d586b3.js";const n=":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;width:max-content;background-color:var(--road-surface);border-radius:0.25rem;outline:none}.dropdown summary:focus,.dropdown summary.focus-visible,.dropdown summary:focus-within{background:var(--road-surface-inverse)}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;z-index:1;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}.dropdown-left{left:0}.dropdown-right{right:0}.dropdown-item{min-height:40px;padding:0 1rem;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover,.dropdown-item.focus-visible{background:var(--road-surface-inverse)}";const d=class{constructor(r){o(this,r);this.onClick=()=>{this.isOpen=!this.isOpen};this.isOpen=false;this.isLight=false;this.isMedium=false;this.position=undefined;this.direction="bottom"}handleDocumentClick(o){if(o.target.closest("road-dropdown")===this.el){return}this.isOpen=false}render(){const o=this.isLight?"dropdown-button":"dropdown-button";const t=this.isMedium?"dropdown-medium-button dropdown-button":"dropdown-button";const n=this.position?`position-${this.position}`:"";const d=this.position?`dropdown-${this.position}`:"";const e=this.direction?`direction-${this.direction}`:"";return r("details",{class:"dropdown",open:this.isOpen},r("summary",{"aria-expanded":this.isOpen.toString(),tabindex:"0",role:"button",onClick:this.onClick,"tab-index":"0"},r("div",{class:`d-flex ${n}`},r("div",{class:`${o} ${t}`},r("road-icon",{name:"navigation-more",class:"dropdown-button-icon","aria-hidden":"true"})))),r("div",{class:`dropdown-menu ${e} ${d}`},r("slot",{name:"list"})))}get el(){return t(this)}};d.style=n;export{d as road_dropdown};
+//# sourceMappingURL=p-cdefa79c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","Dropdown","this","onClick","isOpen","handleDocumentClick","ev","target","closest","el","render","isLightButtonDropDown","isLight","isMediumButtonDropDown","isMedium","positionClass","position","dropdownClass","directionClass","direction","h","class","open","toString","tabindex","role","name"],"sources":["src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  width: max-content;\n  background-color: var(--road-surface);\n  border-radius: 0.25rem;\n  outline: none;\n}\n\n.dropdown summary:focus,\n.dropdown summary.focus-visible,\n.dropdown summary:focus-within{\n  background: var(--road-surface-inverse);\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.position-right{\n  display: flex;\n  justify-content: flex-end;\n}\n\n.bg-white{\n  background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n  width: 1.75rem;\n  height: 1.75rem;\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n -------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n.dropdown-left {\n  left: 0;\n}\n\n.dropdown-right {\n  right: 0;\n}\n\n\n/* ITEM\n -------------------- */\n\n.dropdown-item {\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n  outline: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline-weak);\n  border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover,\n.dropdown-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n\n\n","import { Component, h, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  @Element() el!: HTMLRoadDropdownElement;\n\n\n  @Prop({ mutable: true }) isOpen: boolean = false;\n  @Prop() isLight: boolean = false;\n  @Prop() isMedium: boolean = false;\n  @Prop({ reflect: true }) position?: 'left' | 'right';\n  @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(ev: MouseEvent) {\n    // Check if the clicked element is the dropdown button\n    if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n      return; // Do nothing if clicked element is the dropdown button\n    }\n    // Close dropdown if click is outside the dropdown\n    this.isOpen = false;\n  }\n\n  render() {\n    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button';\n    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button';\n    const positionClass = this.position ? `position-${this.position}` : '';\n    const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n    const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick} tab-index=\"0\">\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\" aria-hidden=\"true\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n          <slot name=\"list\" />\n        </div>\n      </details>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,szD,MCOPC,EAAQ,M,yBAWXC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YAPe,M,aAChB,M,cACC,M,uCAE4B,Q,CAOxD,mBAAAC,CAAoBC,GAElB,GAAKA,EAAGC,OAAuBC,QAAQ,mBAAqBN,KAAKO,GAAI,CACnE,M,CAGFP,KAAKE,OAAS,K,CAGhB,MAAAM,GACE,MAAMC,EAAwBT,KAAKU,QAAU,kBAAoB,kBACjE,MAAMC,EAAyBX,KAAKY,SAAW,yCAA2C,kBAC1F,MAAMC,EAAgBb,KAAKc,SAAW,YAAYd,KAAKc,WAAa,GACpE,MAAMC,EAAgBf,KAAKc,SAAW,YAAYd,KAAKc,WAAa,GACpE,MAAME,EAAiBhB,KAAKiB,UAAY,aAAajB,KAAKiB,YAAc,GAExE,OACEC,EAAA,WAASC,MAAM,WAAWC,KAAMpB,KAAKE,QACnCgB,EAAA,2BAAwBlB,KAAKE,OAAOmB,WAAYC,SAAS,IAAIC,KAAK,SAAStB,QAASD,KAAKC,QAAO,YAAY,KAC1GiB,EAAA,OAAKC,MAAO,UAAUN,KACpBK,EAAA,OAAKC,MAAO,GAAGV,KAAyBE,KACtCO,EAAA,aAAWM,KAAK,kBAAkBL,MAAM,uBAAsB,cAAa,YAIjFD,EAAA,OAAKC,MAAO,iBAAiBH,KAAkBD,KAC7CG,EAAA,QAAMM,KAAK,U"}

package/dist/roadtrip/{p-cbc00bfb.entry.js → p-cfc0a3a7.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as r,H as t}from"./p-f3d586b3.js";import{s as i,j as a}from"./p-73fe2357.js";const n=":host{display:flex;align-items:center}.rating-stars{display:inline-flex;flex-shrink:0}.rating-star{color:var(--road-surface-disabled)}.rating-stars.rating-stars--small .icon-sm{width:1rem;height:1rem}.rating-number{margin-left:0.5rem;font-size:var(--road-link-medium);color:var(--road-on-surface);text-decoration:underline}.rating-number.rating-number--small{font-size:var(--road-link-small)}.rating-number.readonly{text-decoration:none}";const e=class{constructor(r){s(this,r);this.size="medium";this.rate=0;this.showreviews=true;this.readonly=false;this.reviews=0;this.reviewsText="reviews";this.url="#"}render(){const s=Math.floor(this.rate);const n=this.rate-Math.floor(this.rate)>0?1:0;const e=this.size!==undefined?`rating-stars rating-stars--${this.size}`:"rating-stars";const o=this.size!==undefined?`rating-number rating-number--${this.size}`:"rating-number";const h=this.readonly==true?`readonly`:"";return r(t,null,r("div",{class:`${e}`},[...Array(s)].map((()=>r("road-icon",{icon:i,size:"sm",color:"warning"}))),[...Array(n)].map((()=>r("road-icon",{icon:a,size:"sm",class:"rating-star"}))),[...Array(5-s-n)].map((()=>r("road-icon",{icon:i,size:"sm",class:"rating-star"})))),this.readonly==false&&this.showreviews&&r("a",{class:`${o}`,href:this.url},"(",this.reviews,this.reviewsText&&` ${this.reviewsText}`,")"),this.readonly==true&&this.showreviews&&r("road-label",{class:`${o} ${h}`},"(",this.reviews,this.reviewsText&&` ${this.reviewsText}`,")"))}};e.style=n;export{e as road_rating};
-//# sourceMappingURL=p-cbc00bfb.entry.js.map
+import{r as s,h as r,H as t}from"./p-f3d586b3.js";import{s as i,j as a}from"./p-ac7a8bca.js";const n=":host{display:flex;align-items:center}.rating-stars{display:inline-flex;flex-shrink:0}.rating-star{color:var(--road-surface-disabled)}.rating-stars.rating-stars--small .icon-sm{width:1rem;height:1rem}.rating-number{margin-left:0.5rem;font-size:var(--road-link-medium);color:var(--road-on-surface);text-decoration:underline}.rating-number.rating-number--small{font-size:var(--road-link-small)}.rating-number.readonly{text-decoration:none}";const e=class{constructor(r){s(this,r);this.size="medium";this.rate=0;this.showreviews=true;this.readonly=false;this.reviews=0;this.reviewsText="reviews";this.url="#"}render(){const s=Math.floor(this.rate);const n=this.rate-Math.floor(this.rate)>0?1:0;const e=this.size!==undefined?`rating-stars rating-stars--${this.size}`:"rating-stars";const o=this.size!==undefined?`rating-number rating-number--${this.size}`:"rating-number";const h=this.readonly==true?`readonly`:"";return r(t,null,r("div",{class:`${e}`},[...Array(s)].map((()=>r("road-icon",{icon:i,size:"sm",color:"warning"}))),[...Array(n)].map((()=>r("road-icon",{icon:a,size:"sm",class:"rating-star"}))),[...Array(5-s-n)].map((()=>r("road-icon",{icon:i,size:"sm",class:"rating-star"})))),this.readonly==false&&this.showreviews&&r("a",{class:`${o}`,href:this.url},"(",this.reviews,this.reviewsText&&` ${this.reviewsText}`,")"),this.readonly==true&&this.showreviews&&r("road-label",{class:`${o} ${h}`},"(",this.reviews,this.reviewsText&&` ${this.reviewsText}`,")"))}};e.style=n;export{e as road_rating};
+//# sourceMappingURL=p-cfc0a3a7.entry.js.map

package/dist/roadtrip/p-dcbaee2f.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as r,a as o}from"./p-f3d586b3.js";const n=":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.card-native:focus{border:1px solid var(--road-primary)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";const a=class{constructor(i){t(this,i);this.roadcardclick=e(this,"roadcardclick",7);this.roadCardClick=e(this,"roadCardClick",7);this.onClick=()=>{var t,e;if(this.value!==undefined){this.roadcardclick.emit({value:this.value,label:(t=this.el.querySelector("road-label"))===null||t===void 0?void 0:t.textContent});this.roadCardClick.emit({value:this.value,label:(e=this.el.querySelector("road-label"))===null||e===void 0?void 0:e.textContent})}};this.elevation="none";this.button=false;this.value=undefined;this.type="button";this.download=undefined;this.href=undefined;this.rel=undefined;this.target=undefined}isClickable(){return this.href!==undefined||this.button}renderCard(){const t=this.isClickable();if(!t){return[i("slot",null)]}const{href:e}=this;const r=t?e===undefined?"button":"a":"div";const o=r==="button"?{type:this.type}:{download:this.download,href:this.href,rel:this.rel,target:this.target};return i(r,Object.assign({},o,{class:"card-native",part:"native",onClick:this.onClick}),i("slot",null))}render(){const{elevation:t}=this;const e=this.elevation?`card-elevation-${t}`:``;return i(r,{class:`${e}`},this.renderCard())}get el(){return o(this)}};a.style=n;export{a as road_card};
+//# sourceMappingURL=p-dcbaee2f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","Card","this","onClick","value","undefined","roadcardclick","emit","label","_a","el","querySelector","textContent","roadCardClick","_b","isClickable","href","button","renderCard","clickable","h","TagType","attrs","type","download","rel","target","Object","assign","class","part","render","elevation","elevationClass","Host"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n  position: relative;\n  box-sizing: border-box;\n  display: block;\n  margin-bottom: var(--margin-bottom, 1rem);\n  background: var(--road-surface);\n  border: 1px solid var(--road-outline-weak);\n  border-radius: var(--road-spacing-02);\n}\n\n:host(.card-elevation-none) {\n  box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n  box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n  box-shadow: var(--road-elevation-average);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 100%;\n  padding: var(--road-spacing-06);\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: center;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  background: var(--road-surface);\n  border: 0;\n  border-radius: 0.25rem;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.card-native:focus{\n  border: 1px solid var(--road-primary);\n}\n\n/* @media (min-width: 768px) {\n\n  .card-native {\n    padding: var(--road-spacing-06);\n  }\n} */\n\na,\nbutton {\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  text-align: center;\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, Host } from '@stencil/core';\n\n/**\n * @slot  - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-card',\n  styleUrl: 'card.css',\n  shadow: true,\n})\nexport class Card {\n\n  @Element() el!: HTMLRoadCardElement;\n\n    /**\n   * The elevation.\n   */\n    @Prop() elevation?: 'none' | 'lowest' | 'average' = 'none';\n\n  /**\n   * If `true`, a button tag will be rendered and the card will be tappable.\n   */\n  @Prop() button: boolean = false;\n\n  /**\n   * value of the card\n   */\n  @Prop() value?: string;\n\n  /**\n   * The type of the button. Only used when an `onclick` or `button` property is present.\n   */\n  @Prop() type: 'submit' | 'reset' | 'button' = 'button';\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download?: string;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the card is clicked and send the `value` of the card\n   */\n  @Event() roadcardclick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadCardClick!: EventEmitter<{\n    value: string | undefined | null;\n    label: string | undefined | null;\n  }>;\n\n  private isClickable(): boolean {\n    return (this.href !== undefined || this.button);\n  }\n\n  private onClick = () => {\n    if(this.value !== undefined) {\n      this.roadcardclick.emit({\n        value: this.value,\n        label: this.el.querySelector('road-label')?.textContent,\n      });\n      this.roadCardClick.emit({\n        value: this.value,\n        label: this.el.querySelector('road-label')?.textContent,\n      });\n    }\n  };\n\n  private renderCard() {\n    const clickable = this.isClickable();\n\n    if (!clickable) {\n     \n      \n      return [\n        <slot/>\n      ];\n      \n    }\n    const { href } = this;\n    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n    const attrs = (TagType === 'button')\n      ? { type: this.type }\n      : {\n        download: this.download,\n        href: this.href,\n        rel: this.rel,\n        target: this.target,\n      };\n\n    return (\n      \n      <TagType\n        {...attrs}\n        class=\"card-native\"\n        part=\"native\"\n        onClick={this.onClick}\n      >\n        <slot/>\n      </TagType>\n    );\n  }\n\n  render() {\n    const { elevation } = this;\n    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n    return (\n      <Host class={`${elevationClass}`}>\n      {this.renderCard()}\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"gEAAA,MAAMA,EAAU,iiC,MCaHC,EAAI,M,mHAoEPC,KAAAC,QAAU,K,QAChB,GAAGD,KAAKE,QAAUC,UAAW,CAC3BH,KAAKI,cAAcC,KAAK,CACtBH,MAAOF,KAAKE,MACZI,OAAOC,EAAAP,KAAKQ,GAAGC,cAAc,iBAAa,MAAAF,SAAA,SAAAA,EAAEG,cAE9CV,KAAKW,cAAcN,KAAK,CACtBH,MAAOF,KAAKE,MACZI,OAAOM,EAAAZ,KAAKQ,GAAGC,cAAc,iBAAa,MAAAG,SAAA,SAAAA,EAAEF,a,kBArEI,O,YAK5B,M,+BAUoB,S,qFA0CtC,WAAAG,GACN,OAAQb,KAAKc,OAASX,WAAaH,KAAKe,M,CAgBlC,UAAAC,GACN,MAAMC,EAAYjB,KAAKa,cAEvB,IAAKI,EAAW,CAGd,MAAO,CACLC,EAAA,a,CAIJ,MAAMJ,KAAEA,GAASd,KACjB,MAAMmB,EAAUF,EAAaH,IAASX,UAAY,SAAW,IAAO,MACpE,MAAMiB,EAASD,IAAY,SACvB,CAAEE,KAAMrB,KAAKqB,MACb,CACAC,SAAUtB,KAAKsB,SACfR,KAAMd,KAAKc,KACXS,IAAKvB,KAAKuB,IACVC,OAAQxB,KAAKwB,QAGjB,OAEEN,EAACC,EAAOM,OAAAC,OAAA,GACFN,EAAK,CACTO,MAAM,cACNC,KAAK,SACL3B,QAASD,KAAKC,UAEdiB,EAAA,a,CAKN,MAAAW,GACE,MAAMC,UAAEA,GAAc9B,KACtB,MAAM+B,EAAiB/B,KAAK8B,UAAY,kBAAkBA,IAAc,GACxE,OACEZ,EAACc,EAAI,CAACL,MAAO,GAAGI,KACf/B,KAAKgB,a"}

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

@@ -1,2 +1,2 @@
-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
+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),tabindex:"0"},o.label)))))}get el(){return r(this)}};i.style=s;export{i as road_autocomplete};
+//# sourceMappingURL=p-dcbb0d20.entry.js.map

package/dist/roadtrip/p-dcbb0d20.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","tabindex"],"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)} tabindex=\"0\">\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,OAAQsB,SAAS,KAC7GF,EAAOpB,U"}

package/dist/roadtrip/{p-414a2791.entry.js → p-e8c9c816.entry.js}

@@ -1,2 +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
+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-ac7a8bca.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-e8c9c816.entry.js.map

package/dist/roadtrip/{p-f5cce766.entry.js → p-ebd19369.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as s,H as e}from"./p-f3d586b3.js";const a=".progress{--border-radius:0.25rem;display:flex;height:0.25rem;overflow:hidden;font-size:var(--road-label-small);background-color:var(--road-surface-disabled);border-radius:var(--border-radius)}.progress-light{background-color:var(--road-overlay-inverse)}.progress-element-info{display:flex;justify-content:space-between;margin-top:0.5rem}.progress-element-info-full-width{display:flex;justify-content:space-between;padding:0 1rem;margin-top:0.5rem}.progress-element-label{font-size:var(--road-label-medium);text-align:left}.progress-element-step{font-size:var(--road-label-medium);text-align:right}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;transition:width 0.6s ease}.progress.progress-primary .progress-bar{background:var(--road-primary)}.progress.progress-secondary .progress-bar{background:var(--road-secondary)}.progress.progress-info .progress-bar{background:var(--road-info-surface-inverse)}.progress.progress-success .progress-bar{background:var(--road-success-surface-inverse)}.progress.progress-warning .progress-bar{background:var(--road-warning-surface-inverse)}.progress.progress-danger .progress-bar{background:var(--road-danger-surface-inverse)}.progress.progress-rating .progress-bar{background:var(--road-rating)}.animation .progress-bar{animation:load 5s normal forwards}@keyframes load{0%{width:0}100%{width:100%}}";const o=class{constructor(s){r(this,s);this.value=0;this.numbersteps="4";this.label="";this.showstep=false;this.animation=false;this.light=false;this.fullwidth=false;this.color="primary"}render(){const r=Math.round(this.value/5/5);const a=this.fullwidth?"progress-element-info-full-width":"progress-element-info";const o=this.light?"progress progress-light":"progress";const i=this.animation?"animation":"";return s(e,{class:"progress-element"},s("div",{class:`${o} progress-${this.color} ${i}`},s("div",{class:"progress-bar",role:"progressbar",style:{width:`${this.value}%`},"aria-valuenow":this.value,"aria-valuemin":"0","aria-valuemax":"100"})),s("div",{class:`${a}`},s("span",{class:"progress-element-label"},this.label),this.showstep&&s("span",{class:"progress-element-step"},r,"/",this.numbersteps)))}};o.style=a;export{o as road_progress};
-//# sourceMappingURL=p-f5cce766.entry.js.map
+import{r,h as s,H as e}from"./p-f3d586b3.js";const a=".progress{--border-radius:0.25rem;display:flex;height:0.25rem;overflow:hidden;font-size:var(--road-label-small);background-color:var(--road-surface-disabled);border-radius:var(--border-radius)}.progress-light{background-color:var(--road-overlay-inverse)}.progress-element-info{display:flex;justify-content:space-between;margin-top:0.5rem}.progress-element-info-full-width{display:flex;justify-content:space-between;padding:0 1rem;margin-top:0.5rem}.progress-element-label{font-size:var(--road-label-medium);text-align:left}.progress-element-step{font-size:var(--road-label-medium);text-align:right}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;transition:width 0.6s ease}.progress.progress-primary .progress-bar{background:var(--road-primary)}.progress.progress-secondary .progress-bar{background:var(--road-secondary)}.progress.progress-info .progress-bar{background:var(--road-info-surface-inverse)}.progress.progress-success .progress-bar{background:var(--road-success-surface-inverse)}.progress.progress-warning .progress-bar{background:var(--road-warning-surface-inverse)}.progress.progress-danger .progress-bar{background:var(--road-danger-surface-inverse)}.progress.progress-rating .progress-bar{background:var(--road-rating)}.animation .progress-bar{animation:load 5s normal forwards}@keyframes load{0%{width:0}100%{width:100%}}";const o=class{constructor(s){r(this,s);this.value=0;this.numbersteps="4";this.label="";this.showstep=false;this.animation=false;this.light=false;this.fullwidth=false;this.color="primary"}render(){const r=Math.round(this.value/5/5);const a=this.fullwidth?"progress-element-info-full-width":"progress-element-info";const o=this.light?"progress progress-light":"progress";const i=this.animation?"animation":"";return s(e,{class:"progress-element"},s("div",{class:`${o} progress-${this.color} ${i}`},s("div",{class:"progress-bar",role:"progressbar",style:{width:`${this.value}%`},"aria-valuenow":this.value,"aria-valuemin":"0","aria-valuemax":"100","aria-label":"progress bar"})),s("div",{class:`${a}`},s("span",{class:"progress-element-label"},this.label),this.showstep&&s("span",{class:"progress-element-step"},r,"/",this.numbersteps)))}};o.style=a;export{o as road_progress};
+//# sourceMappingURL=p-ebd19369.entry.js.map

package/dist/roadtrip/{p-f5cce766.entry.js.map → p-ebd19369.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["progressCss","ProgressBar","render","valueRound","Math","round","this","value","fullwidth","light","animation","h","Host","class","color","role","style","width","label","showstep","numbersteps"],"sources":["src/components/progress/progress.css?tag=road-progress&encapsulation=shadow","src/components/progress/progress.tsx"],"sourcesContent":["/*\n * Progress\n *\n * Index\n * - Progress\n * - Progress Bar\n * - Colors\n */\n\n/**\n * @prop --border-radius: Border radius of the progress\n */\n\n/* PROGRESS\n -------------------- */\n\n.progress{\n  --border-radius: 0.25rem;\n\n  display: flex;\n  height: 0.25rem;\n  overflow: hidden;\n  font-size: var(--road-label-small);\n  background-color: var(--road-surface-disabled);\n  border-radius: var(--border-radius);\n}\n\n.progress-light{\n  background-color: var(--road-overlay-inverse);\n}\n\n\n.progress-element-info {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n}\n\n.progress-element-info-full-width {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 1rem;\n  margin-top: 0.5rem;\n}\n\n.progress-element-label {\n  font-size: var(--road-label-medium);\n  text-align: left;\n}\n\n.progress-element-step {\n  font-size: var(--road-label-medium);\n  text-align: right;\n}\n\n/* PROGRESS BAR\n -------------------- */\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  text-align: center;\n  white-space: nowrap;\n  transition: width 0.6s ease;\n}\n\n/* COLORS\n -------------------- */\n\n.progress.progress-primary .progress-bar {\n  background: var(--road-primary);\n}\n\n.progress.progress-secondary .progress-bar {\n  background: var(--road-secondary);\n}\n\n.progress.progress-info .progress-bar {\n  background: var(--road-info-surface-inverse);\n}\n\n.progress.progress-success .progress-bar {\n  background: var(--road-success-surface-inverse);\n}\n\n.progress.progress-warning .progress-bar {\n  background: var(--road-warning-surface-inverse);\n}\n\n.progress.progress-danger .progress-bar {\n  background: var(--road-danger-surface-inverse);\n}\n\n.progress.progress-rating .progress-bar {\n  background: var(--road-rating);\n}\n\n\n/* ANIMATION\n -------------------- */\n\n.animation .progress-bar{\n  animation: load 5s normal forwards;\n}\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-progress',\n  styleUrl: 'progress.css',\n  shadow: true,\n})\nexport class ProgressBar {\n\n  /**\n   * The value determines how much of the active bar should display.\n   * The value should be between [0, 100].\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The number of steps should be 4 or 5.\n   */\n   @Prop() numbersteps?: '4' | '5' | 'default' = '4';\n\n  /**\n   * Label display in progress bar\n   */\n     @Prop() label: string = '';\n\n  /**\n   * Show step\n   */\n  @Prop() showstep: boolean = false;\n\n  /**\n   * Animation progress bar\n   */\n    @Prop() animation: boolean = false;\n\n  /**\n   * Light progress background\n   */\n  @Prop() light: boolean = false;\n\n  /**\n   * Add padding if the progress is full width\n   */\n   @Prop() fullwidth: boolean = false;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'rating' = 'primary';\n\n  render() {\n\n    const valueRound = Math.round(this.value/5/5);\n    const fullwidth = this.fullwidth ? 'progress-element-info-full-width' : 'progress-element-info';\n    const light = this.light ? 'progress progress-light' : 'progress';\n    const animation = this.animation ? 'animation' : '';\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div class=\"progress-bar\" role=\"progressbar\" style={{ width: `${this.value}%` }} aria-valuenow={this.value} aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span class=\"progress-element-label\">{this.label}</span>\n          {this.showstep && <span class=\"progress-element-step\">{valueRound}/{this.numbersteps}</span>}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"6CAAA,MAAMA,EAAc,04C,MCOPC,EAAW,M,oCAME,E,iBAKuB,I,WAKpB,G,cAKC,M,eAKG,M,WAKN,M,eAKK,M,WAKkE,S,CAEhG,MAAAC,GAEE,MAAMC,EAAaC,KAAKC,MAAMC,KAAKC,MAAM,EAAE,GAC3C,MAAMC,EAAYF,KAAKE,UAAY,mCAAqC,wBACxE,MAAMC,EAAQH,KAAKG,MAAQ,0BAA4B,WACvD,MAAMC,EAAYJ,KAAKI,UAAY,YAAc,GAEjD,OACEC,EAACC,EAAI,CAACC,MAAM,oBACVF,EAAA,OAAKE,MAAO,GAAGJ,cAAkBH,KAAKQ,SAASJ,KAC7CC,EAAA,OAAKE,MAAM,eAAeE,KAAK,cAAcC,MAAO,CAAEC,MAAO,GAAGX,KAAKC,UAAU,gBAAiBD,KAAKC,MAAK,gBAAgB,IAAG,gBAAe,SAE9II,EAAA,OAAKE,MAAO,GAAGL,KACbG,EAAA,QAAME,MAAM,0BAA0BP,KAAKY,OAC1CZ,KAAKa,UAAYR,EAAA,QAAME,MAAM,yBAAyBV,EAAU,IAAGG,KAAKc,c"}
+{"version":3,"names":["progressCss","ProgressBar","render","valueRound","Math","round","this","value","fullwidth","light","animation","h","Host","class","color","role","style","width","label","showstep","numbersteps"],"sources":["src/components/progress/progress.css?tag=road-progress&encapsulation=shadow","src/components/progress/progress.tsx"],"sourcesContent":["/*\n * Progress\n *\n * Index\n * - Progress\n * - Progress Bar\n * - Colors\n */\n\n/**\n * @prop --border-radius: Border radius of the progress\n */\n\n/* PROGRESS\n -------------------- */\n\n.progress{\n  --border-radius: 0.25rem;\n\n  display: flex;\n  height: 0.25rem;\n  overflow: hidden;\n  font-size: var(--road-label-small);\n  background-color: var(--road-surface-disabled);\n  border-radius: var(--border-radius);\n}\n\n.progress-light{\n  background-color: var(--road-overlay-inverse);\n}\n\n\n.progress-element-info {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.5rem;\n}\n\n.progress-element-info-full-width {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 1rem;\n  margin-top: 0.5rem;\n}\n\n.progress-element-label {\n  font-size: var(--road-label-medium);\n  text-align: left;\n}\n\n.progress-element-step {\n  font-size: var(--road-label-medium);\n  text-align: right;\n}\n\n/* PROGRESS BAR\n -------------------- */\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  text-align: center;\n  white-space: nowrap;\n  transition: width 0.6s ease;\n}\n\n/* COLORS\n -------------------- */\n\n.progress.progress-primary .progress-bar {\n  background: var(--road-primary);\n}\n\n.progress.progress-secondary .progress-bar {\n  background: var(--road-secondary);\n}\n\n.progress.progress-info .progress-bar {\n  background: var(--road-info-surface-inverse);\n}\n\n.progress.progress-success .progress-bar {\n  background: var(--road-success-surface-inverse);\n}\n\n.progress.progress-warning .progress-bar {\n  background: var(--road-warning-surface-inverse);\n}\n\n.progress.progress-danger .progress-bar {\n  background: var(--road-danger-surface-inverse);\n}\n\n.progress.progress-rating .progress-bar {\n  background: var(--road-rating);\n}\n\n\n/* ANIMATION\n -------------------- */\n\n.animation .progress-bar{\n  animation: load 5s normal forwards;\n}\n\n@keyframes load {\n\n  0% {\n    width: 0;\n  }\n\n  100% {\n    width: 100%;\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-progress',\n  styleUrl: 'progress.css',\n  shadow: true,\n})\nexport class ProgressBar {\n\n  /**\n   * The value determines how much of the active bar should display.\n   * The value should be between [0, 100].\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The number of steps should be 4 or 5.\n   */\n   @Prop() numbersteps?: '4' | '5' | 'default' = '4';\n\n  /**\n   * Label display in progress bar\n   */\n     @Prop() label: string = '';\n\n  /**\n   * Show step\n   */\n  @Prop() showstep: boolean = false;\n\n  /**\n   * Animation progress bar\n   */\n    @Prop() animation: boolean = false;\n\n  /**\n   * Light progress background\n   */\n  @Prop() light: boolean = false;\n\n  /**\n   * Add padding if the progress is full width\n   */\n   @Prop() fullwidth: boolean = false;\n\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'rating' = 'primary';\n\n  render() {\n\n    const valueRound = Math.round(this.value/5/5);\n    const fullwidth = this.fullwidth ? 'progress-element-info-full-width' : 'progress-element-info';\n    const light = this.light ? 'progress progress-light' : 'progress';\n    const animation = this.animation ? 'animation' : '';\n\n    return (\n      <Host class=\"progress-element\">\n        <div class={`${light} progress-${this.color} ${animation}`}>\n          <div class=\"progress-bar\" role=\"progressbar\" style={{ width: `${this.value}%` }} aria-valuenow={this.value} aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"progress bar\"></div>\n        </div>\n        <div class={`${fullwidth}`}>\n          <span class=\"progress-element-label\">{this.label}</span>\n          {this.showstep && <span class=\"progress-element-step\">{valueRound}/{this.numbersteps}</span>}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"6CAAA,MAAMA,EAAc,04C,MCOPC,EAAW,M,oCAME,E,iBAKuB,I,WAKpB,G,cAKC,M,eAKG,M,WAKN,M,eAKK,M,WAKkE,S,CAEhG,MAAAC,GAEE,MAAMC,EAAaC,KAAKC,MAAMC,KAAKC,MAAM,EAAE,GAC3C,MAAMC,EAAYF,KAAKE,UAAY,mCAAqC,wBACxE,MAAMC,EAAQH,KAAKG,MAAQ,0BAA4B,WACvD,MAAMC,EAAYJ,KAAKI,UAAY,YAAc,GAEjD,OACEC,EAACC,EAAI,CAACC,MAAM,oBACVF,EAAA,OAAKE,MAAO,GAAGJ,cAAkBH,KAAKQ,SAASJ,KAC7CC,EAAA,OAAKE,MAAM,eAAeE,KAAK,cAAcC,MAAO,CAAEC,MAAO,GAAGX,KAAKC,UAAU,gBAAiBD,KAAKC,MAAK,gBAAgB,IAAG,gBAAe,MAAK,aAAY,kBAE/JI,EAAA,OAAKE,MAAO,GAAGL,KACbG,EAAA,QAAME,MAAM,0BAA0BP,KAAKY,OAC1CZ,KAAKa,UAAYR,EAAA,QAAME,MAAM,yBAAyBV,EAAU,IAAGG,KAAKc,c"}