@roadtrip/components 3.17.0 → 3.18.0

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

@@ -54,25 +54,25 @@ export default {
     'is-medium': null,
     list: `<road-list slot="list">
     <road-item button class="border-0">
-      <road-icon slot="start" name="picture" size="md"></road-icon>
+      <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
       <road-label>
         Label
       </road-label>
     </road-item>
     <road-item button class="border-0">
-      <road-icon slot="start" name="picture" size="md"></road-icon>
+      <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
       <road-label>
         Label
       </road-label>
     </road-item>
     <road-item button class="border-0">
-      <road-icon slot="start" name="picture" size="md"></road-icon>
+      <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
       <road-label>
         Label
       </road-label>
     </road-item>
     <road-item button class="border-0">
-      <road-icon slot="start" name="picture" size="md"></road-icon>
+      <road-icon slot="start" name="picture" size="md" aria-hidden="true"></road-icon>
       <road-label>
         Label
       </road-label>

package/dist/collection/components/global-navigation/global-navigation.js

@@ -24,7 +24,7 @@ export class GlobalNavigation {
     this.selectedTabChanged();
   }
   render() {
-    return (h(Host, { role: "tablist" }, h("slot", null)));
+    return (h(Host, { role: "application" }, h("slot", null)));
   }
   static get is() { return "road-global-navigation"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/global-navigation/global-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-navigation.js","sourceRoot":"","sources":["../../../src/components/global-navigation/global-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,wBAAwB,CAAC;AAEhC;;GAEG;AAOH,MAAM,OAAO,gBAAgB;;;;EAO3B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;EACH,CAAC;EASD,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;EACnC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS;MAEd,eAAO,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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"]}
+{"version":3,"file":"global-navigation.js","sourceRoot":"","sources":["../../../src/components/global-navigation/global-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,wBAAwB,CAAC;AAEhC;;GAEG;AAOH,MAAM,OAAO,gBAAgB;;;;EAO3B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;EACH,CAAC;EASD,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;EACnC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,aAAa;MAElB,eAAO,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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"]}

package/dist/collection/components/global-navigation/global-navigation.stories.js

@@ -40,32 +40,32 @@ export default {
   },
   args: {
     toolbar: `
-    <road-toolbar>
-        <road-button slot="start" class="border-0 align-self-auto">
-        <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-toolbar role="tabpanel">
+        <road-button slot="start" class="border-0 align-self-auto" color="ghost">
+        <road-icon name="pass-maintain-logo-solid-color" role="img"></road-icon> <road-label class="font-weight-bold h6 mb-0 ml-8">App Name</road-label>
       </road-button>
       
       
-      <road-button class="border-0 align-items-center" slot="secondary">
-        <road-icon name="alert-question-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Help</road-label>
+      <road-button class="border-0 align-items-center" slot="secondary" color="ghost">
+        <road-icon name="alert-question-outline" role="img"></road-icon><road-label class="d-none d-xl-block mx-8">Help</road-label>
       </road-button>
-      <road-button class="d-none d-xl-flex align-items-center" slot="end">
-        <road-icon name="speak-advice-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Feedback</road-label>
+      <road-button class="d-none d-xl-flex align-items-center" slot="end" color="ghost">
+        <road-icon name="speak-advice-outline" role="img"></road-icon><road-label class="d-none d-xl-block mx-8">Feedback</road-label>
       </road-button>
       
     </road-toolbar>
     `,
     navbar: `
-    <road-navbar>
+    <road-navbar role="tabpanel">
     <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
       <road-list slot="list">
-        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;" class="edit-profil">
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;" class="edit-profil border-0">
           <road-icon slot="start" name="edit-outline" size="md"></road-icon>
           <road-label style="font-size: 0.75rem">
             Edit profile
           </road-label>
         </road-item>
-        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;" class="border-0">
           <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
           <road-label style="font-size: 0.75rem">
             Log out
@@ -98,63 +98,63 @@ export default {
         });
         </script>
 
-    <road-navbar-item tab="tab-home">
+    <road-navbar-item tab="tab-home" role="tabpanel">
     <road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
-      <road-icon name="navigation-home-outline"></road-icon>
+      <road-icon name="navigation-home-outline" role="img"></road-icon>
       <road-label class="font-weight-bold">Home</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-search">
+  <road-navbar-item tab="tab-search" role="tabpanel">
     <road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
-      <road-icon name="search"></road-icon>
+      <road-icon name="search" role="img"></road-icon>
       <road-label class="font-weight-bold">Search</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalog">
+  <road-navbar-item tab="tab-catalog" role="tabpanel">
     <road-tooltip content="Print" position="right" trigger="hover" contentalign="center">
-      <road-icon name="print-outline"></road-icon>
+      <road-icon name="print-outline" role="img"></road-icon>
       <road-label class="font-weight-bold">Print</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex" role="tabpanel">
     <road-tooltip content="Notifications" position="right" trigger="hover" contentalign="center">
-      <road-icon name="alert-notification-outline"></road-icon>
+      <road-icon name="alert-notification-outline" role="img"></road-icon>
       <road-label class="font-weight-bold">Notifications</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex" role="tabpanel">
     <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
-      <road-icon name="scan"></road-icon>
+      <road-icon name="scan" role="img"></road-icon>
       <road-label class="font-weight-bold">Scan</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex" role="tabpanel">
     <road-tooltip content="Catalogue" position="right" trigger="hover" contentalign="center">
-      <road-icon name="file-catalog"></road-icon>
+      <road-icon name="file-catalog" role="img"></road-icon>
       <road-label class="font-weight-bold">Catalogue</road-label>
     </road-tooltip>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex" role="tabpanel">
     <road-tooltip content="Diagnostic" position="right" trigger="hover" contentalign="center">
-      <road-icon name="Diagnostic"></road-icon>
+      <road-icon name="Diagnostic" role="img"></road-icon>
       <road-label class="font-weight-bold">Diagnostic</road-label>
     </road-toolip>
   </road-navbar-item>
 
   <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
-    <road-icon name="navigation-menu"></road-icon>
+    <road-icon name="navigation-menu" role="img"></road-icon>
     <road-label>Menu</road-label>
   </road-navbar-item>
   
   <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu">
   <div class="p-16">
-  <road-item class="mb-16 text-left bg-light profil">
+  <road-item class="mb-16 text-left bg-light profil" tabindex="0">
     <road-avatar slot="start" class="mr-16">  
       <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
     </road-avatar>
@@ -166,22 +166,22 @@ export default {
     <road-icon slot="end" name="edit-outline" size="sm" class="mr-8"></road-icon>
   </road-item>
 
-  <road-item class="bg-white">
+  <road-item class="bg-white" button="true">
     <road-icon name="scan"></road-icon>
     Scan
   </road-item>
 
-  <road-item class="bg-white">
+  <road-item class="bg-white" button="true">
     <road-icon name="file-catalog"></road-icon>
     Catalogue
   </road-item>
 
-  <road-item class="bg-white">
+  <road-item class="bg-white" button="true">
     <road-icon name="Diagnostic"></road-icon>
     Diagnostic
   </road-item>
 
-  <road-item class="bg-white border-top ">
+  <road-item class="bg-white border-top" button="true">
     <road-icon name="log-out"></road-icon>
     Log out
   </road-item>
@@ -270,48 +270,48 @@ Page.args = {
       <road-label slot="email">email</road-label>
     </road-profil-dropdown>
 
-    <road-navbar-item tab="tab-home">
+    <road-navbar-item tab="tab-home" role="menu">
     <road-icon name="navigation-home-outline"></road-icon>
     <road-label style="font-size:0.75rem;">Home</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-search">
+  <road-navbar-item tab="tab-search" role="menu">
     <road-icon name="search"></road-icon>
     <road-label style="font-size:0.75rem;">Search</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalog">
+  <road-navbar-item tab="tab-catalog" role="menu">
     <road-icon name="print-outline"></road-icon>
     <road-label style="font-size:0.75rem;">Print</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex" role="menu">
     <road-icon name="alert-notification-outline"></road-icon>
     <road-label style="font-size:0.75rem;">Notifications</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex" role="menu">
     <road-icon name="scan"></road-icon>
     <road-label>Scan</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex" role="menu">
     <road-icon name="file-catalog"></road-icon>
     <road-label style="font-size:0.75rem;">Catalogue</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
+  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex" role="menu">
     <road-icon name="Diagnostic"></road-icon>
     <road-label style="font-size:0.75rem;">Diagnostic</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
+  <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu" role="menu">
     <road-icon name="navigation-menu"></road-icon>
     <road-label style="font-size:0.75rem;">Menu</road-label>
   </road-navbar-item>
   
   <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu">
-  <road-item class="mb-16 text-left bg-light profil">
+  <road-item class="mb-16 text-left bg-light profil" tabindex="0">
     <road-avatar slot="start" class="mr-16">  
       <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
     </road-avatar>

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

@@ -14,6 +14,7 @@ export const Playground = ({ color, name, size, rotate, lazy }) => html`
   size="${ifDefined(size)}" 
   rotate="${ifDefined(rotate)}" 
   lazy="${ifDefined(lazy)}"
+  role="img"
 ></road-icon>
 `;
 Playground.args = {
@@ -68,88 +69,88 @@ Playground.argTypes = {
 };
 
 export const Sizes = () => html`
-<road-icon name="alert-success" size="sm"></road-icon>
-<road-icon name="alert-success" size="md"></road-icon>
-<road-icon name="alert-success" size="lg"></road-icon>
-<road-icon name="alert-success" size="3x"></road-icon>
-<road-icon name="alert-success" size="4x"></road-icon>
+<road-icon name="alert-success" size="sm" role="img"></road-icon>
+<road-icon name="alert-success" size="md" role="img"></road-icon>
+<road-icon name="alert-success" size="lg" role="img"></road-icon>
+<road-icon name="alert-success" size="3x" role="img"></road-icon>
+<road-icon name="alert-success" size="4x" role="img"></road-icon>
 `;
 
 export const Rotate = () => html`
-<road-icon name="navigation-chevron"></road-icon>
-<road-icon name="navigation-chevron" rotate="90"></road-icon>
-<road-icon name="navigation-chevron" rotate="180"></road-icon>
-<road-icon name="navigation-chevron" rotate="270"></road-icon>
+<road-icon name="navigation-chevron" role="img"></road-icon>
+<road-icon name="navigation-chevron" rotate="90" role="img"></road-icon>
+<road-icon name="navigation-chevron" rotate="180" role="img"></road-icon>
+<road-icon name="navigation-chevron" rotate="270" role="img"></road-icon>
 `;
 
 export const Colors = () => html`
-<road-icon name="location-pin-garage-norauto" color="primary"></road-icon>
-<road-icon name="location-pin-garage" color="secondary"></road-icon>
-<road-icon name="location-pin-all" color="accent"></road-icon>
+<road-icon name="location-pin-garage-norauto" color="primary" role="img"></road-icon>
+<road-icon name="location-pin-garage" color="secondary" role="img"></road-icon>
+<road-icon name="location-pin-all" color="accent" role="img"></road-icon>
 
 <br/>
 
-<road-icon name="alert-info" color="info"></road-icon>
-<road-icon name="alert-success" color="success"></road-icon>
-<road-icon name="alert-warning" color="warning"></road-icon>
-<road-icon name="alert-danger" color="danger"></road-icon>
+<road-icon name="alert-info" color="info" role="img"></road-icon>
+<road-icon name="alert-success" color="success" role="img"></road-icon>
+<road-icon name="alert-warning" color="warning" role="img"></road-icon>
+<road-icon name="alert-danger" color="danger" role="img"></road-icon>
 
 <br/>
 
-<road-icon name="navigation-back"></road-icon>
-<road-icon name="navigation-back" color="white" class="bg-primary"></road-icon>
+<road-icon name="navigation-back" role="img"></road-icon>
+<road-icon name="navigation-back" color="white" class="bg-primary" role="img"></road-icon>
 `;
 
 export const MultipleColors = () => html`
-<road-icon name="vehicle-3-doors-color" size="4x"></road-icon>
-<road-icon name="vehicle-3-doors-hatchback-color" size="4x"></road-icon>
+<road-icon name="vehicle-3-doors-color" size="4x" role="img"></road-icon>
+<road-icon name="vehicle-3-doors-hatchback-color" size="4x" role="img"></road-icon>
 
 <br/>
 
-<road-icon name="vehicle-5-doors-color" size="4x"></road-icon>
-<road-icon name="vehicle-5-doors-hatchback-color" size="4x"></road-icon>
+<road-icon name="vehicle-5-doors-color" size="4x" role="img"></road-icon>
+<road-icon name="vehicle-5-doors-hatchback-color" size="4x" role="img"></road-icon>
 
 <br/>
 
-<road-icon name="vehicle-tires-front-color" size="4x"></road-icon>
-<road-icon name="vehicle-tires-back-color" size="4x"></road-icon>
-<road-icon name="vehicle-tires-all-color" size="4x"></road-icon>
+<road-icon name="vehicle-tires-front-color" size="4x" role="img"></road-icon>
+<road-icon name="vehicle-tires-back-color" size="4x" role="img"></road-icon>
+<road-icon name="vehicle-tires-all-color" size="4x" role="img"></road-icon>
 
 <br/>
 
-<road-icon name="car-wiper-front-color" size="4x"></road-icon>
-<road-icon name="car-wiper-back-color" size="4x"></road-icon>
+<road-icon name="car-wiper-front-color" size="4x" role="img"></road-icon>
+<road-icon name="car-wiper-back-color" size="4x" role="img"></road-icon>
 
 <br/>
 
-<road-icon name="vehicle-car-light-front-color" size="4x"></road-icon>
-<road-icon name="vehicle-car-light-back-color" size="4x"></road-icon>
-<road-icon name="vehicle-car-light-inside-color" size="4x"></road-icon>
+<road-icon name="vehicle-car-light-front-color" size="4x" role="img"></road-icon>
+<road-icon name="vehicle-car-light-back-color" size="4x" role="img"></road-icon>
+<road-icon name="vehicle-car-light-inside-color" size="4x" role="img"></road-icon>
 
 <br/>
 
-<road-icon name="brake-color" size="4x"></road-icon>
-<road-icon name="brake" color="secondary" size="4x"></road-icon>
+<road-icon name="brake-color" size="4x" role="img"></road-icon>
+<road-icon name="brake" color="secondary" size="4x" role="img"></road-icon>
 
 <br/>
 
 <div class="bg-primary">
-  <road-icon name="location-pin-outline-color" color="white" size="4x"></road-icon>
-  <road-icon name="vehicle-car-add-outline-color" color="white" size="4x"></road-icon>
-  <road-icon name="vehicle-car-checked-outline-color" color="white" size="4x"></road-icon>
+  <road-icon name="location-pin-outline-color" color="white" size="4x" role="img"></road-icon>
+  <road-icon name="vehicle-car-add-outline-color" color="white" size="4x" role="img"></road-icon>
+  <road-icon name="vehicle-car-checked-outline-color" color="white" size="4x" role="img"></road-icon>
 </div>
 
 <br/>
 
-<road-icon name="weather-sun-snow-color" size="4x"></road-icon>
-<road-icon name="weather-sun-color" size="4x"></road-icon>
-<road-icon name="weather-snow-color" size="4x"></road-icon>
+<road-icon name="weather-sun-snow-color" size="4x" role="img"></road-icon>
+<road-icon name="weather-sun-color" size="4x" role="img"></road-icon>
+<road-icon name="weather-snow-color" size="4x" role="img"></road-icon>
 
 <br/>
 
-<road-icon name="people-outline" color="primary" size="4x"></road-icon>
-<road-icon name="people-vip-outline-color" size="4x"></road-icon>
-<road-icon name="people-card-color" size="4x"></road-icon>
-<road-icon name="people-car-fleet-color" size="4x"></road-icon>
-<road-icon name="people-coworker-norauto-color" size="4x"></road-icon>
+<road-icon name="people-outline" color="primary" size="4x" role="img"></road-icon>
+<road-icon name="people-vip-outline-color" size="4x" role="img"></road-icon>
+<road-icon name="people-card-color" size="4x" role="img"></road-icon>
+<road-icon name="people-car-fleet-color" size="4x" role="img"></road-icon>
+<road-icon name="people-coworker-norauto-color" size="4x" role="img"></road-icon>
 `;

package/dist/collection/components/illustration/illustration.js

@@ -70,7 +70,7 @@ export class Illustration {
   render() {
     const sizeClass = this.size !== undefined ? `illustration-${this.size}` : '';
     const rotateClass = this.rotate !== undefined ? `illustration-rotate-${this.rotate}` : '';
-    return (h(Host, { class: `${sizeClass} ${rotateClass}`, "aria-hidden": "true" }, ((this.illustrationSvgContent !== '')
+    return (h(Host, { class: `${sizeClass} ${rotateClass}`, "aria-hidden": "true", role: "img" }, ((this.illustrationSvgContent !== '')
       ? h("div", { class: "icon-inner", innerHTML: this.illustrationSvgContent })
       : h("div", { class: "icon-inner" }))));
   }

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

@@ -1 +1 @@
-{"version":3,"file":"illustration.js","sourceRoot":"","sources":["../../../src/components/illustration/illustration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getIllustrationSvgContent, roadillustrationContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n  tag: 'road-illustration',\n  assetsDirs: ['svg'],\n  styleUrl: 'illustration.css',\n  shadow: true,\n})\nexport class Illustration {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadIllustrationElement;\n\n  @State() private illustrationSvgContent?: string;\n\n  @State() private isVisible = false;\n\n\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the illustration name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which illustration to use from the built-in set of illustrations.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() illustration?: any;\n\n  /**\n   * The size of the illustration.\n   * Available options are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"2x\"`.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' | '2x' = \"2x\";\n\n  /**\n   * The rotation of the illustration.\n   * Available options are: `\"90\"`, `\"180\"`, `\"270\"`.\n   */\n  @Prop() rotate?: '90' | '180' | '270';\n\n  /**\n   * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIllustration();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadIllustrationElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('illustration')\n  loadIllustration() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadillustrationContent.has(url)) {\n          // sync if it's already loaded\n          this.illustrationSvgContent = roadillustrationContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getIllustrationSvgContent(url, this.sanitize).then(() => (this.illustrationSvgContent = roadillustrationContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.illustration);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n    const sizeClass = this.size !== undefined ? `illustration-${this.size}` : '';\n    const rotateClass = this.rotate !== undefined ? `illustration-rotate-${this.rotate}` : '';\n\n    return (\n      <Host class={`${sizeClass} ${rotateClass}`} aria-hidden=\"true\">\n        {(\n          (this.illustrationSvgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.illustrationSvgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"illustration.js","sourceRoot":"","sources":["../../../src/components/illustration/illustration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getIllustrationSvgContent, roadillustrationContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n  tag: 'road-illustration',\n  assetsDirs: ['svg'],\n  styleUrl: 'illustration.css',\n  shadow: true,\n})\nexport class Illustration {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadIllustrationElement;\n\n  @State() private illustrationSvgContent?: string;\n\n  @State() private isVisible = false;\n\n\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the illustration name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which illustration to use from the built-in set of illustrations.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() illustration?: any;\n\n  /**\n   * The size of the illustration.\n   * Available options are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"2x\"`.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' | '2x' = \"2x\";\n\n  /**\n   * The rotation of the illustration.\n   * Available options are: `\"90\"`, `\"180\"`, `\"270\"`.\n   */\n  @Prop() rotate?: '90' | '180' | '270';\n\n  /**\n   * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIllustration();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadIllustrationElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('illustration')\n  loadIllustration() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadillustrationContent.has(url)) {\n          // sync if it's already loaded\n          this.illustrationSvgContent = roadillustrationContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getIllustrationSvgContent(url, this.sanitize).then(() => (this.illustrationSvgContent = roadillustrationContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.illustration);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n    const sizeClass = this.size !== undefined ? `illustration-${this.size}` : '';\n    const rotateClass = this.rotate !== undefined ? `illustration-rotate-${this.rotate}` : '';\n\n    return (\n      <Host class={`${sizeClass} ${rotateClass}`} aria-hidden=\"true\" role=\"img\">\n        {(\n          (this.illustrationSvgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.illustrationSvgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/input/input.css

@@ -149,7 +149,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;
@@ -216,6 +216,12 @@
   color: var(--road-on-danger-surface);
 }
 
+.invalid-feedback road-icon{
+  color: var(--road-danger-icon);
+  margin-right: var(--road-spacing-02);
+}
+
+
 .form-control.is-invalid,
 .was-validated .form-control:invalid {
   border-color: var(--road-danger-outline);
@@ -223,7 +229,7 @@
 
 .form-control.is-invalid ~ .invalid-feedback,
 .was-validated .form-control:invalid ~ .invalid-feedback {
-  display: block;
+  display: flex;
 }
 
 /* HELPER

package/dist/collection/components/input/input.js

@@ -28,10 +28,24 @@ const debounce = (func, wait = 0) => {
  */
 export class Input {
   constructor() {
+    // private onInput = (ev: Event) => {
+    //   const input = ev.target as HTMLInputElement | null;
+    //   if (input) {
+    //     this.value = input.value || "";
+    //   }
+    //   this.roadinput.emit(ev as KeyboardEvent);
+    //   this.roadInput.emit(ev as KeyboardEvent);
+    // };
     this.onInput = (ev) => {
       const input = ev.target;
       if (input) {
-        this.value = input.value || "";
+        let value = input.value || "";
+        // Si le type est "tel", on vérifie si la valeur contient uniquement des chiffres ou le symbole "+"
+        if (this.type === 'tel' && !/^\+?[0-9]*$/.test(value)) {
+          // Si la valeur n'est pas conforme, on ne la met pas à jour et on arrête la fonction
+          return;
+        }
+        this.value = value;
       }
       this.roadinput.emit(ev);
       this.roadInput.emit(ev);
@@ -117,7 +131,7 @@ export class Input {
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const lessLabelClass = this.label !== '' ? '' : 'less-label';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value }, h("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyUp: (event) => this.enforceMinMax(event.target), "data-cy": 'road-input' }), h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value }, h("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyUp: (event) => this.enforceMinMax(event.target), "data-cy": 'road-input' }), h("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && h("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
       h("slot", { name: "checklistPassword" })));
   }
   static get is() { return "road-input"; }