@roadtrip/components 3.17.0 → 3.19.0

package/dist/collection/components/profil-dropdown/profil-dropdown.css

@@ -27,10 +27,18 @@
 
 .dropdown summary {
   display: block;
+  width: 3.5rem;
   cursor: pointer;
+  border-radius: 3rem;
   outline: none;
 }
 
+.dropdown summary:focus,
+.dropdown summary.focus-visible,
+.dropdown summary:focus-within{
+  box-shadow: 0 0 0 4px var(--road-primary-80);
+}
+
 .dropdown summary::-webkit-details-marker { /* remove native arrow */
   display: none;
 }

package/dist/collection/components/profil-dropdown/profil-dropdown.js

@@ -19,6 +19,14 @@ export class Dropdown {
     };
     this.isOpen = false;
   }
+  handleDocumentClick(ev) {
+    // Check if the clicked element is the dropdown button
+    if (ev.target.closest('road-profil-dropdown') === this.el) {
+      return; // Do nothing if clicked element is the dropdown button
+    }
+    // Close dropdown if click is outside the dropdown
+    this.isOpen = false;
+  }
   render() {
     return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex` }, h("div", null, h("road-avatar", null, h("slot", { name: "avatar" }))))), h("div", { class: `dropdown-menu` }, h("div", { class: "profil-item" }, h("road-avatar", { size: "sm" }, h("slot", { name: "avatarItem" })), h("div", { class: "profil-item-info" }, h("span", { class: "profil-item-info-name" }, h("slot", { name: "name" })), h("road-label", null, h("slot", { name: "email" })))), h("slot", { name: "list" }))));
   }
@@ -56,5 +64,15 @@ export class Dropdown {
       }
     };
   }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 //# sourceMappingURL=profil-dropdown.js.map

package/dist/collection/components/profil-dropdown/profil-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"profil-dropdown.js","sourceRoot":"","sources":["../../../src/components/profil-dropdown/profil-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAOH,MAAM,OAAO,QAAQ;;IAOnB;;OAEG;IACK,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;kBAP0C,KAAK;;EASjD,MAAM;IAEJ,OAAO,CACL,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM;MACzC,gCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QACxF,WAAK,KAAK,EAAE,QAAQ;UAClB;YACE;cACE,YAAM,IAAI,EAAC,QAAQ,GAAE,CACT,CACV,CACF,CACE;MACV,WAAK,KAAK,EAAE,eAAe;QACzB,WAAK,KAAK,EAAC,aAAa;UACtB,mBAAa,IAAI,EAAC,IAAI;YACpB,YAAM,IAAI,EAAC,YAAY,GAAE,CACb;UACd,WAAK,KAAK,EAAC,kBAAkB;YAC3B,YAAM,KAAK,EAAC,uBAAuB;cACjC,YAAM,IAAI,EAAC,MAAM,GAAE,CACd;YACP;cACE,YAAM,IAAI,EAAC,OAAO,GAAE,CACT,CACT,CACF;QACN,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n * @slot avatar - Content of the avatar (img or First letter) <road-img> or <road-label>.\n * @slot avatarItem - Content of the avatar item (img or First letter) <road-img> or <road-label>.\n * @slot name - Content First and Last Name.\n * @slot email - Content email.\n\n\n */\n\n@Component({\n  tag: 'road-profil-dropdown',\n  styleUrl: 'profil-dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  /**\n   * Set to `true` to open the dropdown menu and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Toggle the display when clicking element in slot\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex`}>\n            <div>\n              <road-avatar>\n                <slot name=\"avatar\"/>\n              </road-avatar>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu`}>\n          <div class=\"profil-item\">\n            <road-avatar size=\"sm\">\n              <slot name=\"avatarItem\"/>\n            </road-avatar>\n            <div class=\"profil-item-info\">\n              <span class=\"profil-item-info-name\">\n                <slot name=\"name\"/>\n              </span>\n              <road-label>\n                <slot name=\"email\"/>\n              </road-label>\n            </div>\n          </div>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"profil-dropdown.js","sourceRoot":"","sources":["../../../src/components/profil-dropdown/profil-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEpE;;;;;;;;;GASG;AAOH,MAAM,OAAO,QAAQ;;IASnB;;OAEG;IACK,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;kBAP0C,KAAK;;EAUjD,mBAAmB,CAAC,EAAc;IAChC,sDAAsD;IACtD,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,sBAAsB,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;MAC1E,OAAO,CAAC,uDAAuD;KAChE;IACD,kDAAkD;IAClD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAED,MAAM;IAEJ,OAAO,CACL,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM;MACzC,gCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QACxF,WAAK,KAAK,EAAE,QAAQ;UAClB;YACE;cACE,YAAM,IAAI,EAAC,QAAQ,GAAE,CACT,CACV,CACF,CACE;MACV,WAAK,KAAK,EAAE,eAAe;QACzB,WAAK,KAAK,EAAC,aAAa;UACtB,mBAAa,IAAI,EAAC,IAAI;YACpB,YAAM,IAAI,EAAC,YAAY,GAAE,CACb;UACd,WAAK,KAAK,EAAC,kBAAkB;YAC3B,YAAM,KAAK,EAAC,uBAAuB;cACjC,YAAM,IAAI,EAAC,MAAM,GAAE,CACd;YACP;cACE,YAAM,IAAI,EAAC,OAAO,GAAE,CACT,CACT,CACF;QACN,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, h, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * @slot  - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n * @slot avatar - Content of the avatar (img or First letter) <road-img> or <road-label>.\n * @slot avatarItem - Content of the avatar item (img or First letter) <road-img> or <road-label>.\n * @slot name - Content First and Last Name.\n * @slot email - Content email.\n\n\n */\n\n@Component({\n  tag: 'road-profil-dropdown',\n  styleUrl: 'profil-dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  @Element() el!: HTMLRoadProfilDropdownElement;\n\n  /**\n   * Set to `true` to open the dropdown menu and to `false` to close it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Toggle the display when clicking element in slot\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-profil-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\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n          <div class={`d-flex`}>\n            <div>\n              <road-avatar>\n                <slot name=\"avatar\"/>\n              </road-avatar>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu`}>\n          <div class=\"profil-item\">\n            <road-avatar size=\"sm\">\n              <slot name=\"avatarItem\"/>\n            </road-avatar>\n            <div class=\"profil-item-info\">\n              <span class=\"profil-item-info-name\">\n                <slot name=\"name\"/>\n              </span>\n              <road-label>\n                <slot name=\"email\"/>\n              </road-label>\n            </div>\n          </div>\n          <slot name=\"list\"/>\n        </div>\n      </details>\n    );\n  }\n\n}\n"]}

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

@@ -55,14 +55,14 @@ export default {
     name: `<road-label slot="name">First and Last name</road-label>`,
     email: `<road-label slot="email">Email</road-label>`,
     list: `<road-list slot="list">
-    <road-item button style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;" class="edit-profil">
-      <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+    <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" aria-hidden="true"></road-icon>
       <road-label style="font-size: 1rem">
         Edit profile
       </road-label>
     </road-item>
-    <road-item button style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
-      <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+    <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" aria-hidden="true"></road-icon>
       <road-label style="font-size: 1rem">
         Log out
       </road-label>

package/dist/collection/components/progress/progress.js

@@ -15,7 +15,7 @@ export class ProgressBar {
     const fullwidth = this.fullwidth ? 'progress-element-info-full-width' : 'progress-element-info';
     const light = this.light ? 'progress progress-light' : 'progress';
     const animation = this.animation ? 'animation' : '';
-    return (h(Host, { class: "progress-element" }, h("div", { class: `${light} progress-${this.color} ${animation}` }, h("div", { class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100" })), h("div", { class: `${fullwidth}` }, h("span", { class: "progress-element-label" }, this.label), this.showstep && h("span", { class: "progress-element-step" }, valueRound, "/", this.numbersteps))));
+    return (h(Host, { class: "progress-element" }, h("div", { class: `${light} progress-${this.color} ${animation}` }, h("div", { class: "progress-bar", role: "progressbar", style: { width: `${this.value}%` }, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": "progress bar" })), h("div", { class: `${fullwidth}` }, h("span", { class: "progress-element-label" }, this.label), this.showstep && h("span", { class: "progress-element-step" }, valueRound, "/", this.numbersteps))));
   }
   static get is() { return "road-progress"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;iBAME,CAAC;uBAKsB,GAAG;iBAKvB,EAAE;oBAKD,KAAK;qBAKF,KAAK;iBAKX,KAAK;qBAKA,KAAK;iBAK6D,SAAS;;EAEzG,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAC,CAAC,GAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAChG,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,UAAU,CAAC;IAClE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpD,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB;MAC5B,WAAK,KAAK,EAAE,GAAG,KAAK,aAAa,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;QACxD,WAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,mBAAiB,IAAI,CAAC,KAAK,mBAAgB,GAAG,mBAAe,KAAK,GAAO,CACpJ;MACN,WAAK,KAAK,EAAE,GAAG,SAAS,EAAE;QACxB,YAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAQ;QACvD,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,uBAAuB;UAAE,UAAU;;UAAG,IAAI,CAAC,WAAW,CAAQ,CACxF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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"]}
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;iBAME,CAAC;uBAKsB,GAAG;iBAKvB,EAAE;oBAKD,KAAK;qBAKF,KAAK;iBAKX,KAAK;qBAKA,KAAK;iBAK6D,SAAS;;EAEzG,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAC,CAAC,GAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAChG,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,UAAU,CAAC;IAClE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpD,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB;MAC5B,WAAK,KAAK,EAAE,GAAG,KAAK,aAAa,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE;QACxD,WAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,mBAAiB,IAAI,CAAC,KAAK,mBAAgB,GAAG,mBAAe,KAAK,gBAAY,cAAc,GAAO,CAC9K;MACN,WAAK,KAAK,EAAE,GAAG,SAAS,EAAE;QACxB,YAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAQ;QACvD,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,uBAAuB;UAAE,UAAU;;UAAG,IAAI,CAAC,WAAW,CAAQ,CACxF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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"]}

package/dist/collection/components/progress-indicator-vertical/progress-indicator-vertical.css

@@ -13,6 +13,11 @@
   display: block;
 }
 
+:host ul li{
+  list-style: none;
+}
+
+
 /* VERTICAL STEPPER
  -------------------- */
 

package/dist/collection/components/progress-indicator-vertical/progress-indicator-vertical.js

@@ -12,7 +12,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressIndicatorVertical {
   render() {
-    return (h(Host, null, h("nav", null, h("ul", null, h("slot", null)))));
+    return (h(Host, null, h("nav", null, h("ul", null, h("li", null, h("slot", null))))));
   }
   static get is() { return "road-progress-indicator-vertical"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator-vertical/progress-indicator-vertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator-vertical.js","sourceRoot":"","sources":["../../../src/components/progress-indicator-vertical/progress-indicator-vertical.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,yBAAyB;EAEjC,MAAM;IAEJ,OAAO,CACL,EAAC,IAAI;MACH;QACE;UACE,eAAO,CACJ,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CAEL","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - content of the stepper item, it should be road-vertical-stepper-item elements.\n * \n * if the state of the step is completed add the class `completed` on the road-vertical-stepper-item\n * \n * if the state of the step is in-progress add the class `in-progress` on the road-vertical-stepper-item\n * \n * if the state of the step is current add the class `current` on the road-vertical-stepper-item\n * \n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>`\n */\n\n@Component({\n  tag: 'road-progress-indicator-vertical',\n  styleUrl: 'progress-indicator-vertical.css',\n  shadow: true,\n})\nexport class ProgressIndicatorVertical {\n\n     render() {\n\n       return (\n         <Host>\n           <nav>\n             <ul>\n               <slot/>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"]}
+{"version":3,"file":"progress-indicator-vertical.js","sourceRoot":"","sources":["../../../src/components/progress-indicator-vertical/progress-indicator-vertical.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,yBAAyB;EAEjC,MAAM;IAEJ,OAAO,CACL,EAAC,IAAI;MACH;QACE;UACC;YACE,eAAO,CACH,CACF,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CAEL","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - content of the stepper item, it should be road-vertical-stepper-item elements.\n * \n * if the state of the step is completed add the class `completed` on the road-vertical-stepper-item\n * \n * if the state of the step is in-progress add the class `in-progress` on the road-vertical-stepper-item\n * \n * if the state of the step is current add the class `current` on the road-vertical-stepper-item\n * \n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>`\n */\n\n@Component({\n  tag: 'road-progress-indicator-vertical',\n  styleUrl: 'progress-indicator-vertical.css',\n  shadow: true,\n})\nexport class ProgressIndicatorVertical {\n\n     render() {\n\n       return (\n         <Host>\n           <nav>\n             <ul>\n              <li>\n                <slot/>\n               </li>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"]}

package/dist/collection/components/progress-indicator-vertical/progress-indicator-vertical.stories.js

@@ -14,10 +14,10 @@ export default {
     },
   },
   args: {
-    ' ': `<road-progress-indicator-vertical-item class="completed">
+    ' ': `<road-progress-indicator-vertical-item class="completed" tabindex="0">
     <a class="progress-indicator-vertical-link">
       <span class="progress-indicator-vertical-icon">
-      <road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>
+      <road-icon name="check-small" class="d-block" style="color: currentColor;" aria-hidden="true"></road-icon>
       </span>
       <span class="progress-indicator-vertical-line"></span>
     </a>
@@ -28,7 +28,7 @@ export default {
       <div class="progress-indicator-vertical-description">Description</div>
     </div>
   </road-progress-indicator-vertical-item>
-  <road-progress-indicator-vertical-item class="current">
+  <road-progress-indicator-vertical-item class="current" tabindex="0">
     <a class="progress-indicator-vertical-link">
       <span class="progress-indicator-vertical-icon">
       2
@@ -42,7 +42,7 @@ export default {
       <div class="progress-indicator-vertical-description">Description</div>
     </div>
   </road-progress-indicator-vertical-item>
-  <road-progress-indicator-vertical-item>
+  <road-progress-indicator-vertical-item tabindex="0">
   <a class="progress-indicator-vertical-link">
     <span class="progress-indicator-vertical-icon">
       3
@@ -56,7 +56,7 @@ export default {
     <div class="progress-indicator-vertical-description">Description</div>
     </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item tabindex="0">
 <a class="progress-indicator-vertical-link">
   <span class="progress-indicator-vertical-icon">
     4
@@ -70,7 +70,7 @@ export default {
   <div class="progress-indicator-vertical-description">Description</div>
   </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item tabindex="0">
 <a class="progress-indicator-vertical-link">
   <span class="progress-indicator-vertical-icon">
     5
@@ -97,10 +97,10 @@ export const Template = (args) => html`
 
 export const OneStepCompleted = Template.bind({});
 OneStepCompleted.args = {
-  ' ': `<road-progress-indicator-vertical-item class="completed">
+  ' ': `<road-progress-indicator-vertical-item class="completed" tabindex="0">
   <a class="progress-indicator-vertical-link">
     <span class="progress-indicator-vertical-icon">
-    <road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>
+    <road-icon name="check-small" class="d-block" style="color: currentColor;" aria-hidden="true"></road-icon>
     </span>
     <span class="progress-indicator-vertical-line"></span>
   </a>
@@ -111,7 +111,7 @@ OneStepCompleted.args = {
     <div class="progress-indicator-vertical-description">Description</div>
   </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item class="current">
+<road-progress-indicator-vertical-item class="current" tabindex="0">
   <a class="progress-indicator-vertical-link">
     <span class="progress-indicator-vertical-icon">
     2
@@ -125,7 +125,7 @@ OneStepCompleted.args = {
     <div class="progress-indicator-vertical-description">Description</div>
   </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item tabindex="0">
 <a class="progress-indicator-vertical-link">
   <span class="progress-indicator-vertical-icon">
     3
@@ -139,7 +139,7 @@ OneStepCompleted.args = {
   <div class="progress-indicator-vertical-description">Description</div>
   </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item tabindex="0">
 <a class="progress-indicator-vertical-link">
 <span class="progress-indicator-vertical-icon">
   4
@@ -153,7 +153,7 @@ OneStepCompleted.args = {
 <div class="progress-indicator-vertical-description">Description</div>
 </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item tabindex="0">
 <a class="progress-indicator-vertical-link">
 <span class="progress-indicator-vertical-icon">
   5
@@ -171,10 +171,10 @@ OneStepCompleted.args = {
 
 export const SubSteps = Template.bind({});
 SubSteps.args = {
-  ' ': `<road-progress-indicator-vertical-item class="completed">
+  ' ': `<road-progress-indicator-vertical-item class="completed" tabindex="0">
   <a class="progress-indicator-vertical-link">
     <span class="progress-indicator-vertical-icon">
-    <road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>
+    <road-icon name="check-small" class="d-block" style="color: currentColor;" aria-hidden="true"></road-icon>
     </span>
     <span class="progress-indicator-vertical-line"></span>
   </a>
@@ -185,10 +185,10 @@ SubSteps.args = {
     <div class="progress-indicator-vertical-description">Description</div>
   </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item class="completed">
+<road-progress-indicator-vertical-item class="completed" tabindex="0">
   <a class="progress-indicator-vertical-link">
     <span class="progress-indicator-vertical-icon">
-    <road-icon name="check-small" class="d-block" style="color: currentColor;"></road-icon>
+    <road-icon name="check-small" class="d-block" style="color: currentColor;" aria-hidden="true"></road-icon>
     </span>
     <span class="progress-indicator-vertical-line"></span>
   </a>
@@ -199,7 +199,7 @@ SubSteps.args = {
     <div class="progress-indicator-vertical-description">Description</div>
   </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item class="completed">
+<road-progress-indicator-vertical-item class="completed" tabindex="0">
 <a class="progress-indicator-vertical-substep-link">
   <span class="progress-indicator-vertical-substep-beforeline"></span>
   <span class="progress-indicator-vertical-substep-icon"></span>
@@ -212,7 +212,7 @@ SubSteps.args = {
   <div class="progress-indicator-vertical-description">Description</div>
 </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item class="current">
+<road-progress-indicator-vertical-item class="current" tabindex="0">
 <a class="progress-indicator-vertical-substep-link">
   <span class="progress-indicator-vertical-substep-beforeline"></span>
   <span class="progress-indicator-vertical-substep-icon"></span>
@@ -225,7 +225,7 @@ SubSteps.args = {
   <div class="progress-indicator-vertical-description">Description</div>
 </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item tabindex="0">
 <a class="progress-indicator-vertical-link">
 <span class="progress-indicator-vertical-icon">
   3
@@ -239,7 +239,7 @@ SubSteps.args = {
 <div class="progress-indicator-vertical-description">Description</div>
 </div>
 </road-progress-indicator-vertical-item>
-<road-progress-indicator-vertical-item>
+<road-progress-indicator-vertical-item tabindex="0">
 <a class="progress-indicator-vertical-link">
 <span class="progress-indicator-vertical-icon">
   4

package/dist/collection/components/progress-tracker/progress-tracker.css

@@ -17,6 +17,10 @@
   padding-left: 0;
 }
 
+:host ul li{
+  list-style: none;
+}
+
 /* PROGRESS TRACKER
  -------------------- */
 

package/dist/collection/components/progress-tracker/progress-tracker.js

@@ -9,7 +9,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ProgressTracker {
   render() {
-    return (h(Host, null, h("nav", null, h("ul", null, h("slot", null)))));
+    return (h(Host, null, h("nav", null, h("ul", null, h("li", null, h("slot", null))))));
   }
   static get is() { return "road-progress-tracker"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-tracker/progress-tracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-tracker.js","sourceRoot":"","sources":["../../../src/components/progress-tracker/progress-tracker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;GAOG;AAOH,MAAM,OAAO,eAAe;EAEvB,MAAM;IAEJ,OAAO,CACL,EAAC,IAAI;MACH;QACE;UACE,eAAO,CACJ,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CAEL","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - content of the progress stepper tracker item, it should be road-progress-tracker-item elements.\n * \n * if the state of the step is completed add the class `completed` on the road-progress-tracker-item\n * if the state of the step is in progress add the class `in-progress` on the road-progress-tracker-item\n * if the state of the step is current add the class `current` on the road-progress-tracker-item\n\n */\n\n@Component({\n  tag: 'road-progress-tracker',\n  styleUrl: 'progress-tracker.css',\n  shadow: true,\n})\nexport class ProgressTracker {\n\n     render() {\n\n       return (\n         <Host>\n           <nav>\n             <ul>\n               <slot/>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"]}
+{"version":3,"file":"progress-tracker.js","sourceRoot":"","sources":["../../../src/components/progress-tracker/progress-tracker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;GAOG;AAOH,MAAM,OAAO,eAAe;EAEvB,MAAM;IAEJ,OAAO,CACL,EAAC,IAAI;MACH;QACE;UACG;YACE,eAAO,CACJ,CACH,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CAEL","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot  - content of the progress stepper tracker item, it should be road-progress-tracker-item elements.\n * \n * if the state of the step is completed add the class `completed` on the road-progress-tracker-item\n * if the state of the step is in progress add the class `in-progress` on the road-progress-tracker-item\n * if the state of the step is current add the class `current` on the road-progress-tracker-item\n\n */\n\n@Component({\n  tag: 'road-progress-tracker',\n  styleUrl: 'progress-tracker.css',\n  shadow: true,\n})\nexport class ProgressTracker {\n\n     render() {\n\n       return (\n         <Host>\n           <nav>\n             <ul>\n                <li>\n                  <slot/>\n                </li>\n             </ul>\n           </nav>\n         </Host>\n       );\n     }\n\n}\n"]}

package/dist/collection/components/range/range.css

@@ -53,6 +53,19 @@
 /* SLIDER
  -------------------- */
 
+.form-range-label {
+  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 {
   position: relative;
   z-index: 0;
@@ -135,13 +148,15 @@
  */
 
 :host(.focus-visible) .form-range-input::-webkit-slider-thumb,
-:host(:active) .form-range-input::-webkit-slider-thumb {
+:host(:active) .form-range-input::-webkit-slider-thumb,
+:host(:focus) .form-range-input::-webkit-slider-thumb {
   background: var(--road-input-surface-variant);
   border: 0.5rem solid var(--road-grey-100-new);
 }
 
 :host(.focus-visible) .form-range-input::-moz-range-thumb,
-:host(:active) .form-range-input::-moz-range-thumb {
+:host(:active) .form-range-input::-moz-range-thumb,
+:host(:focus) .form-range-input::-moz-range-thumb {
   background: var(--road-input-surface-variant);
   border: 0.5rem solid var(--road-grey-100-new);
 }

package/dist/collection/components/range/range.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { navigationAddLessSolid, navigationAddMoreSolid } from "../../../icons";
 /**
  * @slot datalist - list of labels. also put show-labels="true" and max="10" for this exemple
@@ -48,10 +48,34 @@ export class Range {
       ? this.value.toString()
       : (this.value || '').toString();
   }
+  handleFocus() {
+    this.el.classList.add('focus-visible');
+  }
+  handleBlur() {
+    this.el.classList.remove('focus-visible');
+  }
+  componentDidLoad() {
+    // Cacher le label pour accessibilité
+    const label = this.el.querySelector('.form-label');
+    const input = this.el.querySelector('.form-control.sc-road-input');
+    if (label) {
+      label.style.clip = 'rect(0 0 0 0)';
+      label.style.border = '0';
+      label.style.height = '1px';
+      label.style.left = '0';
+      label.style.margin = '-1px';
+      label.style.overflow = 'hidden';
+      label.style.padding = '0';
+      label.style.position = 'absolute';
+      label.style.top = '0';
+      label.style.width = '1px';
+      input.style.padding = '0 1rem 0';
+    }
+  }
   render() {
     const value = this.getValue();
     const datalist = this.showLabels !== undefined ? `tickmarks` : '';
-    return (h("div", { class: "form-group d-flex align-items-end" }, this.showTick && h("road-icon", { icon: navigationAddLessSolid, class: "mr-8", size: 'sm' }), h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } }, this.showValue && h("output", null), this.showLabels && h("slot", { name: "datalist" }), h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist }), h("div", { class: "form-range-progress" })), this.showTick && h("road-icon", { icon: navigationAddMoreSolid, class: "ml-8", size: 'sm' })));
+    return (h(Host, { tabindex: "0" }, h("div", { class: "form-group d-flex align-items-end" }, this.showTick && h("road-icon", { icon: navigationAddLessSolid, class: "mr-8", size: 'sm' }), h("div", { class: "form-range", style: { '--min:': this.min, '--max': this.max, '--value': value } }, this.showValue && h("output", null), this.showLabels && h("slot", { name: "datalist" }), h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0" }), h("label", { class: "form-range-label" }, "Valeur"), h("div", { class: "form-range-progress" })), this.showTick && h("road-icon", { icon: navigationAddMoreSolid, class: "ml-8", size: 'sm' }))));
   }
   static get is() { return "road-range"; }
   static get encapsulation() { return "scoped"; }
@@ -253,6 +277,21 @@ export class Range {
         "methodName": "valueChanged"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "handleFocus",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
 }
 let rangeIds = 0;
 //# sourceMappingURL=range.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"range.js","sourceRoot":"","sources":["../../../src/components/range/range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, Event, EventEmitter, Watch } 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  render() {\n    const value = this.getValue();\n    const datalist = this.showLabels !== undefined ? `tickmarks` : '';\n\n    return (\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            \n          />\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    );\n  }\n\n}\n\nlet rangeIds = 0;\n"]}
+{"version":3,"file":"range.js","sourceRoot":"","sources":["../../../src/components/range/range.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/segmented-button/segmented-button.js

@@ -50,7 +50,7 @@ export class SegmentedButton {
     return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
         'tab-selected': selected,
         [`${sizeClass}`]: true,
-      } }, h("button", { type: "button", tabIndex: -1, class: "button-native", part: "native" }, h("slot", null))));
+      } }, h("span", { tabIndex: -1, class: "button-native", part: "native", "aria-hidden": "true" }, h("slot", null))));
   }
   static get is() { return "road-segmented-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-button/segmented-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/segmented-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-segmented-button',\n  styleUrl: 'segmented-button.css',\n  shadow: true,\n})\nexport class SegmentedButton {\n\n  @Element() el!: HTMLRoadSegmentedButtonElement;\n\n  /**\n    * The Segmented buttons size.\n    */\n   @Prop() size?: 'sm' | 'md' = 'md';\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   */\n  @Prop() tab?: string;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadsegmentedbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadSegmentedButtonClick!: EventEmitter;\n\n  @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n  @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n  onButtonBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadsegmentedbuttonclick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n      this.roadSegmentedButtonClick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\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 { tabIndex, selected, tab } = this;\n\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          [`${sizeClass}`]: true,\n        }}\n      >\n        <button type=\"button\" tabIndex={-1} class=\"button-native\" part=\"native\">\n            <slot/>\n        </button>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/segmented-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-segmented-button',\n  styleUrl: 'segmented-button.css',\n  shadow: true,\n})\nexport class SegmentedButton {\n\n  @Element() el!: HTMLRoadSegmentedButtonElement;\n\n  /**\n    * The Segmented buttons size.\n    */\n   @Prop() size?: 'sm' | 'md' = 'md';\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   */\n  @Prop() tab?: string;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadsegmentedbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadSegmentedButtonClick!: EventEmitter;\n\n  @Listen('roadSegmentedButtonBarChanged', { target: 'window' })\n  @Listen('roadSegmentedButtonbarchanged', { target: 'window' })\n  onButtonBarChanged(ev: CustomEvent) {\n    const dispatchedFrom = ev.target as HTMLElement;\n    const parent = this.el.parentElement as EventTarget;\n\n    if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n      this.selected = this.tab === ev.detail.tab;\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      this.roadsegmentedbuttonclick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n      this.roadSegmentedButtonClick.emit({\n        tab: this.tab,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get tabIndex() {\n    const hasTabIndex = this.el.hasAttribute('tabindex');\n\n    if (hasTabIndex) {\n      return this.el.getAttribute('tabindex');\n    }\n\n    return 0;\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 { tabIndex, selected, tab } = this;\n\n    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';\n\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          [`${sizeClass}`]: true,\n        }}\n      >\n        <span tabIndex={-1} class=\"button-native\" part=\"native\" aria-hidden=\"true\">\n            <slot/>\n        </span>\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/select/select.css

@@ -104,7 +104,7 @@
   display: block;
   font-size: var(--road-label-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;

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

@@ -54,11 +54,16 @@
   cursor: pointer;
 }
 
+.select-filter-item.active {
+  outline: 1px solid var(--road-input-outline-variant);
+}
+
 /**
  * Hover state
  */
 
 .select-filter-item:hover,
+.select-filter-item:focus,
 .select-filter-item.highlight {
   color: var(--road-on-primary);
   background: var(--road-primary);