@roadtrip/components 3.14.3 → 3.16.0

package/dist/types/components.d.ts

@@ -545,25 +545,10 @@ export namespace Components {
         "position": string;
     }
     interface RoadDropdown {
-        /**
-          * The opening direction.
-         */
         "direction"?: 'top' | 'bottom';
-        /**
-          * If you want to remove background of the dropdown button
-         */
         "isLight": boolean;
-        /**
-          * If you want a medium dropdown
-         */
         "isMedium": boolean;
-        /**
-          * Set to `true` to open the dropdown menu and to `false` to close it.
-         */
         "isOpen": boolean;
-        /**
-          * The button position.
-         */
         "position"?: 'left' | 'right';
     }
     interface RoadDuration {
@@ -849,6 +834,10 @@ export namespace Components {
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
         "href": string | undefined;
+        /**
+          * How the bottom border should be displayed on the item.
+         */
+        "layout"?: 'horizontal' | 'vertical';
         /**
           * How the bottom border should be displayed on the item.
          */
@@ -861,6 +850,14 @@ export namespace Components {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
+        /**
+          * Description for the item
+         */
+        "text"?: string;
+        /**
+          * Title for the item
+         */
+        "titleItem"?: string;
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
          */
@@ -1611,10 +1608,6 @@ export namespace Components {
           * If `true`, the toggle is checked.
          */
         "checked": boolean;
-        /**
-          * Set the color of alert. e.g. info, success, warning, danger
-         */
-        "color"?: 'success' | FeedbackColors;
         /**
           * If `true`, the user cannot interact with the toggle.
          */
@@ -2248,8 +2241,8 @@ declare global {
         "roadChange": {
     value: string | undefined | null;
   };
-        "roadblur": void;
-        "roadBlur": void;
+        "roadblur": string | null;
+        "roadBlur": string | null;
         "roadfocus": void;
         "roadFocus": void;
     }
@@ -3516,25 +3509,10 @@ declare namespace LocalJSX {
         "position"?: string;
     }
     interface RoadDropdown {
-        /**
-          * The opening direction.
-         */
         "direction"?: 'top' | 'bottom';
-        /**
-          * If you want to remove background of the dropdown button
-         */
         "isLight"?: boolean;
-        /**
-          * If you want a medium dropdown
-         */
         "isMedium"?: boolean;
-        /**
-          * Set to `true` to open the dropdown menu and to `false` to close it.
-         */
         "isOpen"?: boolean;
-        /**
-          * The button position.
-         */
         "position"?: 'left' | 'right';
     }
     interface RoadDuration {
@@ -3762,7 +3740,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the input loses focus.
          */
-        "onRoadblur"?: (event: RoadInputCustomEvent<void>) => void;
+        "onRoadblur"?: (event: RoadInputCustomEvent<string | null>) => void;
         /**
           * Emitted when the value has changed.
          */
@@ -3849,6 +3827,10 @@ declare namespace LocalJSX {
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
         "href"?: string | undefined;
+        /**
+          * How the bottom border should be displayed on the item.
+         */
+        "layout"?: 'horizontal' | 'vertical';
         /**
           * How the bottom border should be displayed on the item.
          */
@@ -3861,6 +3843,14 @@ declare namespace LocalJSX {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
+        /**
+          * Description for the item
+         */
+        "text"?: string;
+        /**
+          * Title for the item
+         */
+        "titleItem"?: string;
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
          */
@@ -4691,10 +4681,6 @@ declare namespace LocalJSX {
           * If `true`, the toggle is checked.
          */
         "checked"?: boolean;
-        /**
-          * Set the color of alert. e.g. info, success, warning, danger
-         */
-        "color"?: 'success' | FeedbackColors;
         /**
           * If `true`, the user cannot interact with the toggle.
          */

package/hydrate/index.js

@@ -13823,17 +13823,9 @@ class Drawer {
 
 const dropdownCss = "/*!@:host*/.sc-road-dropdown-h{--margin-top:0.5rem;display:block}/*!@.dropdown*/.dropdown.sc-road-dropdown{position:relative;font-family:var(--road-font)}/*!@.dropdown summary*/.dropdown.sc-road-dropdown summary.sc-road-dropdown{display:block;outline:none}/*!@.dropdown summary::-webkit-details-marker*/.dropdown.sc-road-dropdown summary.sc-road-dropdown::-webkit-details-marker{display:none}/*!@.dropdown-button*/.dropdown-button.sc-road-dropdown{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*/.dropdown-medium-button.sc-road-dropdown{width:2.5rem;height:2.5rem}/*!@.dropdown-button:hover*/.dropdown-button.sc-road-dropdown:hover{background:var(--road-grey-200)}/*!@.position-right*/.position-right.sc-road-dropdown{display:flex;justify-content:flex-end}/*!@.bg-white*/.bg-white.sc-road-dropdown{background:var(--road-grey-000)}/*!@.dropdown-button-icon*/.dropdown-button-icon.sc-road-dropdown{width:2.5rem;height:2.5rem}/*!@.dropdown-medium-button .dropdown-button-icon*/.dropdown-medium-button.sc-road-dropdown .dropdown-button-icon.sc-road-dropdown{width:1.75rem;height:1.75rem}/*!@.dropdown[open] .dropdown-menu*/.dropdown[open].sc-road-dropdown .dropdown-menu.sc-road-dropdown{transform:scaleY(1)}/*!@.dropdown[open] .dropdown-menu.direction-top*/.dropdown[open].sc-road-dropdown .dropdown-menu.direction-top.sc-road-dropdown{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}/*!@.dropdown-menu*/.dropdown-menu.sc-road-dropdown{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*/.dropdown-left.sc-road-dropdown{left:0}/*!@.dropdown-right*/.dropdown-right.sc-road-dropdown{right:0}/*!@.dropdown-item*/.dropdown-item.sc-road-dropdown{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*/.dropdown-item-border.sc-road-dropdown{border-color:var(--road-outline-weak);border-bottom:1px solid}/*!@.dropdown-item:hover,\n.dropdown-item.focus-visible*/.dropdown-item.sc-road-dropdown:hover,.dropdown-item.focus-visible.sc-road-dropdown{background:var(--road-surface-inverse)}";
 
-/**
- * @slot  - Element how will open the dropdown when clicked
- * @slot list - List of item values (you can add border with lines=`full` but not on the last item)
-)
- */
 class Dropdown$1 {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Toggle the display when clicking element in slot
-     */
     this.onClick = () => {
       this.isOpen = !this.isOpen;
     };
@@ -13843,14 +13835,23 @@ class Dropdown$1 {
     this.position = undefined;
     this.direction = 'bottom';
   }
+  handleDocumentClick(ev) {
+    // Check if the clicked element is the dropdown button
+    if (ev.target.closest('road-dropdown') === this.el) {
+      return; // Do nothing if clicked element is the dropdown button
+    }
+    // Close dropdown if click is outside the dropdown
+    this.isOpen = false;
+  }
   render() {
-    const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';
-    const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';
-    const positionClass = this.position !== undefined ? `position-${this.position}` : '';
-    const dropdownClass = this.position !== undefined ? `dropdown-${this.position}` : '';
-    const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';
-    return (hAsync("details", { class: "dropdown", open: this.isOpen }, hAsync("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, hAsync("div", { class: `d-flex ${positionClass}` }, hAsync("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, hAsync("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), hAsync("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, hAsync("slot", { name: "list" }))));
+    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button bg-white';
+    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button bg-white';
+    const positionClass = this.position ? `position-${this.position}` : '';
+    const dropdownClass = this.position ? `dropdown-${this.position}` : '';
+    const directionClass = this.direction ? `direction-${this.direction}` : '';
+    return (hAsync("details", { class: "dropdown", open: this.isOpen }, hAsync("summary", { "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick }, hAsync("div", { class: `d-flex ${positionClass}` }, hAsync("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, hAsync("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), hAsync("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, hAsync("slot", { name: "list" }))));
   }
+  get el() { return getElement(this); }
   static get style() { return dropdownCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -13862,7 +13863,7 @@ class Dropdown$1 {
       "position": [513],
       "direction": [513]
     },
-    "$listeners$": undefined,
+    "$listeners$": [[4, "click", "handleDocumentClick"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["position", "position"], ["direction", "direction"]]
   }; }
@@ -14436,8 +14437,18 @@ class Input {
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
-      this.roadblur.emit();
-      this.roadBlur.emit();
+      let value = this.getValue();
+      // Vérifier si les contraintes min et max sont définies
+      if (this.min !== undefined && value !== '' && parseFloat(value) < parseFloat(this.min)) {
+        value = this.min; // Ajuster la valeur à la valeur minimale
+      }
+      if (this.max !== undefined && value !== '' && parseFloat(value) > parseFloat(this.max)) {
+        value = this.max; // Ajuster la valeur à la valeur maximale
+      }
+      this.value = value; // Mettre à jour la valeur avec la valeur ajustée
+      // Émettre l'événement roadblur avec la valeur ajustée
+      this.roadblur.emit(this.value);
+      this.roadBlur.emit(this.value);
     };
     this.onFocus = () => {
       this.roadfocus.emit();
@@ -14487,13 +14498,26 @@ class Input {
       ? this.value.toString()
       : (this.value || '').toString();
   }
+  enforceMinMax(el) {
+    if (el.value !== "") {
+      const value = parseInt(el.value);
+      const minValue = parseInt(el.min);
+      const maxValue = parseInt(el.max);
+      if (value < minValue) {
+        el.value = el.min;
+      }
+      if (value > maxValue) {
+        el.value = el.max;
+      }
+    }
+  }
   render() {
     const value = this.getValue();
     const labelId = this.inputId + '-label';
     const hasValueClass = this.value !== '' ? 'has-value' : '';
     const lessLabelClass = this.label !== '' ? '' : 'less-label';
     const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, hAsync("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "data-cy": 'road-input' }), hAsync("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && hAsync("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
+    return (hAsync(Host, { "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}`, value: value }, hAsync("input", { class: `form-control ${hasValueClass} ${isInvalidClass} ${lessLabelClass}`, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, enterKeyHint: this.enterkeyhint, autoFocus: this.autofocus, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyUp: (event) => this.enforceMinMax(event.target), "data-cy": 'road-input' }), hAsync("label", { class: "form-label", id: labelId, htmlFor: this.inputId }, this.label), this.error && this.error !== '' && hAsync("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { class: "helper" }, this.helper), this.type && this.type == 'password' &&
       hAsync("slot", { name: "checklistPassword" })));
   }
   static get watchers() { return {
@@ -14575,7 +14599,7 @@ class InputGroup {
   }; }
 }
 
-const itemCss = "/*!@:host*/.sc-road-item-h{--border-radius:0.25rem;--background-color:transparent;--detail-color:var(--road-icon);--inner-padding:1rem 0.5rem 1rem 0;--min-height:3.5rem;--padding-left:1rem;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;overflow:hidden;text-decoration:none;outline:none}/*!@.item-native*/.item-native.sc-road-item{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);padding:0 0 0 var(--padding-left);margin:0;overflow:inherit;font-family:inherit;font-size:inherit;color:var(--road-on-surface);background-color:var(--background-color);border-color:var(--road-grey-70);border-style:solid;border-width:var(--border-width, 0);border-radius:var(--border-radius);outline:none;transition:background 0.15s ease-in-out;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.item-active*/.item-active.sc-road-item{background-color:var(--road-grey-90)}/*!@button.item-native:not(:disabled):not(.item-active):hover,\nbutton.item-native:not(:disabled):not(.item-active):focus*/button.item-native.sc-road-item:not(:disabled):not(.item-active):hover,button.item-native.sc-road-item:not(:disabled):not(.item-active):focus{background-color:var(--road-grey-90)}/*!@.item-native::-moz-focus-inner*/.item-native.sc-road-item::-moz-focus-inner{border:0}/*!@button,\na*/button.sc-road-item,a.sc-road-item{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}/*!@.item-inner*/.item-inner.sc-road-item{position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:center;align-self:stretch;width:100%;min-height:inherit;padding:var(--inner-padding);overflow:inherit;text-align:inherit;text-decoration:none;border-color:var(--road-grey-70);border-style:solid;border-width:var(--inner-border-width, 0);outline:0}/*!@.input-wrapper*/.input-wrapper.sc-road-item{box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;overflow:inherit;text-overflow:ellipsis}/*!@.item-detail-icon*/.item-detail-icon.sc-road-item{color:var(--detail-color)}/*!@::slotted(road-icon)*/.sc-road-item-s>road-icon{flex-shrink:0;margin-right:0.5rem}/*!@::slotted(road-img)*/.sc-road-item-s>road-img{flex-shrink:0;width:3rem;height:3rem;object-fit:cover;min-height:inherit;margin-right:1rem}/*!@::slotted(road-button)*/.sc-road-item-s>road-button{--padding-start:0.5rem;--padding-end:0.5rem;--margin-bottom:0}/*!@:host(.item-lines-none)*/.item-lines-none.sc-road-item-h{--border-width:0 !important;--inner-border-width:0 !important}/*!@:host(.item-lines-full)*/.item-lines-full.sc-road-item-h{--border-width:0 0 1px 0 !important;--inner-border-width:0 !important}/*!@:host(.item-lines-inset)*/.item-lines-inset.sc-road-item-h{--inner-border-width:0 0 1px 0 !important}";
+const itemCss = "/*!@:host*/.sc-road-item-h{--border-radius:var(--road-spacing-02);--background-color:var(--road-surface);--detail-color:var(--road-icon);position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;overflow:hidden;font-size:var(--road-font-size-14);text-decoration:none;outline:none}/*!@.layout-vertical*/.layout-vertical.sc-road-item{display:flex;flex-direction:column;max-width:224px}/*!@.layout-vertical .item-inner*/.layout-vertical.sc-road-item .item-inner.sc-road-item{align-items:flex-start}/*!@.item-native*/.item-native.sc-road-item{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:inherit;justify-content:inherit;padding:var(--road-spacing-05);margin:0;overflow:inherit;font-family:inherit;font-size:inherit;color:var(--road-on-surface);text-align:left;background-color:var(--background-color);border:1px solid var(--road-outline-weak);border-radius:var(--border-radius);outline:none;transition:background 0.15s ease-in-out;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@.item-active*/.item-active.sc-road-item{border:2px solid var(--road-outline-variant)}/*!@button.item-native:not(:disabled):not(.item-active):hover,\nbutton.item-native:not(:disabled):not(.item-active):focus*/button.item-native.sc-road-item:not(:disabled):not(.item-active):hover,button.item-native.sc-road-item:not(:disabled):not(.item-active):focus{border:2px solid var(--road-outline-variant)}/*!@.item-native::-moz-focus-inner*/.item-native.sc-road-item::-moz-focus-inner{border:0}/*!@button,\na*/button.sc-road-item,a.sc-road-item{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}/*!@.item-inner*/.item-inner.sc-road-item{position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:center;align-self:stretch;width:100%;min-height:inherit;padding:var(--inner-padding);overflow:inherit;text-align:inherit;text-decoration:none;border-color:var(--road-grey-70);border-style:solid;border-width:var(--inner-border-width, 0);outline:0}/*!@.input-wrapper*/.input-wrapper.sc-road-item{box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;overflow:inherit;text-overflow:ellipsis}/*!@.input-wrapper-info-title*/.input-wrapper-info-title.sc-road-item{font-size:var(--road-font-size-16);font-weight:700}/*!@.input-wrapper-info-text*/.input-wrapper-info-text.sc-road-item{margin:0;font-size:var(--road-font-size-16);font-weight:400;color:var(--road-on-surface-weak)}/*!@.item-detail-icon*/.item-detail-icon.sc-road-item{color:var(--detail-color)}/*!@::slotted(road-icon)*/.sc-road-item-s>road-icon{flex-shrink:0;margin-right:0.5rem}/*!@::slotted(road-img)*/.sc-road-item-s>road-img{flex-shrink:0;margin-right:0.5rem}/*!@.layout-vertical ::slotted(road-img)*/.layout-vertical .sc-road-item-s>road-img{margin-bottom:0.5rem}/*!@::slotted(road-label) p*/.sc-road-item-s>road-label p{color:var(--road-on-surface-weak)}/*!@::slotted(road-button)*/.sc-road-item-s>road-button{--padding-start:0.5rem;--padding-end:0.5rem;--margin-bottom:0}/*!@:host(.item-lines-none)*/.item-lines-none.sc-road-item-h{--border-width:0 !important;--inner-border-width:0 !important}/*!@:host(.item-lines-full)*/.item-lines-full.sc-road-item-h{--border-width:0 0 1px 0 !important;--inner-border-width:0 !important}/*!@:host(.item-lines-inset)*/.item-lines-inset.sc-road-item-h{--inner-border-width:0 0 1px 0 !important}";
 
 /**
  * @slot start - Placed to the left of all other content.
@@ -14588,6 +14612,8 @@ class Item {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.multipleInputs = false;
+    this.titleItem = '';
+    this.text = '';
     this.button = false;
     this.detail = undefined;
     this.active = undefined;
@@ -14597,6 +14623,7 @@ class Item {
     this.href = undefined;
     this.rel = undefined;
     this.lines = undefined;
+    this.layout = 'horizontal';
     this.target = undefined;
     this.type = 'button';
   }
@@ -14606,7 +14633,7 @@ class Item {
     return (this.href !== undefined || this.button);
   }
   render() {
-    const { detail, detailIcon, download, lines, disabled, href, rel, target } = this;
+    const { detail, detailIcon, download, layout, lines, disabled, href, rel, target } = this;
     const clickable = this.isClickable();
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
     const attrs = (TagType === 'button')
@@ -14623,7 +14650,8 @@ class Item {
       } }, hAsync(TagType, Object.assign({}, attrs, { class: {
         'item-native': true,
         'item-active': this.active,
-      }, part: "native", disabled: disabled }), hAsync("slot", { name: "start" }), hAsync("div", { class: "item-inner" }, hAsync("div", { class: "input-wrapper" }, hAsync("slot", null)), hAsync("slot", { name: "end" }), showDetail && hAsync("road-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
+        [`layout-${layout}`]: layout !== undefined,
+      }, part: "native", disabled: disabled }), hAsync("slot", { name: "start" }), hAsync("div", { class: "item-inner" }, hAsync("div", { class: "input-wrapper" }, hAsync("slot", null), hAsync("div", { class: "input-wrapper-info" }, hAsync("road-label", { class: "input-wrapper-info-title" }, this.titleItem), hAsync("p", { class: "input-wrapper-info-text" }, this.text))), hAsync("slot", { name: "end" }), showDetail && hAsync("road-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
   }
   get el() { return getElement(this); }
   static get style() { return itemCss; }
@@ -14631,6 +14659,8 @@ class Item {
     "$flags$": 9,
     "$tagName$": "road-item",
     "$members$": {
+      "titleItem": [1, "title-item"],
+      "text": [1],
       "button": [4],
       "detail": [4],
       "active": [4],
@@ -14640,6 +14670,7 @@ class Item {
       "href": [1],
       "rel": [1],
       "lines": [1],
+      "layout": [1],
       "target": [1],
       "type": [1],
       "multipleInputs": [32]
@@ -20109,7 +20140,7 @@ class Tooltip {
 }
 let tooltipIds = 0;
 
-const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--road-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--road-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-info-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-info.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-warning-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-warning.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-on-warning-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-danger-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-danger.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
+const toggleCss = ".sc-road-toggle-h{--toggle-lever-width:4.5rem;position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);font-size:var(--road-label-medium);color:var(--road-on-surface)}.form-toggle-input.sc-road-toggle{position:absolute;z-index:-1;opacity:0}.form-toggle-label.sc-road-toggle{display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-toggle-lever.sc-road-toggle{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--toggle-lever-width);height:2rem;padding:0.5rem 0.625rem;margin-right:0.75rem;font-size:0.625rem;font-weight:700;line-height:1.6;content:\"\";background:var(--road-on-surface-extra-weak);border:0.125rem solid transparent;border-radius:1.125rem;transition:background 0.2s ease-in-out}.form-toggle-lever.sc-road-toggle::before{font-size:0.625rem;font-weight:700;color:var(--road-surface);text-transform:uppercase;content:attr(data-off)}.form-toggle-lever.sc-road-toggle::after{position:absolute;top:0.0625rem;left:0.0625rem;display:block;width:1.625rem;height:1.625rem;content:\"\";background:var(--road-on-success-surface-inverse);border-radius:50%;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{justify-content:flex-start;background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface);content:attr(data-on)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle::after{transform:translateX(calc(var(--toggle-lever-width) - 2rem))}.form-toggle-input.focus-visible.sc-road-toggle~.form-toggle-label.sc-road-toggle .form-toggle-lever.sc-road-toggle{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-primary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-secondary)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-secondary.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle{background:var(--road-success-surface-inverse)}.form-toggle-input.sc-road-toggle:checked~.form-toggle-success.sc-road-toggle .form-toggle-lever.sc-road-toggle::before{color:var(--road-surface)}.form-toggle-right.sc-road-toggle{margin-right:0;margin-left:0.75rem}.form-toggle-spaced.sc-road-toggle{display:flex;justify-content:space-between}";
 
 class toggle {
   constructor(hostRef) {
@@ -20136,7 +20167,6 @@ class toggle {
     this.checked = false;
     this.disabled = false;
     this.label = `${this.toggleId}-label`;
-    this.color = 'success';
     this.hasLeftLabel = false;
     this.isSpaced = false;
     this.value = 'on';
@@ -20156,10 +20186,9 @@ class toggle {
   render() {
     const labelId = this.toggleId + '-label';
     const textLabel = hAsync("label", { class: "form-toggle-label", id: labelId, htmlFor: this.toggleId }, this.label);
-    const colorClass = this.color !== undefined ? 'form-toggle-' + this.color : '';
     const isSpacedClass = this.isSpaced && 'form-toggle-spaced';
     const righttoggleClass = this.hasLeftLabel ? 'form-toggle-right' : '';
-    return (hAsync(Host, null, hAsync("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), hAsync("label", { class: `form-toggle-label ${isSpacedClass} ${colorClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, hAsync("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+    return (hAsync(Host, null, hAsync("input", { class: "form-toggle-input", type: "checkbox", id: this.toggleId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), hAsync("label", { class: `form-toggle-label ${isSpacedClass}`, htmlFor: this.toggleId }, this.hasLeftLabel && textLabel, hAsync("div", { class: `form-toggle-lever ${righttoggleClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
   }
   static get watchers() { return {
     "checked": ["checkedChanged"]
@@ -20174,7 +20203,6 @@ class toggle {
       "checked": [1028],
       "disabled": [4],
       "label": [1],
-      "color": [1],
       "hasLeftLabel": [4, "has-left-label"],
       "isSpaced": [4, "is-spaced"],
       "value": [1],