@roadtrip/components 3.17.0 → 3.18.0

package/dist/collection/components/select-filter/select-filter.js

@@ -19,9 +19,17 @@ export class SelectFilter {
         value: value.toString(),
         label: label,
       });
+      this.activeIndex = -1;
+    };
+    this.handleOptionMouseOver = (index) => {
+      this.activeIndex = index;
+    };
+    this.handleOptionClick = (value, label) => {
+      this.onClick(value, label);
     };
     this.isOpen = false;
     this.currentValue = '';
+    this.activeIndex = -1;
     this.options = [];
     this.parameters = {
       keys: ["value", "label"],
@@ -51,13 +59,35 @@ export class SelectFilter {
       }
     }
   }
-  render() {
+  handleKeydown(event) {
+    if (this.isOpen) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        this.activeIndex = (this.activeIndex + 1) % this.filteredOptions.length;
+      }
+      else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        this.activeIndex = (this.activeIndex - 1 + this.filteredOptions.length) % this.filteredOptions.length;
+      }
+      else if (event.key === 'Enter') {
+        event.preventDefault();
+        const activeOption = this.filteredOptions[this.activeIndex];
+        if (activeOption) {
+          this.onClick(activeOption.item.value, activeOption.item.label);
+        }
+      }
+    }
+  }
+  get filteredOptions() {
     const fuseSearch = new Fuse(this.options, this.parameters);
-    const options = this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);
+    return this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);
+  }
+  render() {
+    const options = this.filteredOptions;
     const isActive = this.isActive ? 'true' : 'false';
     const notActive = this.isActive ? '' : 'not-active';
     return (h(Host, { "is-active": isActive }, h("slot", null), this.isOpen &&
-      h("ul", { class: `${notActive} select-filter-list`, role: "listbox" }, options.map(option => (h("li", { class: "select-filter-item", role: "option", onClick: () => this.onClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), innerHTML: option.item.label }))))));
+      h("ul", { class: `${notActive} select-filter-list`, role: "listbox" }, options.map((option, idx) => (h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: () => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, "")), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 }))))));
   }
   static get is() { return "road-select-filter"; }
   static get encapsulation() { return "scoped"; }
@@ -153,7 +183,8 @@ export class SelectFilter {
   static get states() {
     return {
       "isOpen": {},
-      "currentValue": {}
+      "currentValue": {},
+      "activeIndex": {}
     };
   }
   static get events() {
@@ -165,7 +196,7 @@ export class SelectFilter {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted the value and label of the option selected."
+          "text": ""
         },
         "complexType": {
           "original": "{\n    value: string | undefined | null,\n    label: string\n  }",
@@ -179,10 +210,7 @@ export class SelectFilter {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
+          "tags": [],
           "text": ""
         },
         "complexType": {
@@ -236,6 +264,12 @@ export class SelectFilter {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "keydown",
+        "method": "handleKeydown",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/select-filter/select-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-filter.js","sourceRoot":"","sources":["../../../src/components/select-filter/select-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Listen, Prop, State, h, Event, EventEmitter } from '@stencil/core';\nimport Fuse from 'fuse.js';\n\n/**\n * @slot  - Input element for the widget, it should be a road-input element.\n */\n\n@Component({\n  tag: 'road-select-filter',\n  styleUrl: 'select-filter.css',\n  scoped: true,\n})\nexport class SelectFilter {\n\n  @Element() el!: HTMLRoadSelectFilterElement;\n\n  @State() isOpen: boolean = false;\n\n  @State() currentValue: string = '';\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n  }> = [];\n\n  /**\n   * Options to pass to the fuse.js instance.\n   * See https://fusejs.io/api/options.html for valid options\n   */\n  @Prop() parameters: any = {\n    keys: [\"value\", \"label\"],\n    threshold: 0.3,\n    ignoreLocation: true,\n  };\n\n  /**\n   * If `true`, add class Active\n   */\n   @Prop() isActive: boolean = false;\n\n  /**\n   * If `false`, the user can submit custom value\n   */\n  @Prop() onlySelect: boolean = true;\n\n  @Listen('roadFocus')\n  @Listen('roadfocus')\n  handleFocus() {\n    this.isOpen = true;\n    this.isActive = true;\n  }\n\n  @Listen('roadBlur')\n  @Listen('roadblur')\n  handleBlur() {\n    this.isActive = false;\n  }\n\n  @Listen('roadChange')\n  @Listen('roadchange')\n  handleChange(event: CustomEvent) {\n    this.currentValue = event.detail.value.toLowerCase();\n  }\n\n  @Listen('click', { target: 'document' })\n  onClickOutside(event: MouseEvent) {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n      this.isActive = false;\n      const value = (this.el.querySelector('road-input') as HTMLRoadInputElement).value;\n      if (this.onlySelect && !this.options.some(option => option['label'] === value)) {\n        (this.el.querySelector('road-input') as HTMLRoadInputElement).value = '';\n      }\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 = label;\n    if (document.getElementsByClassName('phone-number-label-icon').length > 0) {\n      (this.el.querySelector('road-icon') as HTMLRoadIconElement).name = 'flag-'+ label;\n    }\n    this.isOpen = 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    const fuseSearch = new Fuse(this.options, this.parameters);\n    const options = this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);\n    const isActive = this.isActive ? 'true' : 'false';\n    const notActive = this.isActive ? '' : 'not-active';\n\n    return (\n      <Host is-active={isActive}>\n        <slot/>\n        {this.isOpen &&\n          <ul class={`${notActive} select-filter-list`} role=\"listbox\">\n            {options.map(option => (\n              <li\n                class=\"select-filter-item\"\n                role=\"option\"\n                onClick={() => this.onClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, \"\"))}\n                innerHTML={option.item.label}\n              >\n              </li>\n            ))}\n          </ul>}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select-filter.js","sourceRoot":"","sources":["../../../src/components/select-filter/select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtG,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B;;GAEG;AAOH,MAAM,OAAO,YAAY;;IAuGf,YAAO,GAAG,CAAC,KAAsB,EAAE,KAAa,EAAE,EAAE;MACzD,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,GAAG,KAAK,CAAC;MAC5E,IAAI,QAAQ,CAAC,sBAAsB,CAAC,yBAAyB,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;QACxE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAyB,CAAC,IAAI,GAAG,OAAO,GAAG,KAAK,CAAC;OACpF;MACD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;QACvB,KAAK,EAAE,KAAK;OACb,CAAC,CAAC;MACH,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACrB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;QACvB,KAAK,EAAE,KAAK;OACb,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;IACxB,CAAC,CAAC;IAEM,0BAAqB,GAAG,CAAC,KAAa,EAAE,EAAE;MAChD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,KAAsB,EAAE,KAAa,EAAE,EAAE;MACpE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;kBA1HyB,KAAK;wBAEA,EAAE;uBAEH,CAAC,CAAC;mBAQ5B,EAAE;sBAMmB;MACxB,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;MACxB,SAAS,EAAE,GAAG;MACd,cAAc,EAAE,IAAI;KACrB;oBAK2B,KAAK;sBAKH,IAAI;;EAIlC,WAAW;IACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;EACvB,CAAC;EAID,UAAU;IACR,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EACxB,CAAC;EAID,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;EACvD,CAAC;EAGD,cAAc,CAAC,KAAiB;IAC9B,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;MAC1D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;MACtB,MAAM,KAAK,GAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,CAAC;MAClF,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,CAAC,EAAE;QAC7E,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAA0B,CAAC,KAAK,GAAG,EAAE,CAAC;OAC1E;KACF;EACH,CAAC;EAGD,aAAa,CAAC,KAAoB;IAChC,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;OACzE;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;QAClC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;OACvG;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAI,YAAY,EAAE;UAChB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChE;OACF;KACF;EACH,CAAC;EAED,IAAI,eAAe;IACjB,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC3D,OAAO,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACpJ,CAAC;EAqCD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;IACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAClD,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IAEpD,OAAO,CACL,EAAC,IAAI,iBAAY,QAAQ;MACvB,eAAQ;MACP,IAAI,CAAC,MAAM;QACV,UAAI,KAAK,EAAE,GAAG,SAAS,qBAAqB,EAAE,IAAI,EAAC,SAAS,IACzD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,UACE,KAAK,EAAE,sBAAsB,IAAI,CAAC,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACvE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC1D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC,EACxG,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAClD,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAC5B,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAExC,CACN,CAAC,CACC,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Listen, Prop, State, h, Event, EventEmitter } from '@stencil/core';\nimport Fuse from 'fuse.js';\n\n/**\n * @slot  - Input element for the widget, it should be a road-input element.\n */\n\n@Component({\n  tag: 'road-select-filter',\n  styleUrl: 'select-filter.css',\n  scoped: true,\n})\nexport class SelectFilter {\n\n  @Element() el!: HTMLRoadSelectFilterElement;\n\n  @State() isOpen: boolean = false;\n\n  @State() currentValue: string = '';\n\n  @State() activeIndex: number = -1;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n  }> = [];\n\n  /**\n   * Options to pass to the fuse.js instance.\n   * See https://fusejs.io/api/options.html for valid options\n   */\n  @Prop() parameters: any = {\n    keys: [\"value\", \"label\"],\n    threshold: 0.3,\n    ignoreLocation: true,\n  };\n\n  /**\n   * If `true`, add class Active\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * If `false`, the user can submit custom value\n   */\n  @Prop() onlySelect: boolean = true;\n\n  @Listen('roadFocus')\n  @Listen('roadfocus')\n  handleFocus() {\n    this.isOpen = true;\n    this.isActive = true;\n  }\n\n  @Listen('roadBlur')\n  @Listen('roadblur')\n  handleBlur() {\n    this.isActive = false;\n  }\n\n  @Listen('roadChange')\n  @Listen('roadchange')\n  handleChange(event: CustomEvent) {\n    this.currentValue = event.detail.value.toLowerCase();\n  }\n\n  @Listen('click', { target: 'document' })\n  onClickOutside(event: MouseEvent) {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n      this.isActive = false;\n      const value = (this.el.querySelector('road-input') as HTMLRoadInputElement).value;\n      if (this.onlySelect && !this.options.some(option => option['label'] === value)) {\n        (this.el.querySelector('road-input') as HTMLRoadInputElement).value = '';\n      }\n    }\n  }\n\n  @Listen('keydown', { target: 'window' })\n  handleKeydown(event: KeyboardEvent) {\n    if (this.isOpen) {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        this.activeIndex = (this.activeIndex + 1) % this.filteredOptions.length;\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        this.activeIndex = (this.activeIndex - 1 + this.filteredOptions.length) % this.filteredOptions.length;\n      } else if (event.key === 'Enter') {\n        event.preventDefault();\n        const activeOption = this.filteredOptions[this.activeIndex];\n        if (activeOption) {\n          this.onClick(activeOption.item.value, activeOption.item.label);\n        }\n      }\n    }\n  }\n\n  get filteredOptions() {\n    const fuseSearch = new Fuse(this.options, this.parameters);\n    return this.currentValue === '' ? this.options.map((doc, idx) => ({ item: doc, score: 1, refIndex: idx })) : fuseSearch.search(this.currentValue);\n  }\n\n  @Event() roadselected!: EventEmitter<{\n    value: string | undefined | null,\n    label: string\n  }>;\n\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 = label;\n    if (document.getElementsByClassName('phone-number-label-icon').length > 0) {\n      (this.el.querySelector('road-icon') as HTMLRoadIconElement).name = 'flag-' + label;\n    }\n    this.isOpen = 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    this.activeIndex = -1;\n  };\n\n  private handleOptionMouseOver = (index: number) => {\n    this.activeIndex = index;\n  };\n\n  private handleOptionClick = (value: string | number, label: string) => {\n    this.onClick(value, label);\n  };\n\n  render() {\n    const options = this.filteredOptions;\n    const isActive = this.isActive ? 'true' : 'false';\n    const notActive = this.isActive ? '' : 'not-active';\n\n    return (\n      <Host is-active={isActive}>\n        <slot />\n        {this.isOpen &&\n          <ul class={`${notActive} select-filter-list`} role=\"listbox\">\n            {options.map((option, idx) => (\n              <li\n                class={`select-filter-item ${this.activeIndex === idx ? 'active' : ''}`}\n                role=\"option\"\n                aria-selected={this.activeIndex === idx ? 'true' : 'false'}\n                onClick={() => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, \"\"))}\n                onMouseOver={() => this.handleOptionMouseOver(idx)}\n                innerHTML={option.item.label}\n                tabindex={this.activeIndex === idx ? 0 : -1}\n              >\n              </li>\n            ))}\n          </ul>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select-filter/select-filter.stories.js

@@ -54,9 +54,9 @@ export default {
       ignoreLocation: true,
     },
     ' ': `<road-input-group>
-    <road-input input-id="brand" sizes="xl" label="Brand"></road-input>
-    <label slot="append" for="brand">
-      <road-icon name="arrow-drop" focusable="false"></road-icon>
+    <road-input input-id="brand-input" sizes="xl" label="Brand"></road-input>
+    <label slot="append" for="brand-label" aria-label="select">
+      <road-icon name="arrow-drop" focusable="false" aria-hidden="true" role="button"></road-icon>
     </label>
   </road-input-group>`,
   },
@@ -75,7 +75,7 @@ WithValue.args = {
   ' ': `<road-input-group>
     <road-input input-id="brand2" sizes="xl" label="Brand" value="Audi"></road-input>
     <label slot="append" for="brand2">
-      <road-icon name="arrow-drop" focusable="false"></road-icon>
+      <road-icon name="arrow-drop" focusable="false" role="button"></road-icon>
     </label>
   </road-input-group>`,
 };
@@ -85,7 +85,7 @@ Disabled.args = {
   ' ': `<road-input-group>
     <road-input input-id="brand3" sizes="xl" label="Brand" disabled></road-input>
     <label slot="append" for="brand3">
-      <road-icon name="arrow-drop" focusable="false"></road-icon>
+      <road-icon name="arrow-drop" focusable="false" role="button"></road-icon>
     </label>
   </road-input-group>`,
 };
@@ -95,7 +95,7 @@ Error.args = {
   ' ': `<road-input-group>
     <road-input input-id="brand4" sizes="xl" label="Brand" error="Select a Brand"></road-input>
     <label slot="append" for="brand4">
-      <road-icon name="arrow-drop" focusable="false"></road-icon>
+      <road-icon name="arrow-drop" focusable="false" role="button"></road-icon>
     </label>
   </road-input-group>`,
 };
@@ -119,7 +119,7 @@ withHTML.args = {
   ' ': `<road-input-group>
     <road-input input-id="controls" sizes="xl" label="Controls" class="mb-0"></road-input>
     <label slot="append" for="brand">
-      <road-icon name="arrow-drop" focusable="false"></road-icon>
+      <road-icon name="arrow-drop" focusable="false" role="button"></road-icon>
     </label>
   </road-input-group>`,
 };
@@ -144,7 +144,7 @@ PhoneNumber.args = {
     <road-input input-id="brand5" sizes="xl" label="Label" value="" class="phone-number" type="tel"></road-input>
     <label slot="prepend" for="brand5" class="pl-16 phone-number-label">
       <road-icon name="flag-france" size="md" class="phone-number-label-icon"></road-icon>
-      <road-icon name="arrow-drop" focusable="false"></road-icon>
+      <road-icon name="arrow-drop" focusable="false" role="button"></road-icon>
     </label>
   </road-input-group>`,
 };

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

@@ -200,12 +200,12 @@ export const LeadingIcon = Template.bind({});
 LeadingIcon.args = {
   top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-list">
-      <road-icon name="garage"></road-icon>
+      <road-icon name="garage" aria-hidden="true"></road-icon>
       <road-label>List</road-label>
     </road-tab-button>
 
     <road-tab-button tab="tab-map">
-      <road-icon name="location-pin-all"></road-icon>
+      <road-icon name="location-pin-all" aria-hidden="true"></road-icon>
       <road-label>Map</road-label>
     </road-tab-button>
   </road-tab-bar>`,
@@ -222,17 +222,17 @@ export const TopIcon = Template.bind({});
 TopIcon.args = {
   top: `<road-tab-bar slot="top" expand="true">
     <road-tab-button tab="tab-shops" layout="icon-top">
-      <road-icon name="shop"></road-icon>
+      <road-icon name="shop" aria-hidden="true"></road-icon>
       <road-label>Shops</road-label>
     </road-tab-button>
 
     <road-tab-button tab="tab-warehouses" layout="icon-top">
-      <road-icon name="warehouse"></road-icon>
+      <road-icon name="warehouse" aria-hidden="true"></road-icon>
       <road-label>Warehouses</road-label>
     </road-tab-button>
 
     <road-tab-button tab="tab-factories" layout="icon-top">
-      <road-icon name="factory"></road-icon>
+      <road-icon name="factory" aria-hidden="true"></road-icon>
       <road-label>Factories</road-label>
     </road-tab-button>
   </road-tab-bar>`,

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

@@ -122,7 +122,7 @@
   display: block;
   font-size: var(--road-body-medium);
   line-height: 1.5;
-  color: var(--road-on-surface-extra-weak);
+  color: var(--road-on-surface-weak);
   pointer-events: none;
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   transform-origin: 0 0;
@@ -183,5 +183,5 @@
 .helper {
   margin-top: 0.5rem;
   font-size: var(--road-helper-medium);
-  color: var(--road-grey-500);
+  color: var(--road-on-surface-weak);
 }

package/dist/collection/components/toolbar/toolbar.css

@@ -110,7 +110,6 @@
   align-self: auto;
   font-size: var(--road-font-size-14);
   font-weight: 400;
-  background: var(--road-surface);
   border-right: 1px solid var(--road-outline);
   border-radius: 0;
 }
@@ -123,7 +122,6 @@
 
   font-size: var(--road-font-size-14);
   font-weight: 400;
-  background: var(--road-surface);
   border-left: 1px solid var(--road-outline);
   border-radius: 0;
 }

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

@@ -61,10 +61,10 @@ export const Playground = Template.bind({});
 
 export const withButtons = Template.bind({});
 withButtons.args = {
-  start: `<road-button slot="start" class="border-left-0">
+  start: `<road-button slot="start" class="border-left-0" tabindex="0" color="ghost">
     <road-icon name="navigation-chevron" rotate="180"></road-icon>
   </road-button>`,
-  end: `<road-button slot="end">
+  end: `<road-button slot="end" tabindex="0" color="ghost">
     <road-icon name="more-horizontal"></road-icon>
   </road-button>`,
 };
@@ -73,13 +73,13 @@ withButtons.args = {
 export const headerHomeApp = Template.bind({});
 headerHomeApp.args = {
   ' ': ``,
-  start: `<road-button slot="start" class="border-0 align-self-auto">
+  start: `<road-button slot="start" class="border-0 align-self-auto" color="ghost">
     <road-icon name="pass-maintain-logo-solid-color"></road-icon> <road-label class="font-weight-bold h6 mb-0 ml-8">App Name</road-label>
   </road-button>`,
-  secondary: `<road-button class="border-0 align-items-center" slot="secondary">
+  secondary: `<road-button class="border-0 align-items-center" slot="secondary" color="ghost">
     <road-icon name="alert-question-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Help</road-label>
   </road-button>`,
-  end: `<road-button class="d-none d-xl-flex align-items-center" slot="end">
+  end: `<road-button class="d-none d-xl-flex align-items-center" slot="end" color="ghost">
     <road-icon name="speak-advice-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Feedback</road-label>
   </road-button>
   </div>`,
@@ -89,13 +89,13 @@ headerHomeApp.args = {
 export const headerApp = Template.bind({});
 headerApp.args = {
   ' ': `<road-toolbar-title>Title</road-toolbar-title>`,
-  start: `<road-button slot="start" class="border-left-0">
+  start: `<road-button slot="start" class="border-left-0" color="ghost">
     <road-icon name="navigation-chevron" rotate="180"></road-icon>
   </road-button>`,
-  secondary: `<road-button class="border-0 align-items-center" slot="secondary">
+  secondary: `<road-button class="border-0 align-items-center" slot="secondary" color="ghost">
     <road-icon name="alert-question-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Help</road-label>
   </road-button>`,
-  end: `<road-button class="d-none d-xl-flex align-items-center" slot="end">
+  end: `<road-button class="d-none d-xl-flex align-items-center" slot="end" color="ghost">
     <road-icon name="speak-advice-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Feedback</road-label>
   </road-button>
   </div>`,

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

@@ -48,7 +48,7 @@ export class Tooltip {
     return (h(Host, { onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, "data-tooltip-position": this.position }, h("slot", { "aria-describedby": this.tooltipId }), h("div", { part: "tooltip", id: this.tooltipId, class: {
         tooltip: true,
         'tooltip-open': this.isOpen,
-      }, role: "tooltip", "aria-hidden": !this.isOpen }, this.content, h("slot", { name: "tooltip-content" }))));
+      }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, h("slot", { name: "tooltip-content" }))));
   }
   static get is() { return "road-tooltip"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE1E;;;;GAIG;AAOH,MAAM,OAAO,OAAO;;IA0DV,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;qBAnE0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBASP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;EAEjC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAoBO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,2BACE,IAAI,CAAC,QAAQ;MAEpC,gCAAwB,IAAI,CAAC,SAAS,GAAI;MAE1C,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,cAAc,EAAE,IAAI,CAAC,MAAM;SAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM;QAExB,IAAI,CAAC,OAAO;QACb,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["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"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE1E;;;;GAIG;AAOH,MAAM,OAAO,OAAO;;IA0DV,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;qBAnE0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBASP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;EAEjC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAoBO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,2BACE,IAAI,CAAC,QAAQ;MAEpC,gCAAwB,IAAI,CAAC,SAAS,GAAI;MAE1C,WACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,cAAc,EAAE,IAAI,CAAC,MAAM;SAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QAE3C,IAAI,CAAC,OAAO;QACb,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,UAAU,GAAG,CAAC,CAAC","sourcesContent":["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"]}

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

@@ -15,7 +15,7 @@ export const Playground = (args) => html`
   position="${ifDefined(args.position)}" 
   trigger="${ifDefined(args.trigger)}"
   contentalign="${ifDefined(args.contentAlign)}">
-  <road-icon name="alert-info" color="secondary"></road-icon>
+  <road-icon name="alert-info" color="secondary" role="button"></road-icon>
   ${unsafeHTML(args['tooltip-content'])}
 </road-tooltip>
 `;
@@ -116,7 +116,7 @@ export const MouseOver = () => html`
 <road-tooltip position="bottom" style="width: 100%;--width: 95%;--max-width: 100%;">
   <road-item class="bg-light mb-16">
     <road-avatar class="flex-shrink-0 mr-16">
-      <road-icon lazy size="3x" name="brake"></road-icon>
+      <road-icon lazy size="3x" name="brake" role="button"></road-icon>
     </road-avatar>
     <road-label>
       <p class="h9 mb-8">Braking</p>
@@ -134,7 +134,7 @@ export const MouseOver = () => html`
 export const Click = () => html`
 <road-tooltip content="Fit & small tooltip" position="right" trigger="click">
   <road-button class="mb-0">
-    <road-icon name="alert-info" color="secondary"></road-icon>
+    <road-icon name="alert-info" color="secondary" role="button"></road-icon>
   </road-button>
 </road-tooltip>
 `;

package/dist/esm/{index-891decf5.js → index-7a0158a4.js}

@@ -12,6 +12,6 @@ const navigationClose = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-h
 const starHalfColor = '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 star = '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 { navigationClose as a, navigationAddLess as b, checkWide as c, alertInfoOutline as d, alertDangerOutline as e, alertWarningOutline as f, alertSuccessOutline as g, navigationAddMoreSolid as h, navigationAddLessSolid as i, starHalfColor as j, licensePlateStarEu as l, navigationChevron as n, star as s };
+export { navigationClose as a, navigationAddLess as b, checkWide as c, alertInfoOutline as d, alertDangerOutline as e, alertWarningOutline as f, alertSuccessOutline as g, navigationAddLessSolid as h, navigationAddMoreSolid as i, starHalfColor as j, licensePlateStarEu as l, navigationChevron as n, star as s };
 
-//# sourceMappingURL=index-891decf5.js.map
+//# sourceMappingURL=index-7a0158a4.js.map