@roadtrip/components 3.23.1 → 3.25.0

package/dist/cjs/road-chip.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-12592729.js');
 const index$1 = require('./index-fb57f684.js');
 require('./polyfill-b1fff766.js');
 
-const chipCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:inline-flex;align-items:center;padding:0 0.5rem}:host(.chip-outline){border-style:solid;border-width:1px}::slotted(road-icon){width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}.chip-close{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}:host(.chip-lg) ::slotted(road-icon){width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}:host(.chip-lg) .chip-description{padding:0 0.75rem}:host(.chip-lg) .chip-close{width:1.5rem;height:1.5rem}:host(.chip-default){color:var(--road-on-surface);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-surface);border-color:var(--road-outline)}:host(.chip-secondary){color:var(--road-on-button-primary);background:var(--road-button-primary);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:focus-visible){border-color:var(--road-outline-variant)}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant)}";
+const chipCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:inline-flex;align-items:center;padding:0 0.5rem}:host(.chip-outline){border-style:solid;border-width:1px}::slotted(road-icon){width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}.chip-close{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}:host(.chip-lg) ::slotted(road-icon){width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}:host(.chip-lg) .chip-description{padding:0 0.75rem}:host(.chip-lg) .chip-close{width:1.5rem;height:1.5rem}:host(.chip-default){color:var(--road-on-surface);background:var(--road-grey-200)}:host(.chip-outline.chip-default){background:var(--road-surface);border-color:var(--road-outline)}:host(.chip-secondary){color:var(--road-on-button-primary);background:var(--road-button-primary);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:focus-visible){border-color:var(--road-outline-variant);outline:auto}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant);outline:auto}";
 
 const Chip = class {
   constructor(hostRef) {

package/dist/cjs/road-chip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-chip.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,OAAO,GAAG,2yDAA2yD;;MCa9yD,IAAI;;;iBAI2B,SAAS;mBAKxB,KAAK;gBAKJ,IAAI;wBAKA,KAAK;;EAErC,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,cAAc,GAAG,EAAE,CAAC;IAExD,QACEA,QAACC,UAAI,IACH,KAAK,EAAE,GAAG,YAAY,SAAS,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG,IAE3ED,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,qBAAO,CACH,EACL,IAAI,CAAC,YAAY,IAAIA,uBAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAEE,uBAAe,GAAc,CAClF,EACP;GACH;;;;;;","names":["h","Host","navigationClose"],"sources":["src/components/chip/chip.css?tag=road-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Outline\n * - Icon\n * - Close\n * - Size\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  height: 1.5rem;\n  padding: 0.25rem 0.5rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--road-font-size-14);\n  cursor: pointer;\n  border: 0;\n  border-radius: 1.625rem;\n  outline: 0;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.chip-description {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 0.5rem;\n}\n\n/* OUTLINE\n -------------------- */\n\n:host(.chip-outline) {\n  border-style: solid;\n  border-width: 1px;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-right: 0.5rem;\n  margin-left: -0.5rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.chip-close {\n  width: 1rem;\n  height: 1rem;\n  margin-right: -0.25rem;\n  color: var(--road-surface);\n  background: var(--road-on-surface-weak);\n  border-radius: 50%;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n/* SIZE\n -------------------- */\n\n:host(.chip-lg) {\n  height: 2.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-16);\n}\n\n:host(.chip-lg) ::slotted(road-icon) {\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.75rem;\n  margin-left: -0.75rem;\n}\n\n:host(.chip-lg) .chip-description {\n  padding: 0 0.75rem;\n}\n\n:host(.chip-lg) .chip-close {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.chip-default) {\n  color: var(--road-on-surface);\n  background: var(--road-grey-200);\n}\n\n:host(.chip-outline.chip-default) {\n  background: var(--road-surface);\n  border-color: var(--road-outline);\n}\n\n:host(.chip-secondary) {\n  color: var(--road-on-button-primary);\n  background: var(--road-button-primary);\n  border-color: transparent;\n}\n\n:host(.chip-secondary) .chip-close {\n  color: var(--road-primary);\n  background: var(--road-surface);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:focus-visible) {\n  border-color: var(--road-outline-variant);\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class Chip {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'default' | 'secondary' = 'default';\n\n  /**\n   * Display an outline style chip.\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'md' | 'lg' = 'md';\n\n  /**\n   * Display a close icon\n   */\n  @Prop() hasCloseIcon: boolean = false;\n\n  render() {\n    const outlineClass = this.outline ? 'chip-outline' : '';\n\n    return (\n      <Host\n        class={`${outlineClass} chip-${this.color} chip-${this.size}`} tabindex=\"0\"\n      >\n        <div class=\"chip-description\">\n          <slot/>\n        </div>\n        {this.hasCloseIcon && <road-icon class=\"chip-close\" icon={navigationClose}></road-icon>}\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-chip.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,OAAO,GAAG,q0DAAq0D;;MCax0D,IAAI;;;iBAI2B,SAAS;mBAKxB,KAAK;gBAKJ,IAAI;wBAKA,KAAK;;EAErC,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,GAAG,cAAc,GAAG,EAAE,CAAC;IAExD,QACEA,QAACC,UAAI,IACH,KAAK,EAAE,GAAG,YAAY,SAAS,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG,IAE3ED,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,qBAAO,CACH,EACL,IAAI,CAAC,YAAY,IAAIA,uBAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAEE,uBAAe,GAAc,CAClF,EACP;GACH;;;;;;","names":["h","Host","navigationClose"],"sources":["src/components/chip/chip.css?tag=road-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/*\n * Chip\n *\n * Index\n * - Outline\n * - Icon\n * - Close\n * - Size\n * - Color\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  height: 1.5rem;\n  padding: 0.25rem 0.5rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--road-font-size-14);\n  cursor: pointer;\n  border: 0;\n  border-radius: 1.625rem;\n  outline: 0;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.chip-description {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 0.5rem;\n}\n\n/* OUTLINE\n -------------------- */\n\n:host(.chip-outline) {\n  border-style: solid;\n  border-width: 1px;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-right: 0.5rem;\n  margin-left: -0.5rem;\n}\n\n/* CLOSE\n -------------------- */\n\n.chip-close {\n  width: 1rem;\n  height: 1rem;\n  margin-right: -0.25rem;\n  color: var(--road-surface);\n  background: var(--road-on-surface-weak);\n  border-radius: 50%;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n/* SIZE\n -------------------- */\n\n:host(.chip-lg) {\n  height: 2.5rem;\n  padding: 0 0.75rem;\n  font-size: var(--road-font-size-16);\n}\n\n:host(.chip-lg) ::slotted(road-icon) {\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.75rem;\n  margin-left: -0.75rem;\n}\n\n:host(.chip-lg) .chip-description {\n  padding: 0 0.75rem;\n}\n\n:host(.chip-lg) .chip-close {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n/* COLOR\n -------------------- */\n\n:host(.chip-default) {\n  color: var(--road-on-surface);\n  background: var(--road-grey-200);\n}\n\n:host(.chip-outline.chip-default) {\n  background: var(--road-surface);\n  border-color: var(--road-outline);\n}\n\n:host(.chip-secondary) {\n  color: var(--road-on-button-primary);\n  background: var(--road-button-primary);\n  border-color: transparent;\n}\n\n:host(.chip-secondary) .chip-close {\n  color: var(--road-primary);\n  background: var(--road-surface);\n}\n\n/**\n * Hover state\n */\n\n@media (any-hover: hover) {\n\n  :host(.chip-outline:hover) {\n    border-color: var(--road-outline-variant);\n  }\n\n  :host(.chip-secondary:hover) {\n    background: var(--road-button-primary-variant);\n  }\n\n  :host(.chip-secondary:hover) .chip-close {\n    color: var(--road-primary);\n  }\n}\n\n/**\n * Focus state\n */\n\n:host(.chip-outline:focus-visible) {\n  border-color: var(--road-outline-variant);\n  outline: auto;\n}\n\n:host(.chip-secondary.focus-visible) {\n  background: var(--road-button-primary-variant);\n  outline: auto;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n  tag: 'road-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class Chip {\n  /**\n   * The color to use from your application's color palette.\n   */\n  @Prop() color?: 'default' | 'secondary' = 'default';\n\n  /**\n   * Display an outline style chip.\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * The chip size.\n   */\n  @Prop() size: 'md' | 'lg' = 'md';\n\n  /**\n   * Display a close icon\n   */\n  @Prop() hasCloseIcon: boolean = false;\n\n  render() {\n    const outlineClass = this.outline ? 'chip-outline' : '';\n\n    return (\n      <Host\n        class={`${outlineClass} chip-${this.color} chip-${this.size}`} tabindex=\"0\"\n      >\n        <div class=\"chip-description\">\n          <slot/>\n        </div>\n        {this.hasCloseIcon && <road-icon class=\"chip-close\" icon={navigationClose}></road-icon>}\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/road-dropdown.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.js');
 
-const dropdownCss = ":host{--margin-top:0.5rem;display:block;width:max-content}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;background-color:var(--road-surface);border-radius:0.25rem;outline:none}.dropdown summary:focus,.dropdown summary.focus-visible,.dropdown summary:focus-within{background:var(--road-surface-inverse)}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:auto;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;z-index:1;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}.dropdown-left{left:0}.dropdown-right{right:0}.dropdown-item{min-height:40px;padding:0 1rem;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover,.dropdown-item.focus-visible{background:var(--road-surface-inverse)}";
+const dropdownCss = ":host{--margin-top:0.5rem;display:block;width:max-content}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;background-color:var(--road-surface);border-radius:0.25rem}.dropdown summary:focus,.dropdown summary.focus-visible,.dropdown summary:focus-within{background:var(--road-surface-inverse)}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:auto;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;z-index:1;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}.dropdown-left{left:0}.dropdown-right{right:0}.dropdown-item{min-height:40px;padding:0 1rem;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover{background:var(--road-surface-inverse)}.dropdown-item.focus-visible{outline:auto}";
 
 const Dropdown = class {
   constructor(hostRef) {

package/dist/cjs/road-dropdown.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,wzDAAwzD;;MCO/zD,QAAQ;;;IAWX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBARyC,KAAK;mBACrB,KAAK;oBACJ,KAAK;;qBAEuB,QAAQ;;EAOhE,mBAAmB,CAAC,EAAc;;IAEhC,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;MACnE,OAAO;KACR;;IAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;IACnF,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,wCAAwC,GAAG,iBAAiB,CAAC;IAC5G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAE3E,QACEA,qBAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzCA,sCAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,eAAY,GAAG,IAC7GA,iBAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnCA,iBAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9DA,uBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,iBAAa,MAAM,GAAa,CAC1F,CACF,CACE,EACVA,iBAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE,IAC5DA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,EACV;GACH;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n  width: max-content;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  background-color: var(--road-surface);\n  border-radius: 0.25rem;\n  outline: none;\n}\n\n.dropdown summary:focus,\n.dropdown summary.focus-visible,\n.dropdown summary:focus-within{\n  background: var(--road-surface-inverse);\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.position-right{\n  display: flex;\n  justify-content: flex-end;\n}\n\n.bg-white{\n  background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n  width: 1.75rem;\n  height: 1.75rem;\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: auto;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n -------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n.dropdown-left {\n  left: 0;\n}\n\n.dropdown-right {\n  right: 0;\n}\n\n\n/* ITEM\n -------------------- */\n\n.dropdown-item {\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n  outline: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline-weak);\n  border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover,\n.dropdown-item.focus-visible {\n  background: var(--road-surface-inverse);\n}\n\n\n","import { Component, h, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  @Element() el!: HTMLRoadDropdownElement;\n\n\n  @Prop({ mutable: true }) isOpen: boolean = false;\n  @Prop() isLight: boolean = false;\n  @Prop() isMedium: boolean = false;\n  @Prop({ reflect: true }) position?: 'left' | 'right';\n  @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(ev: MouseEvent) {\n    // Check if the clicked element is the dropdown button\n    if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n      return; // Do nothing if clicked element is the dropdown button\n    }\n    // Close dropdown if click is outside the dropdown\n    this.isOpen = false;\n  }\n\n  render() {\n    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button';\n    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button';\n    const positionClass = this.position ? `position-${this.position}` : '';\n    const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n    const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick} tab-index=\"0\">\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\" aria-hidden=\"true\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n          <slot name=\"list\" />\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,2yDAA2yD;;MCOlzD,QAAQ;;;IAWX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBARyC,KAAK;mBACrB,KAAK;oBACJ,KAAK;;qBAEuB,QAAQ;;EAOhE,mBAAmB,CAAC,EAAc;;IAEhC,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;MACnE,OAAO;KACR;;IAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;IACnF,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,wCAAwC,GAAG,iBAAiB,CAAC;IAC5G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAE3E,QACEA,qBAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzCA,sCAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,eAAY,GAAG,IAC7GA,iBAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnCA,iBAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9DA,uBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,iBAAa,MAAM,GAAa,CAC1F,CACF,CACE,EACVA,iBAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE,IAC5DA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,EACV;GACH;;;;;;;","names":["h"],"sources":["src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n  --margin-top: 0.5rem;\n  display: block;\n  width: max-content;\n}\n\n.dropdown {\n  position: relative;\n  font-family: var(--road-font);\n}\n\n.dropdown summary {\n  display: block;\n  background-color: var(--road-surface);\n  border-radius: 0.25rem;\n}\n\n.dropdown summary:focus,\n.dropdown summary.focus-visible,\n.dropdown summary:focus-within{\n  background: var(--road-surface-inverse);\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n  display: none;\n}\n\n.dropdown-button{\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3.5rem;\n  height: 3.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.position-right{\n  display: flex;\n  justify-content: flex-end;\n}\n\n.bg-white{\n  background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n  width: 1.75rem;\n  height: 1.75rem;\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n  transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n  position: absolute;\n  bottom: 0;\n  left: auto;\n  transform: translate3d(0, -56px, 0);\n  will-change: transform;\n}\n\n/* MENU\n -------------------- */\n\n.dropdown-menu {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 16.875rem;\n  padding: 0.5rem 0;\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid;\n  border-color: var(--road-outline-weak);\n  border-radius: 0.25rem;\n  box-shadow: var(--road-elevation-low);\n  transition: transform 0.2s ease-in-out;\n  transform: scaleY(0);\n  transform-origin: 0 0;\n}\n\n.dropdown-left {\n  left: 0;\n}\n\n.dropdown-right {\n  right: 0;\n}\n\n\n/* ITEM\n -------------------- */\n\n.dropdown-item {\n  min-height: 40px;\n  padding: 0 1rem;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  background: var(--road-surface);\n  border: none;\n}\n\n.dropdown-item-border {\n  border-color: var(--road-outline-weak);\n  border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover {\n  background: var(--road-surface-inverse);\n}\n\n.dropdown-item.focus-visible{\n  outline: auto;\n}\n\n\n","import { Component, h, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'road-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n\n  @Element() el!: HTMLRoadDropdownElement;\n\n\n  @Prop({ mutable: true }) isOpen: boolean = false;\n  @Prop() isLight: boolean = false;\n  @Prop() isMedium: boolean = false;\n  @Prop({ reflect: true }) position?: 'left' | 'right';\n  @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(ev: MouseEvent) {\n    // Check if the clicked element is the dropdown button\n    if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n      return; // Do nothing if clicked element is the dropdown button\n    }\n    // Close dropdown if click is outside the dropdown\n    this.isOpen = false;\n  }\n\n  render() {\n    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button';\n    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button';\n    const positionClass = this.position ? `position-${this.position}` : '';\n    const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n    const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n    return (\n      <details class=\"dropdown\" open={this.isOpen}>\n        <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick} tab-index=\"0\">\n          <div class={`d-flex ${positionClass}`}>\n            <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n              <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\" aria-hidden=\"true\"></road-icon>\n            </div>\n          </div>\n        </summary>\n        <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n          <slot name=\"list\" />\n        </div>\n      </details>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/road-navbar.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
 require('./polyfill-b1fff766.js');
 
-const navbarCss = ":host{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline)}@media (max-width: 576px){:host{overflow-x:auto}}@media (min-width: 1200px){:host{bottom:auto;flex-direction:column;width:104px;height:100%;border-top:0;border-right:1px solid var(--road-outline)}}::slotted(.drawer-button-save){position:absolute;bottom:0;width:100%}";
+const navbarCss = ":host{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline-weak)}@media (max-width: 576px){:host{overflow-x:auto}}@media (min-width: 1200px){:host{bottom:auto;flex-direction:column;width:104px;height:100%;border-top:0;border-right:1px solid var(--road-outline-weak)}}::slotted(.drawer-button-save){position:absolute;bottom:0;width:100%}";
 
 const Navbar = class {
   constructor(hostRef) {

package/dist/cjs/road-navbar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-navbar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ukBAAukB;;MCY5kB,MAAM;;;;;;;EAOjB,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;GACF;EASD,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAClC;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,IAEdD,qBAAO,CACF,EACP;GACH;;;;;;;;;","names":["h","Host"],"sources":["src/components/navbar/navbar.css?tag=road-navbar&encapsulation=shadow","src/components/navbar/navbar.tsx"],"sourcesContent":["/*\n * Navbar\n *\n */\n\n/**\n * @prop --z-index: The z-index of the Navbar.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--z-index);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 5.125rem;\n  padding-left: 0;\n  margin: 0;\n  text-align: center;\n  user-select: none;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-outline);\n}\n\n@media (max-width: 576px) {\n\n  :host {\n    overflow-x: auto;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    bottom: auto;\n    flex-direction: column;\n    width: 104px;\n    height: 100%;\n    border-top: 0;\n    border-right: 1px solid var(--road-outline);\n  }\n}\n\n/**\n * Button save drawer.\n */\n\n::slotted(.drawer-button-save) {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile\n */\n\n@Component({\n  tag: 'road-navbar',\n  styleUrl: 'navbar.css',\n  shadow: true,\n})\nexport class Navbar {\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"menubar\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"road-navbar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ilBAAilB;;MCYtlB,MAAM;;;;;;;EAOjB,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;GACF;EASD,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAClC;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,IAEdD,qBAAO,CACF,EACP;GACH;;;;;;;;;","names":["h","Host"],"sources":["src/components/navbar/navbar.css?tag=road-navbar&encapsulation=shadow","src/components/navbar/navbar.tsx"],"sourcesContent":["/*\n * Navbar\n *\n */\n\n/**\n * @prop --z-index: The z-index of the Navbar.\n */\n\n:host {\n  --z-index: 3;\n\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--z-index);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 5.125rem;\n  padding-left: 0;\n  margin: 0;\n  text-align: center;\n  user-select: none;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-outline-weak);\n}\n\n@media (max-width: 576px) {\n\n  :host {\n    overflow-x: auto;\n  }\n}\n\n@media (min-width: 1200px) {\n\n  :host {\n    bottom: auto;\n    flex-direction: column;\n    width: 104px;\n    height: 100%;\n    border-top: 0;\n    border-right: 1px solid var(--road-outline-weak);\n  }\n}\n\n/**\n * Button save drawer.\n */\n\n::slotted(.drawer-button-save) {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n}\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile\n */\n\n@Component({\n  tag: 'road-navbar',\n  styleUrl: 'navbar.css',\n  shadow: true,\n})\nexport class Navbar {\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"menubar\"\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/cjs/road-plate-number.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
 const index$1 = require('./index-fb57f684.js');
 
-const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;outline:0;box-shadow:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{border-color:var(--road-input-outline-variant);outline:0}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";
+const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;box-shadow:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{outline:auto}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";
 
 const PlateNumber = class {
   constructor(hostRef) {

package/dist/cjs/road-plate-number.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-plate-number.entry.cjs.js","mappings":"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","names":["h","licensePlateStarEu"],"sources":["src/components/plate-number/plate-number.css?tag=road-plate-number&encapsulation=scoped","src/components/plate-number/plate-number.tsx"],"sourcesContent":["/*\n * Plate Number\n *\n * Index\n * - Plate Number\n * - Input\n */\n\n/* PLATE NUMBER\n -------------------- */\n\n:host {\n  display: block;\n}\n\n.plate-number {\n  --margin-bottom: 0;\n}\n\n.plate-number-start,\n.plate-number-end {\n  width: 1.75rem;\n  height: calc(3rem - 0.25rem);\n  background: var(--road-info-50);\n}\n\n.input-group-prepend {\n  margin-right: -1px;\n}\n\n.input-group-prepend,\n.input-group-append {\n  padding: 0;\n}\n\n.plate-number-start {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin-right: 0;\n  margin-left: 1px;\n  color: var(--road-icon-inverse);\n  border-radius: 0.125rem 0 0 0.125rem;\n}\n\n.plate-number-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #f3db53;\n}\n\n.plate-number-location {\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n}\n\n.plate-number-end {\n  margin-right: 1px;\n  border-radius: 0 0.125rem 0.125rem 0;\n}\n\n.plate-number-be .plate-number-input {\n  color: var(--road-on-danger-surface);\n}\n\n.plate-number-be .plate-number-input,\n.plate-number-be .input-group-append,\n.plate-number-be .input-group-prepend {\n  border-color: var(--road-danger-outline);\n}\n\n/* INPUT\n -------------------- */\n\n.plate-number-input {\n  position: relative;\n  display: block;\n  height: 3rem;\n  margin: 0;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-heading-04);\n  font-weight: 700;\n  color: var(--road-on-surface);\n  text-align: center;\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0;\n  outline: 0;\n  box-shadow: none;\n  appearance: none;\n}\n\n.plate-number-input::placeholder {\n  color: var(--road-on-surface-weak);\n  opacity: 1;\n}\n\n/**\n * Disabled state\n */\n\n.plate-number-input:disabled {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n.plate-number-input:disabled ~ .input-group-prepend,\n.plate-number-input:disabled ~ .input-group-append {\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .plate-number-input:not(:disabled):not([readonly]):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.plate-number-input:not([readonly]):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/* MOTORBIKE\n -------------------- */\n\n.motorbike-plate .plate-number-input {\n  height: 6rem;\n  padding: 0.75rem 1rem 0;\n  resize: none;\n  border-left: 0;\n}\n\n.motorbike-plate .input-group-prepend,\n.motorbike-plate .input-group-append {\n  align-items: flex-start;\n  height: 6rem;\n  padding: 0;\n}\n\n.motorbike-plate .plate-number-start {\n  margin-top: 1px;\n  border-radius: 0.125rem 0 0;\n}\n\n.motorbike-plate .plate-number-end {\n  margin-top: 1px;\n  border-radius: 0 0.125rem 0 0;\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { licensePlateStarEu } from '../../../icons';\n\n@Component({\n  tag: 'road-plate-number',\n  styleUrl: 'plate-number.css',\n  scoped: true,\n})\nexport class PlateNumber {\n\n  private countries = [\n    {\n      country: 'FR',\n      letter: 'F',\n      placeholder: 'AT-857-YY',\n    },\n    {\n      country: 'BE',\n      letter: 'B',\n      placeholder: '1-AAA-001',\n    },\n    {\n      country: 'IT',\n      letter: 'I',\n      placeholder: 'AT 814TX',\n    },\n    {\n      country: 'ES',\n      letter: 'E',\n      placeholder: '9512 HVY',\n    },\n    {\n      country: 'PT',\n      letter: 'P',\n      placeholder: '13 24 PZ',\n    },\n    {\n      country: 'PL',\n      letter: 'PL',\n      placeholder: 'GD 921KF',\n    },\n    {\n      country: 'AT',\n      letter: 'A',\n      placeholder: 'FF 10 FF',\n    },\n    {\n      country: 'DE',\n      letter: 'D',\n      placeholder: 'RA KL 8136',\n    }\n  ];\n\n  /**\n   * country of the plate\n   */\n  @Prop() country: 'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE' = 'FR';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * overwrite the default placeholder\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Enable motorbike display\n   */\n   @Prop() motorbike?: boolean;\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 a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\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      input.value = input.value.toUpperCase() || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';\n\n    return (\n      <road-input-group class={`plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}`}>\n        <label slot=\"prepend\" class=\"input-group-prepend\">\n          <div class=\"plate-number-start\">\n            <road-icon class=\"plate-number-icon\" icon={licensePlateStarEu}></road-icon>\n            <div class=\"plate-number-location\" aria-label={this.country} role=\"img\">\n              {this.countries\n                .filter(item => item.country === this.country)[0].letter}\n            </div>\n          </div>\n        </label>\n        {this.motorbike\n          ? (\n            <textarea\n              class=\"form-control plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              maxlength=\"9\"\n              rows={2}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            >\n            </textarea>\n          )\n          : (\n            <input\n              class=\"plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              value={value}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            />\n          )}\n        <label slot=\"append\" class=\"input-group-append\">\n          <div class=\"plate-number-end\"></div>\n        </label>\n      </road-input-group>\n    );\n  }\n\n}"],"version":3}
+{"file":"road-plate-number.entry.cjs.js","mappings":"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","names":["h","licensePlateStarEu"],"sources":["src/components/plate-number/plate-number.css?tag=road-plate-number&encapsulation=scoped","src/components/plate-number/plate-number.tsx"],"sourcesContent":["/*\n * Plate Number\n *\n * Index\n * - Plate Number\n * - Input\n */\n\n/* PLATE NUMBER\n -------------------- */\n\n:host {\n  display: block;\n}\n\n.plate-number {\n  --margin-bottom: 0;\n}\n\n.plate-number-start,\n.plate-number-end {\n  width: 1.75rem;\n  height: calc(3rem - 0.25rem);\n  background: var(--road-info-50);\n}\n\n.input-group-prepend {\n  margin-right: -1px;\n}\n\n.input-group-prepend,\n.input-group-append {\n  padding: 0;\n}\n\n.plate-number-start {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin-right: 0;\n  margin-left: 1px;\n  color: var(--road-icon-inverse);\n  border-radius: 0.125rem 0 0 0.125rem;\n}\n\n.plate-number-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #f3db53;\n}\n\n.plate-number-location {\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n}\n\n.plate-number-end {\n  margin-right: 1px;\n  border-radius: 0 0.125rem 0.125rem 0;\n}\n\n.plate-number-be .plate-number-input {\n  color: var(--road-on-danger-surface);\n}\n\n.plate-number-be .plate-number-input,\n.plate-number-be .input-group-append,\n.plate-number-be .input-group-prepend {\n  border-color: var(--road-danger-outline);\n}\n\n/* INPUT\n -------------------- */\n\n.plate-number-input {\n  position: relative;\n  display: block;\n  height: 3rem;\n  margin: 0;\n  font-family: var(--road-font, sans-serif);\n  font-size: var(--road-heading-04);\n  font-weight: 700;\n  color: var(--road-on-surface);\n  text-align: center;\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0;\n  box-shadow: none;\n  appearance: none;\n}\n\n.plate-number-input::placeholder {\n  color: var(--road-on-surface-weak);\n  opacity: 1;\n}\n\n/**\n * Disabled state\n */\n\n.plate-number-input:disabled {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n.plate-number-input:disabled ~ .input-group-prepend,\n.plate-number-input:disabled ~ .input-group-append {\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .plate-number-input:not(:disabled):not([readonly]):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.plate-number-input:not([readonly]):focus {\n  outline: auto;\n}\n\n/* MOTORBIKE\n -------------------- */\n\n.motorbike-plate .plate-number-input {\n  height: 6rem;\n  padding: 0.75rem 1rem 0;\n  resize: none;\n  border-left: 0;\n}\n\n.motorbike-plate .input-group-prepend,\n.motorbike-plate .input-group-append {\n  align-items: flex-start;\n  height: 6rem;\n  padding: 0;\n}\n\n.motorbike-plate .plate-number-start {\n  margin-top: 1px;\n  border-radius: 0.125rem 0 0;\n}\n\n.motorbike-plate .plate-number-end {\n  margin-top: 1px;\n  border-radius: 0 0.125rem 0 0;\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { licensePlateStarEu } from '../../../icons';\n\n@Component({\n  tag: 'road-plate-number',\n  styleUrl: 'plate-number.css',\n  scoped: true,\n})\nexport class PlateNumber {\n\n  private countries = [\n    {\n      country: 'FR',\n      letter: 'F',\n      placeholder: 'AT-857-YY',\n    },\n    {\n      country: 'BE',\n      letter: 'B',\n      placeholder: '1-AAA-001',\n    },\n    {\n      country: 'IT',\n      letter: 'I',\n      placeholder: 'AT 814TX',\n    },\n    {\n      country: 'ES',\n      letter: 'E',\n      placeholder: '9512 HVY',\n    },\n    {\n      country: 'PT',\n      letter: 'P',\n      placeholder: '13 24 PZ',\n    },\n    {\n      country: 'PL',\n      letter: 'PL',\n      placeholder: 'GD 921KF',\n    },\n    {\n      country: 'AT',\n      letter: 'A',\n      placeholder: 'FF 10 FF',\n    },\n    {\n      country: 'DE',\n      letter: 'D',\n      placeholder: 'RA KL 8136',\n    }\n  ];\n\n  /**\n   * country of the plate\n   */\n  @Prop() country: 'FR' | 'BE' | 'IT' | 'ES' | 'PT' | 'PL' | 'AT' | 'DE' = 'FR';\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * overwrite the default placeholder\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Enable motorbike display\n   */\n   @Prop() motorbike?: boolean;\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 a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\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      input.value = input.value.toUpperCase() || \"\";\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const motorbikeClass = this.motorbike ? 'motorbike-plate' : '';\n\n    return (\n      <road-input-group class={`plate-number plate-number-${this.country.toLowerCase()} ${motorbikeClass}`}>\n        <label slot=\"prepend\" class=\"input-group-prepend\">\n          <div class=\"plate-number-start\">\n            <road-icon class=\"plate-number-icon\" icon={licensePlateStarEu}></road-icon>\n            <div class=\"plate-number-location\" aria-label={this.country} role=\"img\">\n              {this.countries\n                .filter(item => item.country === this.country)[0].letter}\n            </div>\n          </div>\n        </label>\n        {this.motorbike\n          ? (\n            <textarea\n              class=\"form-control plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              maxlength=\"9\"\n              rows={2}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            >\n            </textarea>\n          )\n          : (\n            <input\n              class=\"plate-number-input mb-0\"\n              disabled={this.disabled}\n              placeholder={this.placeholder != null ? this.placeholder :  this.countries.filter(item => item.country === this.country)[0].placeholder}\n              readOnly={this.readonly}\n              value={value}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onFocus={this.onFocus}\n            />\n          )}\n        <label slot=\"append\" class=\"input-group-append\">\n          <div class=\"plate-number-end\"></div>\n        </label>\n      </road-input-group>\n    );\n  }\n\n}"],"version":3}

package/dist/cjs/road-segmented-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.js');
 
-const segmentedButtonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.5rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-primary);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-top:1px solid var(--road-primary);border-bottom:1px solid var(--road-primary);border-left:1px solid var(--road-primary);border-radius:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:first-child){border:1px solid var(--road-primary);border-right:0;border-radius:999em 0 0 999em}:host(:last-child){border:1px solid var(--road-primary);border-radius:0 999em 999em 0}:host(.btn-sm){height:2rem;font-size:var(--road-button-small)}:host(.tab-selected){color:var(--road-primary-contrast);background-color:var(--road-primary)}:host(.tab-selected:hover){background-color:var(--road-button-primary-variant)}:host(:hover){background:var(--road-primary-90)}:host(.focus-visible){background:var(--road-primary-90);outline:0}:host(.tab-selected.focus-visible){background-color:var(--road-button-primary-variant)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;max-height:2.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}";
+const segmentedButtonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;flex:1;align-items:center;justify-content:center;max-height:2.5rem;font-size:var(--road-button-medium);font-weight:700;color:var(--road-primary);text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:var(--road-surface);border-top:1px solid var(--road-primary);border-bottom:1px solid var(--road-primary);border-left:1px solid var(--road-primary);border-radius:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:first-child){border:1px solid var(--road-primary);border-right:0;border-radius:999em 0 0 999em}:host(:last-child){border:1px solid var(--road-primary);border-radius:0 999em 999em 0}:host(.btn-sm){height:2rem;font-size:var(--road-button-small)}:host(.tab-selected){color:var(--road-primary-contrast);background-color:var(--road-primary)}:host(.tab-selected:hover){background-color:var(--road-button-primary-variant)}:host(:hover){background:var(--road-primary-90)}:host(.focus-visible){background:var(--road-primary-90);outline:auto}:host(.tab-selected.focus-visible){background-color:var(--road-button-primary-variant)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;max-height:2.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}";
 
 const SegmentedButton = class {
   constructor(hostRef) {

package/dist/cjs/road-segmented-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-segmented-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,69DAA69D;;MCY3+D,eAAe;;;;;IA+DlB,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;gBAhE4B,IAAI;oBAKE,KAAK;;;EAiBzC,kBAAkB,CAAC,EAAe;IAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;IAEpD,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;MACnH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;KAC5C;GACF;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MAEH,EAAE,CAAC,cAAc,EAAE,CAAC;KACrB;GACF;EAED,IAAY,QAAQ;IAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAErD,IAAI,WAAW,EAAE;MACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KACzC;IAED,OAAO,CAAC,CAAC;GACV;EAYD,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGpE,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,cAAc,GAAG,EAAE,GAAG,IAAI,EAClD,KAAK,EAAE;QACL,cAAc,EAAE,QAAQ;QACxB,CAAC,GAAG,SAAS,EAAE,GAAG,IAAI;OACvB,IAEDD,kBAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,IACtEA,qBAAO,CACJ,CACF,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/*\n * Tab button\n */\n\n\n/* BUTTON\n -------------------- */\n\n\n:host {\n  --border-radius: 0.25rem;\n  --font-size: var(--road-button-medium);\n  --margin-bottom: 1rem;\n  --padding-start: 1.5rem;\n  --padding-end: 1.5rem;\n  box-sizing: border-box;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  max-height: 2.5rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  color: var(--road-primary);\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-primary);\n  border-bottom: 1px solid var(--road-primary);\n  border-left: 1px solid var(--road-primary);\n  border-radius: 0;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n\n:host(:first-child){\n  border: 1px solid var(--road-primary);\n  border-right: 0;\n  border-radius: 999em 0 0 999em;\n}\n\n:host(:last-child){\n  border: 1px solid var(--road-primary);\n  border-radius: 0 999em 999em 0;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n  height: 2rem;\n  font-size: var(--road-button-small);\n}\n\n/**\n * Active state\n */\n\n:host(.tab-selected) {\n  color: var(--road-primary-contrast);\n  background-color: var(--road-primary);\n}\n\n:host(.tab-selected:hover) {\n  background-color: var(--road-button-primary-variant);\n}\n\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--road-primary-90);\n}\n\n/**\n * Focus state\n */\n\n\n:host(.focus-visible) {\n  background: var(--road-primary-90);\n  outline: 0;\n}\n\n:host(.tab-selected.focus-visible){\n  background-color: var(--road-button-primary-variant);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  max-height: 2.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n","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}"],"version":3}
+{"file":"road-segmented-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,g+DAAg+D;;MCY9+D,eAAe;;;;;IA+DlB,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;gBAhE4B,IAAI;oBAKE,KAAK;;;EAiBzC,kBAAkB,CAAC,EAAe;IAChC,MAAM,cAAc,GAAG,EAAE,CAAC,MAAqB,CAAC;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B,CAAC;IAEpD,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,cAAc,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;MACnH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;KAC5C;GACF;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MACH,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;QACjC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MAEH,EAAE,CAAC,cAAc,EAAE,CAAC;KACrB;GACF;EAED,IAAY,QAAQ;IAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAErD,IAAI,WAAW,EAAE;MACf,OAAO,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KACzC;IAED,OAAO,CAAC,CAAC;GACV;EAYD,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAEzC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGpE,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,cAAc,GAAG,EAAE,GAAG,IAAI,EAClD,KAAK,EAAE;QACL,cAAc,EAAE,QAAQ;QACxB,CAAC,GAAG,SAAS,EAAE,GAAG,IAAI;OACvB,IAEDD,kBAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,IACtEA,qBAAO,CACJ,CACF,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/segmented-button/segmented-button.css?tag=road-segmented-button&encapsulation=shadow","src/components/segmented-button/segmented-button.tsx"],"sourcesContent":["/*\n * Tab button\n */\n\n\n/* BUTTON\n -------------------- */\n\n\n:host {\n  --border-radius: 0.25rem;\n  --font-size: var(--road-button-medium);\n  --margin-bottom: 1rem;\n  --padding-start: 1.5rem;\n  --padding-end: 1.5rem;\n  box-sizing: border-box;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  max-height: 2.5rem;\n  font-size: var(--road-button-medium);\n  font-weight: 700;\n  color: var(--road-primary);\n  text-decoration: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: var(--road-surface);\n  border-top: 1px solid var(--road-primary);\n  border-bottom: 1px solid var(--road-primary);\n  border-left: 1px solid var(--road-primary);\n  border-radius: 0;\n  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n\n:host(:first-child){\n  border: 1px solid var(--road-primary);\n  border-right: 0;\n  border-radius: 999em 0 0 999em;\n}\n\n:host(:last-child){\n  border: 1px solid var(--road-primary);\n  border-radius: 0 999em 999em 0;\n}\n\n/**\n * Small\n */\n\n:host(.btn-sm) {\n  height: 2rem;\n  font-size: var(--road-button-small);\n}\n\n/**\n * Active state\n */\n\n:host(.tab-selected) {\n  color: var(--road-primary-contrast);\n  background-color: var(--road-primary);\n}\n\n:host(.tab-selected:hover) {\n  background-color: var(--road-button-primary-variant);\n}\n\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--road-primary-90);\n}\n\n/**\n * Focus state\n */\n\n\n:host(.focus-visible) {\n  background: var(--road-primary-90);\n  outline: auto;\n}\n\n:host(.tab-selected.focus-visible){\n  background-color: var(--road-button-primary-variant);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  max-height: 2.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n","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}"],"version":3}

package/dist/cjs/road-select.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.js');
 
-const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:\" *\"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}";
+const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:\" *\"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}";
 
 const Select = class {
   constructor(hostRef) {

package/dist/cjs/road-select.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: auto;\n  padding: 0.75rem 3rem 0 1rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n.form-select:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n  color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-select:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n  min-height: 3.5rem;\n  padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n  min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n  min-height: 2.5rem;\n  padding: 1rem 1rem 0;\n  font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n  top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n  display: block;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-select',\n  styleUrl: 'select.css',\n  scoped: true,\n})\nexport class Select {\n\n  /**\n   * The id of select\n   */\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }> = [];\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n   * this attribute represents the number of rows in the list that should be visible at one time.\n   */\n  @Prop() size: number = 0;\n\n  /**\n   * The sizes of the input.\n   */\n  @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.selectId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * the value of the select.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n  }\n\n  componentWillLoad() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n  }\n\n  addSelected() {\n    // Désélection de toutes les options\n    this.options.forEach(option => option.selected = false);\n\n    // Sélection de la nouvelle option si elle correspond à la valeur actuelle\n    const selectedOption = this.options.find(option => option.value == this.value);\n    if (selectedOption) {\n      selectedOption.selected = true;\n    }\n  }\n\n  resetSelection() {\n    this.value = null;\n    this.options.forEach(option => option.selected = false);\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || null;\n    }\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const labelId = this.selectId + '-label';\n    const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n        class={`form-select ${hasValueClass} ${isInvalidClass}`}\n        id={this.selectId}\n        aria-disabled={this.disabled ? 'true' : null}\n        autoFocus={this.autofocus}\n        disabled={this.disabled}\n        name={this.name}\n        required={this.required}\n        size={this.size}\n        onChange={this.onChange}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      >\n        <option\n          selected={!this.value} // sélectionné si this.value est null ou vide\n          disabled\n          hidden\n          style={{ display: 'none' }}\n          value=\"\"\n        >\n        </option>\n        {this.options && this.options.map(option => (\n          <option\n            value={option.value}\n            selected={this.value !== null && option.value == this.value}\n          >\n            {option.label}\n          </option>\n        ))}\n      </select>\n        <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet selectIds = 0;\n"],"version":3}
+{"file":"road-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: auto;\n  padding: 0.75rem 3rem 0 1rem;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface);\n  background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n  background-color: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n.form-select:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n  display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n  color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-select:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n  color: var(--road-on-surface-disabled);\n  cursor: not-allowed;\n  background-color: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-label-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n  color: var(--road-on-danger-surface);\n  content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n  min-height: 3.5rem;\n  padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n  top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n  min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n  min-height: 2.5rem;\n  padding: 1rem 1rem 0;\n  font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n  top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-body-small);\n  color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n  border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n  display: block;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-select',\n  styleUrl: 'select.css',\n  scoped: true,\n})\nexport class Select {\n\n  /**\n   * The id of select\n   */\n  @Prop() selectId: string = `road-select-${selectIds++}`;\n\n  /**\n   * List of options of the select\n   */\n  @Prop() options: Array<{\n    value: string | number;\n    label: string;\n    selected?: boolean;\n  }> = [];\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n   * this attribute represents the number of rows in the list that should be visible at one time.\n   */\n  @Prop() size: number = 0;\n\n  /**\n   * The sizes of the input.\n   */\n  @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.selectId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * the value of the select.\n   */\n  @Prop({ mutable: true }) value?: any | null;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null;\n  }>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  valueChanged() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n\n    this.roadchange.emit({\n      value: this.value,\n    });\n    this.roadChange.emit({\n      value: this.value,\n    });\n  }\n\n  componentWillLoad() {\n    if (this.value === null) {\n      this.resetSelection();\n    } else {\n      this.addSelected();\n    }\n  }\n\n  addSelected() {\n    // Désélection de toutes les options\n    this.options.forEach(option => option.selected = false);\n\n    // Sélection de la nouvelle option si elle correspond à la valeur actuelle\n    const selectedOption = this.options.find(option => option.value == this.value);\n    if (selectedOption) {\n      selectedOption.selected = true;\n    }\n  }\n\n  resetSelection() {\n    this.value = null;\n    this.options.forEach(option => option.selected = false);\n  }\n\n  private onChange = (ev: Event) => {\n    const select = ev.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || null;\n    }\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const labelId = this.selectId + '-label';\n    const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host class={this.sizes && `select-${this.sizes}`}>\n        <select\n        class={`form-select ${hasValueClass} ${isInvalidClass}`}\n        id={this.selectId}\n        aria-disabled={this.disabled ? 'true' : null}\n        autoFocus={this.autofocus}\n        disabled={this.disabled}\n        name={this.name}\n        required={this.required}\n        size={this.size}\n        onChange={this.onChange}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      >\n        <option\n          selected={!this.value} // sélectionné si this.value est null ou vide\n          disabled\n          hidden\n          style={{ display: 'none' }}\n          value=\"\"\n        >\n        </option>\n        {this.options && this.options.map(option => (\n          <option\n            value={option.value}\n            selected={this.value !== null && option.value == this.value}\n          >\n            {option.label}\n          </option>\n        ))}\n      </select>\n        <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet selectIds = 0;\n"],"version":3}

package/dist/cjs/road-tab-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.js');
 
-const tabButtonCss = ":host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;font-size:1rem;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}";
+const tabButtonCss = ":host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}";
 
 const TabButton = class {
   constructor(hostRef) {

package/dist/cjs/road-tab-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-tab-button.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  min-height: 3.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 2px;\n  content: \"\";\n  opacity: 0;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: scaleX(0);\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: -webkit-box;\n  font-size: 1rem;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\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   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(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.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\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 { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"road-tab-button.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/*\n * Tab button\n *\n * Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n *\n */\n\n/**\n * @prop --padding-start: Left padding  of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n  box-sizing: border-box;\n  font-weight: 700;\n  color: var(--tab-color);\n  outline: 0;\n  transition: background 0.15s ease-in-out;\n}\n\n/**\n * Active state\n */\n\n:host(.tab-secondary) {\n  --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n  color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n  background: var(--tab-underline-selected);\n  opacity: 1;\n  transform: none;\n}\n\n/**\n * Hover state\n */\n\n:host(:hover) {\n  background: var(--tab-background-hover);\n}\n\n/**\n * Focus state\n */\n\n:host(.focus-visible) {\n  background: var(--tab-background-focused);\n  outline: auto;\n}\n\n\n/* NATIVE\n -------------------- */\n\n.button-native {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: 100%;\n  height: 100%;\n  min-height: 3.5rem;\n  padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n  margin: 0;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  white-space: inherit;\n  cursor: pointer;\n  background: transparent;\n  -webkit-user-drag: none;\n  border-color: initial;\n  border-style: initial;\n  border-width: 0;\n  border-radius: inherit;\n  border-image: initial;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/* UNDERLINE\n -------------------- */\n\n.button-native::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 100%;\n  height: 2px;\n  content: \"\";\n  opacity: 0;\n  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  transform: scaleX(0);\n  transform-origin: center;\n}\n\n/* INNER\n -------------------- */\n\n.button-inner {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-flow: inherit;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n/* ICON\n -------------------- */\n\n:host ::slotted(road-icon) {\n  color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n  margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n  flex-direction: column;\n}\n\n/* LABEL\n -------------------- */\n\n:host ::slotted(road-label) {\n  display: -webkit-box;\n  max-width: 12.5rem;\n  overflow: hidden;\n  font-size: 1rem;\n  color: var(--road-on-surface);\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n  margin-top: 0.25rem;\n  font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - Content of the tab-button, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-tab-button',\n  styleUrl: 'tab-button.css',\n  shadow: true,\n})\nexport class TabButton {\n\n  @Element() el!: HTMLRoadTabButtonElement;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * Set the layout of the text and icon in the tab bar.\n   * It defaults to `'icon-start'`.\n   */\n  @Prop() layout?: 'icon-start' | 'icon-top' = 'icon-start';\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   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadtabbuttonclick!: EventEmitter;\n  /** @internal */\n  @Event() roadTabButtonClick!: EventEmitter;\n\n  @Listen('roadTabBarChanged', { target: 'window' })\n  @Listen('roadTabbarchanged', { target: 'window' })\n  onTabBarChanged(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.roadtabbuttonclick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n      this.roadTabButtonClick.emit({\n        tab: this.tab,\n        href: this.href,\n        selected: this.selected,\n      });\n\n      ev.preventDefault();\n    }\n  }\n\n  private get hasLabel() {\n    return !!this.el.querySelector('road-label');\n  }\n\n  private get hasIcon() {\n    return !!this.el.querySelector('road-icon');\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 { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"tab\"\n        tabindex={tabIndex}\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `tab-button-${tab}` : null}\n        class={{\n          'tab-selected': selected,\n          'tab-has-label': hasLabel,\n          'tab-has-icon': hasIcon,\n          'tab-has-label-only': hasLabel && !hasIcon,\n          'tab-has-icon-only': hasIcon && !hasLabel,\n          [`tab-layout-${layout}`]: true,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/road-textarea.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.js');
 
-const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"date\"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"time\"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-surface-weak)}";
+const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant)}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"date\"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"time\"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-surface-weak)}";
 
 const Textarea = class {
   constructor(hostRef) {

package/dist/cjs/road-textarea.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"road-textarea.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n  outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  color: var(--road-on-surface-weak);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n  height: auto;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n  resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-textarea',\n  styleUrl: 'textarea.css',\n  scoped: true,\n})\nexport class Textarea {\n\n  /**\n   * The id of textarea\n   */\n  @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize: string = 'none';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the textarea.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.textareaId;\n\n  /**\n   * Instructional text that shows before the textarea has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n    /**\n   * If `false`, to disabled resize.\n   */\n    @Prop() resize: boolean = true;\n\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n   */\n  @Prop() cols?: number;\n\n  /**\n   * The number of rows of the control.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Indicates how the control wraps text.\n   */\n  @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.textareaId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value });\n    this.roadChange.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.textareaId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const noResizeClass = this.resize == false ? 'no-resize' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <textarea\n          class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n          id={this.textareaId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoFocus={this.autofocus}\n          enterKeyHint={this.enterkeyhint}\n          inputMode={this.inputmode}\n          maxLength={this.maxlength}\n          minLength={this.minlength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          value={value}\n          spellcheck={this.spellcheck}\n          cols={this.cols}\n          rows={this.rows}\n          wrap={this.wrap}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n        >\n        </textarea>\n        <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}
+{"file":"road-textarea.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/*\n * Textarea\n *\n * Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n */\n\n:host {\n  position: relative;\n  display: block;\n  margin-bottom: 1rem;\n  font-family: var(--road-font, sans-serif);\n  color: var(--road-on-surface);\n}\n\n/* INPUT\n -------------------- */\n\n.form-control {\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  height: 3rem;\n  padding: 0.75rem 1rem 0;\n  margin: 0;\n  font-size: var(--road-body-medium);\n  color: var(--road-on-surface);\n  background: var(--road-surface);\n  border: 1px solid var(--road-input-outline);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  appearance: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-control::placeholder {\n  color: var(--road-on-surface-extra-weak);\n  opacity: 1;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n  .form-control:not(:disabled):hover {\n    border-color: var(--road-input-outline-variant);\n  }\n}\n\n/**\n * Focus state\n */\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n\n/* stylelint-disable */\n\n/* IE FIX */\n\n.form-control:-ms-input-placeholder ~ .form-label {\n  transform: scale(0.625) translateY(-0.625rem);\n}\n/* stylelint-enable */\n\n.form-control:not(:disabled):focus {\n  border-color: var(--road-input-outline-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-control:disabled,\n.form-control[readonly] {\n  color: var(--road-on-surface-weak);\n  cursor: not-allowed;\n  background: var(--road-surface-disabled);\n  opacity: 1;\n}\n\n/* TEXTAREA\n -------------------- */\n\n.textarea-control {\n  height: auto;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n  resize: none;\n}\n\n/* LABEL\n -------------------- */\n\n.form-label {\n  position: absolute;\n  top: 0.75rem;\n  left: 1rem;\n  display: block;\n  font-size: var(--road-body-medium);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  pointer-events: none;\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  transform-origin: 0 0;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.input-xl) {\n  --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n  padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n  top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n  transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n  border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n  display: block;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n  margin-top: 0.5rem;\n  font-size: var(--road-helper-medium);\n  color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'road-textarea',\n  styleUrl: 'textarea.css',\n  scoped: true,\n})\nexport class Textarea {\n\n  /**\n   * The id of textarea\n   */\n  @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalize: string = 'none';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have focus when the page loads.\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * If `true`, the user cannot interact with the textarea.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n   */\n  @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n  /**\n   * A hint to the browser for which enter key to display.\n   * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n   * `\"previous\"`, `\"search\"`, and `\"send\"`.\n   */\n  @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.textareaId;\n\n  /**\n   * Instructional text that shows before the textarea has a value.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The sizes of the input.\n   */\n   @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n    /**\n   * If `false`, to disabled resize.\n   */\n    @Prop() resize: boolean = true;\n\n  /**\n   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n   */\n  @Prop() cols?: number;\n\n  /**\n   * The number of rows of the control.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Indicates how the control wraps text.\n   */\n  @Prop() wrap?: 'hard' | 'soft' | 'off';\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * Label for the field\n   */\n  @Prop() label: string = `${this.textareaId}-label`;\n\n  /**\n   * Error message for the field\n   */\n  @Prop() error?: string;\n\n  /**\n   * Helper message for the field\n   */\n  @Prop() helper?: string;\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.roadchange.emit({ value: this.value });\n    this.roadChange.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() roadinput!: EventEmitter<KeyboardEvent>;\n  /** @internal */\n  @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() roadchange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n  /** @internal */\n  @Event() roadChange!: EventEmitter<{\n    value: string | undefined | null\n  }>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() roadblur!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea has focus.\n   */\n  @Event() roadfocus!: EventEmitter<void>;\n  /** @internal */\n  @Event() roadFocus!: EventEmitter<void>;\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.roadinput.emit(ev as KeyboardEvent);\n    this.roadInput.emit(ev as KeyboardEvent);\n  };\n\n  private onBlur = () => {\n    this.roadblur.emit();\n    this.roadBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.roadfocus.emit();\n    this.roadFocus.emit();\n  };\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.textareaId + '-label';\n    const hasValueClass = this.value !== '' ? 'has-value' : '';\n    const noResizeClass = this.resize == false ? 'no-resize' : '';\n    const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n        <textarea\n          class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n          id={this.textareaId}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-labelledby={labelId}\n          disabled={this.disabled}\n          autoCapitalize={this.autocapitalize}\n          autoFocus={this.autofocus}\n          enterKeyHint={this.enterkeyhint}\n          inputMode={this.inputmode}\n          maxLength={this.maxlength}\n          minLength={this.minlength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          required={this.required}\n          value={value}\n          spellcheck={this.spellcheck}\n          cols={this.cols}\n          rows={this.rows}\n          wrap={this.wrap}\n          onInput={this.onInput}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n        >\n        </textarea>\n        <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n        {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n        {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n      </Host>\n    );\n  }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}

package/dist/cjs/road-tooltip.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-12592729.js');
 
-const tooltipCss = ":host{--max-width:100%;--z-index:1;--width:max-content;position:relative;display:inline-block}:host([trigger=\"hover\"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger=\"hover\"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:6rem;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign=\"left\"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"top-left\"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-left\"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position=\"top-right\"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-right\"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}";
+const tooltipCss = ":host{--max-width:85vw;--z-index:1;--width:max-content;position:relative;display:inline-block}:host(:hover){cursor:pointer}:host([trigger=\"hover\"]) .tooltip{display:none}@media (min-width: 1200px){:host([trigger=\"hover\"]) .tooltip{display:block}}.tooltip{position:absolute;top:-0.5rem;left:50%;z-index:1;width:var(--width);min-width:100%;max-width:var(--max-width);padding:0.5rem;font-family:var(--road-font);font-size:var(--road-body-small);color:var(--road-on-surface);text-align:center;pointer-events:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);opacity:0;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateX(-50%) translateY(-100%)}:host([contentalign=\"left\"]) .tooltip{text-align:left}.tooltip.tooltip-text-left::after{text-align:left}.tooltip-open{opacity:1}:host([data-tooltip-position=\"top\"]) .tooltip{left:50%;transform:translateX(-50%) translateY(-70%)}:host([data-tooltip-position=\"top\"]) .tooltip-open{left:50%;transform:translateX(-50%) translateY(-100%)}:host([data-tooltip-position=\"top-left\"]) .tooltip{left:0%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-left\"]) .tooltip-open{transform:translateY(-100%)}:host([data-tooltip-position=\"top-right\"]) .tooltip{left:50%;transform:translateY(-70%)}:host([data-tooltip-position=\"top-right\"]) .tooltip-open{left:100%;transform:translateY(-100%)}:host([data-tooltip-position=\"left\"]) .tooltip{top:50%;left:0%;margin-right:0.5rem;transform:translateX(-94%) translateY(-55%)}:host([data-tooltip-position=\"left\"]) .tooltip-open{transform:translateX(-103%) translateY(-55%)}:host([data-tooltip-position=\"bottom\"]) .tooltip{top:100%;left:50%;margin-top:0.5rem;transform:translateX(-50%) translateY(-40%)}:host([data-tooltip-position=\"bottom\"]) .tooltip-open{transform:translateX(-50%) translateY(-6%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip{top:100%;left:0;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip{top:100%;left:100%;margin-top:0.5rem;transform:translateY(-40%)}:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open{transform:translateY(-6%)}:host([data-tooltip-position=\"right\"]) .tooltip{top:50%;left:100%;margin-left:0.5rem;transform:translateX(-14%) translateY(-55%)}:host([data-tooltip-position=\"right\"]) .tooltip-open{transform:translateX(-4%) translateY(-55%)}";
 
 const Tooltip = class {
   constructor(hostRef) {
@@ -24,6 +24,16 @@ const Tooltip = class {
         this.close();
       }
     };
+    this.onFocus = () => {
+      if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
+        this.open();
+      }
+    };
+    this.onBlur = () => {
+      if (this.hasTrigger('focus') || this.hasTrigger('hover')) {
+        this.close();
+      }
+    };
     this.tooltipId = `road-tooltip-${++tooltipIds}`;
     this.content = '';
     this.position = 'top';
@@ -48,7 +58,9 @@ const Tooltip = class {
     return triggers.includes(triggerType);
   }
   render() {
-    return (index.h(index.Host, { onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, "data-tooltip-position": this.position }, index.h("slot", { "aria-describedby": this.tooltipId }), index.h("div", { part: "tooltip", id: this.tooltipId, class: {
+    return (index.h(index.Host, { onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
+      ,
+      "data-tooltip-position": this.position }, index.h("slot", { "aria-describedby": this.tooltipId }), index.h("div", { part: "tooltip", id: this.tooltipId, class: {
         tooltip: true,
         'tooltip-open': this.isOpen,
       }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, index.h("slot", { name: "tooltip-content" }))));