@roadtrip/components 3.33.7 → 3.34.0

package/dist/collection/components/toolbar-title/toolbar-title.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ToolbarTitle {
     render() {
-        return (h("div", { key: '79254e204a533572207f3779ee0d20d814bbbecd', class: "toolbar-title" }, h("slot", { key: '29cce3ccf19f113e99e1b2b4c84322efc0b94f94' })));
+        return (h("div", { key: '0e4f5a9a555499bdafd072e142da81808f878091', class: "toolbar-title" }, h("slot", { key: '180b36b7360f47a0ebb168100e2fb711c8c18b78' })));
     }
     static get is() { return "road-toolbar-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar-title-page/toolbar-title-page.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ToolbarAppName {
     render() {
-        return (h("div", { key: 'dc61258415913c4112dd06bcc23a94db38fab00e', class: "toolbar-title-page" }, h("slot", { key: 'f39c19ff690566100558556751e8380bb448eb72' })));
+        return (h("div", { key: 'e2702e4bac40d997c95962c2197b80a3f2716da2', class: "toolbar-title-page" }, h("slot", { key: 'a5af4e9645e566f3177506394b3e7d34d738e7e5' })));
     }
     static get is() { return "road-toolbar-title-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar-v2/toolbar-v2.js

@@ -9,7 +9,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ToolbarV2 {
     render() {
-        return (h(Host, { key: 'a020bd723a459c6bb443645007df7b1f215ea851', class: "toolbar" }, h("div", { key: '2d2cc4b896593cf69c7046ee877b5c9b7ba53eb5', class: "toolbar-container" }, h("div", { key: '55c6f4b55cc7c5ddae5965a156bcfb6cafec1d49', class: "toolbar-container-content-left" }, h("slot", { key: '6b249b32d73240846717ac50a8d1544511a2fe6d', name: "start" }), h("slot", { key: '9187ad0c4fc712d3ad16af1f72db9bd7382d8e6e', name: "primary" })), h("div", { key: 'f5936eb58c38d6cd5758d213f40e6bc09df3f7e8', class: "toolbar-content" }, h("slot", { key: 'c61051186fb1f726fcc104d9f3a827e091b46ff3' })), h("div", { key: '7ee04f220d5377315bc8c320461963def7a7d05f', class: "toolbar-container-content-right" }, h("slot", { key: '196976ade22edf382dee91352082d31b5fce015f', name: "secondary" }), h("slot", { key: 'ea25da8140c7525ce6ed3e712c64ccb105fcbb71', name: "end" })))));
+        return (h(Host, { key: 'aa969f064908bea9d7b1291fdc5165dc7e4ec74b', class: "toolbar" }, h("div", { key: '6e1372064ad1c1a636a151856b267ed27d683f50', class: "toolbar-container" }, h("div", { key: '950306ea6570ad3ce8347d464dd02ed242a6856d', class: "toolbar-container-content-left" }, h("slot", { key: 'ec37c637dd7d95b86971e18a638273453443bfe9', name: "start" }), h("slot", { key: '358f719af8508135698e6fdad3cebe456c53e08b', name: "primary" })), h("div", { key: '7580a7c99a3cf2cd34ac56db6eaa40ee983ed4ee', class: "toolbar-content" }, h("slot", { key: '08f8b181ccc7b913a5957f9ce444c5a87f4be090' })), h("div", { key: '8587600a63e0994d0712f85ab09e07cca4021b1f', class: "toolbar-container-content-right" }, h("slot", { key: 'e053ccd0b7650c2da116ca033ebfa0c8ab14e110', name: "secondary" }), h("slot", { key: '4d3d4436c3a07d0620e38bf3d6ae7c12c0eb7125', name: "end" })))));
     }
     static get is() { return "road-toolbar-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.css

@@ -115,6 +115,20 @@
   transform: translateY(-100%);
 }
 
+/**
+ * Top end
+ */
+
+ :host([data-tooltip-position="top-end"]) .tooltip {
+  left: auto;
+  right: 0%;
+  transform: translateY(-70%);
+}
+
+:host([data-tooltip-position="top-end"]) .tooltip-open {
+  transform: translateY(-100%);
+}
+
 /**
  * Left
  */
@@ -175,6 +189,23 @@
   transform: translateY(-6%);
 }
 
+
+/**
+ * Bottom end
+ */
+
+ :host([data-tooltip-position="bottom-end"]) .tooltip {
+  margin-top: 0.5rem;
+  left: auto;
+  top: 100%;
+  right: 0;
+  transform: translateY(-40%);
+}
+
+:host([data-tooltip-position="bottom-end"]) .tooltip-open {
+  transform: translateY(-6%);
+}
+
 /**
  * Right
  */

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

@@ -95,12 +95,12 @@ export class Tooltip {
         return triggers.includes(triggerType);
     }
     render() {
-        return (h(Host, { key: 'a41350a6114e63e0d73759b29c0afa19d467ac4b', onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, tabindex: "0" // Makes the element focusable
+        return (h(Host, { key: '172216930c32f4de48df7264149b90c95cdf299f', 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 }, h("slot", { key: 'e2985be0f2af606eb675875a1ef0e53190c54b50', "aria-describedby": this.tooltipId }), h("div", { key: '45f8da72265c812ebbc781cafd7356f02294c2ae', part: "tooltip", id: this.tooltipId, class: {
+            "data-tooltip-position": this.position }, h("slot", { key: 'e87dd66f22d8586f1916b4fdd9839bec64d3aea4', "aria-describedby": this.tooltipId }), h("div", { key: 'b61044b9938cf4859676d05a76a6fc4e8f8fb77a', part: "tooltip", id: this.tooltipId, class: {
                 tooltip: true,
                 'tooltip-open': this.isOpen,
-            }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, h("slot", { key: 'a3d80cc2d48e26c0a5c2f45e38854601c1f3ea83', name: "tooltip-content" }))));
+            }, role: "tooltip", "aria-hidden": !this.isOpen ? 'true' : 'false' }, this.content, h("slot", { key: 'a7a84bbde98a3ee34b8ab8c1d397446dbd314f2e', name: "tooltip-content" }))));
     }
     static get is() { return "road-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -160,8 +160,8 @@ export class Tooltip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left'",
-                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "original": "| 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-left\" | \"bottom-right\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-left\" | \"top-right\" | \"top-start\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n  @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n  document.addEventListener('keydown', this.handleKeyDown);\n  document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n  document.addEventListener('keydown', this.handleKeyDown);\n  document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n  document.removeEventListener('keydown', this.handleKeyDown);\n  document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n  this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n  this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n  if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n    this.open();\n  }\n};\n\n\n  private onBlur = () => {\n    if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        tabindex=\"0\"  // Makes the element focusable\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen ? 'true' : 'false'}\n        >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n  tag: 'road-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n\n  @Element() el!: HTMLRoadTooltipElement;\n\n  /**\n   * The id of tooltip\n   */\n  @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n  /**\n   * The tooltip's content.\n   */\n  @Prop() content = '';\n\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left' = 'top';\n\n  /**\n   * The content align of the tooltip.\n   */\n  @Prop() contentAlign:\n    | 'center'\n    | 'left' = 'center';\n\n  /**\n   * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n   */\n  @Prop({ mutable: true }) isOpen = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover';\n\n  /**\n   * Open the tooltip.\n   */\n  @Method()\n  async open() {\n    this.isOpen = true;\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  async close() {\n    this.isOpen = false;\n  }\n\n  private onClick = () => {\n    if (this.hasTrigger('click')) {\n      this.isOpen ? this.close() : this.open();\n    }\n  };\n\n  private onMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.open();\n    }\n  };\n\n  private onMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\nprivate isKeyboardNavigation = false;\n\n// Écoute les événements pour détecter le mode d'interaction\ncomponentDidMount() {\n  document.addEventListener('keydown', this.handleKeyDown);\n  document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentDidLoad() {\n  document.addEventListener('keydown', this.handleKeyDown);\n  document.addEventListener('mousedown', this.handleMouseDown);\n}\n\ncomponentWillUnmount() {\n  document.removeEventListener('keydown', this.handleKeyDown);\n  document.removeEventListener('mousedown', this.handleMouseDown);\n}\n\n\nprivate handleKeyDown = () => {\n  this.isKeyboardNavigation = true;\n};\n\nprivate handleMouseDown = () => {\n  this.isKeyboardNavigation = false;\n};\n\nprivate onFocus = () => {\n  if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n    this.open();\n  }\n};\n\n\n  private onBlur = () => {\n    if (this.isKeyboardNavigation && this.hasTrigger('hover')) {\n      this.close();\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  render() {\n    return (\n      <Host\n        onMouseOver={this.onMouseOver}\n        onMouseOut={this.onMouseOut}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        tabindex=\"0\"  // Makes the element focusable\n        data-tooltip-position={this.position}\n      >\n        <slot aria-describedby={this.tooltipId} />\n\n        <div\n          part=\"tooltip\"\n          id={this.tooltipId}\n          class={{\n            tooltip: true,\n            'tooltip-open': this.isOpen,\n          }}\n          role=\"tooltip\"\n          aria-hidden={!this.isOpen ? 'true' : 'false'}\n        >\n          {this.content}\n          <slot name=\"tooltip-content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet tooltipIds = 0;\n"]}

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

@@ -33,7 +33,7 @@ Playground.argTypes = {
   },
   position: {
     description: "The position of the tooltip.",
-    options: ['top', 'left', 'bottom', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+    options: ['top', 'left', 'bottom', 'right', 'top-left', 'top-right', 'top-start', 'top-end', 'bottom-left', 'bottom-right', 'bottom-end'],
     control: {
       type: 'radio',
     },

package/dist/esm/road-badge_14.entry.js

@@ -18025,7 +18025,11 @@ const Input = class {
         const hasValueClass = this.value !== '' && this.value !== null ? 'has-value' : '';
         const lessLabelClass = this.label !== '' ? '' : 'less-label';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (h(Host, { key: 'fc46bf9cff7ec02e8d3d17dead1b78395af2c1a3', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '9fc673bca84ff6da172f64daafe4689f96f98830', class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input' }), h("label", { key: '54aa1d6091b64ceccde5b9d2735694d21dd140a7', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && h("p", { key: 'f54869bf7e4fe8d49fc434d15ae339d366eaf2e1', class: "invalid-feedback" }, h("road-icon", { key: '4bd03b7ceb946a33e2fd1dfe08ee3ac2ccd7639e', slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && h("p", { key: '50c67a366a468e25a5401588a41f9c02a2500d83', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: 'b750ff9616fb3651af3f9db71edc0564cdc932be', name: "checklistPassword" })));
+        return (h(Host, { key: '1dc5be8cca2464709ea4661a875c35feaec6d7b3', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value, blockdecimal: this.blockdecimal }, h("input", { key: '57575b6d01b4bf45703e76e0ac4b7e75aa7177ae', class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.type === 'number' ? (event) => this.handleKeyDown(event) : undefined, "data-cy": 'road-input' }), h("label", { key: '90ab2cc491c203f18e37654e361a03bf31f6e908', class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && (Array.isArray(this.error)
+            ? // Si error est un tableau, on itère et génère un <p> pour chaque élément
+                this.error.map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))
+            : // Si error est une chaîne, on la divise avec split et génère un <p> pour chaque élément
+                this.error.split(',').map((err, index) => (h("p", { key: index, class: "invalid-feedback" }, h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), err.trim(), " ")))), this.helper && this.helper !== '' && h("p", { key: 'ac10569a3eacf0e85142238d18139bb4b95c24e3', class: "helper" }, this.helper), this.type && this.type == 'password' && h("slot", { key: '17e2a2ea624850955a29167e0475cff88960cc49', name: "checklistPassword" })));
     }
     static get watchers() { return {
         "debounce": ["debounceChanged"],
@@ -18093,7 +18097,7 @@ const InputGroup = class {
             ? `size-${this.el.querySelector('road-input').sizes}`
             : '';
         const disabledClass = this.disabled ? 'is-disabled' : '';
-        return (h("div", { key: '6be26d5573ca7c422cded4e27a2761b252f90e14', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '7a76ed14278e0081e97bd9db5eb459cb847f05ce', class: "input-group-prepend" }, h("slot", { key: '4865913f1d0ebb0e3ee27c46cefd2fa0ff6bbbab', name: "prepend" })), h("slot", { key: '778cf1d88d5aade64457445ad633160ab12c1a15' }), h("div", { key: '3c513c9392992711d9d8a47d3a390a4f14792bab', class: "input-group-append" }, h("slot", { key: '2eb9315f147dfd805822e4aa37428c6547eb66e8', name: "append" }))));
+        return (h("div", { key: '54938b0939fc88368a47099bd3263a4eaaa273fc', class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, h("div", { key: '3039896e2e22c633d4b298899488b16dc2d34018', class: "input-group-prepend" }, h("slot", { key: 'ad675a53558b83d6dd5b0ae044db538245da0316', name: "prepend" })), h("slot", { key: '1283ee327bbe9755e107a80cf700293c685429bf' }), h("div", { key: '677da10746507b1171498461da76d7e8e7d6056a', class: "input-group-append" }, h("slot", { key: '2bbf8d38a2343e362ee20bc8c3d54f88fd992eed', name: "append" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18156,13 +18160,13 @@ const Item = class {
                 target,
             };
         const showDetail = detail !== undefined && detail;
-        return (h(Host, { key: '9fb4b35e594ec2393232ad0a9403e279e2e2889c', "aria-disabled": disabled ? 'true' : null, class: {
+        return (h(Host, { key: '9b71788b470f7fc686c9953868c59515607d5b01', "aria-disabled": disabled ? 'true' : null, class: {
                 [`item-lines-${lines}`]: lines !== undefined,
-            } }, h(TagType, Object.assign({ key: '9fba47364f496d51e09e3b2a5a92dd00ef71ff87' }, attrs, { class: {
+            } }, h(TagType, Object.assign({ key: 'd05ff0c98f1a0713e935954b995e0f6476069414' }, attrs, { class: {
                 'item-native': true,
                 'item-active': this.active,
                 [`layout-${layout}`]: layout !== undefined,
-            }, part: "native", disabled: disabled }), h("slot", { key: 'fe656d0fa4a1f518f6ab7a43524e244d6eb37d30', name: "start" }), h("div", { key: 'd1c19e1d0a10b578799970249bf4e40cdddd9dc3', class: "item-inner" }, h("div", { key: '3523d2bd743dc2f16cc1dc2de844a3ab3be93ff2', class: "input-wrapper" }, h("slot", { key: 'a7da0e4dcf42fc54130eaafa1a08d16315b52d54' }), h("div", { key: 'd63ad621b6f43da35bec1a270ceacd40876b4d3e', class: "input-wrapper-info" }, h("road-label", { key: '14763d79d648cfbbb21136998287411ab3231cbc', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '5048f0bab07eb191b4ba3d8655a7890a45926541', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: 'ef5cef7e326421ea28f0420a81a1773b74adc8bf', name: "end" }), showDetail && h("road-icon", { key: 'ecb61fe5b2cd5e3ba3ba8b30427337cbde78fd78', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
+            }, part: "native", disabled: disabled }), h("slot", { key: '4287ffe1ac1fc6471bef8cc1c060637bd6889ef4', name: "start" }), h("div", { key: '70dff3ab1b88fc4e51e83280504c85cfdbef6e75', class: "item-inner" }, h("div", { key: '872a6387bceac2c8ef76d8ebd5ecc47cb6f93aa7', class: "input-wrapper" }, h("slot", { key: 'c0e117161a86fb92ed121ab1fdc71de76a9d1aae' }), h("div", { key: '23f4c082e69b0584cecadaf62c3cda21073068d6', class: "input-wrapper-info" }, h("road-label", { key: '7af0a0698d00c0681181038163b8f5c15ef82e9a', class: "input-wrapper-info-title" }, this.titleItem), h("p", { key: '87653ef8324a8e8b82270d697e657e242e9494be', class: "input-wrapper-info-text" }, this.text))), h("slot", { key: '4d58e9d7d5f808b3a7f6bc2dee4912015070a495', name: "end" }), showDetail && h("road-icon", { key: '6422e581f75db848cc4e788d7fd9f48709bd7588', icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
     }
     get el() { return getElement(this); }
 };
@@ -18176,7 +18180,7 @@ const Label = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("slot", { key: '3ba99679bcd840c743cbc724843909bd267d0ab2' }));
+        return (h("slot", { key: 'e6b8246e6673eeaa1d33517a58de2df43091c4dc' }));
     }
 };
 Label.style = RoadLabelStyle0;
@@ -18190,9 +18194,9 @@ const List = class {
     }
     render() {
         const { lines } = this;
-        return (h(Host, { key: 'ddd543051e3de681b5672d7ab87ebe742858da9c', class: {
+        return (h(Host, { key: 'a830b17499a394ad9bccaaed0aa2056ae538929b', class: {
                 [`list-lines-${lines}`]: lines !== undefined,
-            } }, h("slot", { key: '56e04b9869dc48d1011e422c57ec2578e61301c6' })));
+            } }, h("slot", { key: '1010f8f4a4376db24412ea8e5f407f3951ac8333' })));
     }
 };
 List.style = RoadListStyle0;
@@ -18205,7 +18209,7 @@ const Row = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '891c70924e7955aa953e3e233cd57dd6aff4068a' }, h("slot", { key: 'acb726260f4492a126b9aa1f51d89b329bf6a09c' })));
+        return (h(Host, { key: '4d56e5a10387b76a5b9848b29b66b5d1893c1b39' }, h("slot", { key: 'ba686ef7958ff67384c6ca8d88767f1dd55e9f5a' })));
     }
 };
 Row.style = RoadRowStyle0;
@@ -18219,7 +18223,7 @@ const Toolbar = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-        return (h(Host, { key: '3babdf893a7a89e310b620737ef852ee133ccebb', class: colorClass }, h("div", { key: 'de9400a86c87d427d22b496cd6ceb31cb93ccf54', class: "toolbar-container" }, h("slot", { key: '50559e69631b7581ad67338aea96acd42926b9ab', name: "start" }), h("slot", { key: '40bcbd63fb2f83d7c8294154734c58c0650ee182', name: "primary" }), h("div", { key: '4eec60ca600f33e3e0c6d9056c9913d8df7e62bd', class: "toolbar-content" }, h("slot", { key: 'f1105dc9a8ac7ff4cfc7e8e166d8a0e13c1bee73' })), h("slot", { key: 'ca6e18fc20fb0a636d54573ffb99074940e41bcc', name: "secondary" }), h("slot", { key: 'c73721561d9d3d38c38a9dc453757b185bbd81a5', name: "end" }))));
+        return (h(Host, { key: '1666aad03b553002af15625a73060f5dbf4601b8', class: colorClass }, h("div", { key: 'e627795b3897fe397d86a9c879ea2df29ca40a30', class: "toolbar-container" }, h("slot", { key: '123ce565840045140bf2271fada84db838c1b0d6', name: "start" }), h("slot", { key: '115bb3ee9c656a81b61a601a319ec6923657894a', name: "primary" }), h("div", { key: '123ec182ca9d3dfd6bb2437c5689cce4c6e63069', class: "toolbar-content" }, h("slot", { key: '9c7a630301f524c0adef6bbc6ca6e89cabcba81a' })), h("slot", { key: 'a37d49d76f8df43da0e2969e17497f06e0eae184', name: "secondary" }), h("slot", { key: '62e6e5cbd5d9b1fdc2dead440ef9e60425796f75', name: "end" }))));
     }
 };
 Toolbar.style = RoadToolbarStyle0;