@roadtrip/components 3.26.0 → 3.28.0

package/dist/types/components/navbar-item/navbar-item.d.ts

@@ -50,6 +50,10 @@ export declare class NavbarItem {
   /** @internal */
   roadNavbarItemClick: EventEmitter;
   onNavbarChanged(ev: CustomEvent): void;
+  /**
+   * Watch for changes to `selected` and move focus to this element if `selected` is true.
+   */
+  handleSelectedChange(newValue: boolean): void;
   private selectTab;
   private onKeyUp;
   private onClick;

package/dist/types/components/progress-indicator-horizontal/progress-indicator-horizontal.d.ts

@@ -21,15 +21,15 @@ export declare class Stepper {
   /**
  * The color of the first step.
  */
-  stateFirstStep?: 'default' | 'current' | 'comleted';
+  stateFirstStep?: 'default' | 'current' | 'comleted' | 'in-progress';
   /**
  * The color of the second step.
  */
-  stateSecondStep?: 'default' | 'current' | 'comleted';
+  stateSecondStep?: 'default' | 'current' | 'comleted' | 'in-progress';
   /**
  * The color of the third step.
  */
-  stateThirdStep?: 'default' | 'current' | 'comleted';
+  stateThirdStep?: 'default' | 'current' | 'comleted' | 'in-progress';
   /**
  * The url of the first step.
  */

package/dist/types/components/radio/radio.d.ts

@@ -31,6 +31,10 @@ export declare class Radio {
    * Label for the field
    */
   label: string;
+  /**
+  * Secondary Label for the field
+  */
+  secondaryLabel?: string;
   /**
    * If `true`, the label and the radio are inverse and spaced
    */

package/dist/types/components/tab-button/tab-button.d.ts

@@ -32,6 +32,10 @@ export declare class TabButton {
    * The selected tab component
    */
   selected: boolean;
+  /**
+ * The disabled tab
+ */
+  disabled: boolean;
   /**
    * A tab id must be provided for each `road-tab`. It's used internally to reference
    */

package/dist/types/components.d.ts

@@ -343,6 +343,10 @@ export namespace Components {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required": boolean;
+        /**
+          * Secondary Label for the field
+         */
+        "secondaryLabel"?: string;
         /**
           * Value the form will get
          */
@@ -778,6 +782,10 @@ export namespace Components {
         "value"?: string | number | null;
     }
     interface RoadInputGroup {
+        /**
+          * Disables the entire input group and propagates the state to children.
+         */
+        "disabled": boolean;
     }
     interface RoadItem {
         /**
@@ -1027,15 +1035,15 @@ export namespace Components {
         /**
           * The color of the first step.
          */
-        "stateFirstStep"?: 'default' | 'current' | 'comleted';
+        "stateFirstStep"?: 'default' | 'current' | 'comleted' | 'in-progress';
         /**
           * The color of the second step.
          */
-        "stateSecondStep"?: 'default' | 'current' | 'comleted';
+        "stateSecondStep"?: 'default' | 'current' | 'comleted' | 'in-progress';
         /**
           * The color of the third step.
          */
-        "stateThirdStep"?: 'default' | 'current' | 'comleted';
+        "stateThirdStep"?: 'default' | 'current' | 'comleted' | 'in-progress';
         /**
           * The url of the first step.
          */
@@ -1094,6 +1102,10 @@ export namespace Components {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required": boolean;
+        /**
+          * Secondary Label for the field
+         */
+        "secondaryLabel"?: string;
         /**
           * Value the form will get
          */
@@ -1402,6 +1414,10 @@ export namespace Components {
         "selectedTab"?: string;
     }
     interface RoadTabButton {
+        /**
+          * The disabled tab
+         */
+        "disabled": boolean;
         /**
           * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
          */
@@ -3283,6 +3299,10 @@ declare namespace LocalJSX {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required"?: boolean;
+        /**
+          * Secondary Label for the field
+         */
+        "secondaryLabel"?: string;
         /**
           * Value the form will get
          */
@@ -3747,6 +3767,10 @@ declare namespace LocalJSX {
         "value"?: string | number | null;
     }
     interface RoadInputGroup {
+        /**
+          * Disables the entire input group and propagates the state to children.
+         */
+        "disabled"?: boolean;
     }
     interface RoadItem {
         /**
@@ -4023,15 +4047,15 @@ declare namespace LocalJSX {
         /**
           * The color of the first step.
          */
-        "stateFirstStep"?: 'default' | 'current' | 'comleted';
+        "stateFirstStep"?: 'default' | 'current' | 'comleted' | 'in-progress';
         /**
           * The color of the second step.
          */
-        "stateSecondStep"?: 'default' | 'current' | 'comleted';
+        "stateSecondStep"?: 'default' | 'current' | 'comleted' | 'in-progress';
         /**
           * The color of the third step.
          */
-        "stateThirdStep"?: 'default' | 'current' | 'comleted';
+        "stateThirdStep"?: 'default' | 'current' | 'comleted' | 'in-progress';
         /**
           * The url of the first step.
          */
@@ -4098,6 +4122,10 @@ declare namespace LocalJSX {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required"?: boolean;
+        /**
+          * Secondary Label for the field
+         */
+        "secondaryLabel"?: string;
         /**
           * Value the form will get
          */
@@ -4444,6 +4472,10 @@ declare namespace LocalJSX {
         "selectedTab"?: string;
     }
     interface RoadTabButton {
+        /**
+          * The disabled tab
+         */
+        "disabled"?: boolean;
         /**
           * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
          */

package/hydrate/index.js

@@ -5830,7 +5830,7 @@ const navigationAddLess = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria
 const navigationAddMoreSolid = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M49.87 30.19H34.19V14.51h-4v15.68H14.51v4h15.68v15.68h4V34.19h15.68v-4Z"/></svg>';
 const navigationChevron = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M28.121 46.121 26 44l11.44-11.44L26 21.121 28.121 19l13.561 13.56Z"/></svg>';
 const navigationClose = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="m19 20.767 1.768-1.768 25 25L44 45.767z"/><path d="m19 44 25-25 1.768 1.768-25 25z"/></svg>';
-const starHalfColor = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M32 47.425V6.5l7.514 17.755 19.17 1.637L44.152 38.61l4.384 18.89Z"/><path d="M32 47.425 15.461 57.5l4.387-18.89L5.316 25.892l19.165-1.637L32 6.5Z" fill="var(--warning, rgb(252, 183, 49))"/></svg>';
+const starHalfColor = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M32 47.425V6.5l7.514 17.755 19.17 1.637L44.152 38.61l4.384 18.89Z"/><path d="M32 47.425 15.461 57.5l4.387-18.89L5.316 25.892l19.165-1.637L32 6.5Z" fill="var(--road-warning-icon, rgb(234, 157, 19))"/></svg>';
 const star = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" aria-hidden="true" ><path d="M32 47.425V6.5l7.514 17.755 19.17 1.637L44.152 38.61l4.384 18.89Zm0 0L15.461 57.5l4.387-18.89L5.316 25.892l19.165-1.637L32 6.5Z"/></svg>';
 
 // @ts-ignore
@@ -13270,7 +13270,7 @@ class CarouselItem {
   }; }
 }
 
-const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-16);line-height:1.5;color:var(--road-on-surface)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-input-surface-variant)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface);border-color:var(--road-input-surface)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface-variant);border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-surface-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-on-surface-disabled)}.invalid-feedback.sc-road-checkbox{display:none;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:var(--road-font-size-12);color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-outline)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;font-size:0.75rem;color:var(--road-grey-500)}";
+const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-16);line-height:1.5;color:var(--road-on-surface)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-label-span.sc-road-checkbox{color:var(--road-on-surface-weak)}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-input-surface-variant)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface);border-color:var(--road-input-surface)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface-variant);border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-surface-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-on-surface-disabled)}.invalid-feedback.sc-road-checkbox{display:none;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:var(--road-font-size-12);color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-outline)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;margin-left:2rem;font-size:var(--road-font-size-14);color:var(--road-on-surface-weak)}";
 
 /**
  * @slot  - Adding additional elements next to the label (e.g. number of items in filters).
@@ -13304,6 +13304,7 @@ class Checkbox {
     this.disabled = false;
     this.value = 'on';
     this.label = `${this.checkboxId}-label`;
+    this.secondaryLabel = undefined;
     this.inverse = false;
     this.error = undefined;
     this.helper = undefined;
@@ -13322,7 +13323,7 @@ class Checkbox {
     const labelId = this.checkboxId + '-label';
     const inverseClass = this.inverse && 'form-checkbox-inverse';
     const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';
-    return (hAsync(Host, null, hAsync("input", { class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, 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-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId }, hAsync("div", null, this.label, hAsync("slot", null)), this.checked && !this.indeterminate && hAsync("road-icon", { class: "form-check-icon", icon: checkWide }), this.indeterminate && hAsync("road-icon", { class: "form-check-icon", icon: navigationAddLess })), this.error && this.error !== '' && hAsync("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { class: "helper" }, this.helper)));
+    return (hAsync(Host, null, hAsync("input", { class: `form-check-input ${isInvalidClass}`, type: "checkbox", id: this.checkboxId, name: this.name, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, 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-check-label ${inverseClass}`, id: labelId, htmlFor: this.checkboxId }, hAsync("div", null, this.label, " ", hAsync("span", { class: "form-check-label-span" }, this.secondaryLabel), hAsync("slot", null)), this.checked && !this.indeterminate && hAsync("road-icon", { class: "form-check-icon", icon: checkWide }), this.indeterminate && hAsync("road-icon", { class: "form-check-icon", icon: navigationAddLess })), this.error && this.error !== '' && hAsync("p", { class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && hAsync("p", { class: "helper" }, this.helper)));
   }
   static get watchers() { return {
     "checked": ["checkedChanged"]
@@ -13340,6 +13341,7 @@ class Checkbox {
       "disabled": [4],
       "value": [1],
       "label": [1],
+      "secondaryLabel": [1, "secondary-label"],
       "inverse": [4],
       "error": [1],
       "helper": [1]
@@ -31801,7 +31803,7 @@ class Input {
   render() {
     const value = this.getValue();
     const labelId = this.inputId + '-label';
-    const hasValueClass = this.value !== '' ? 'has-value' : '';
+    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 (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" }, hAsync("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), this.error), this.helper && this.helper !== '' && hAsync("p", { class: "helper" }, this.helper), this.type && this.type == 'password' && hAsync("slot", { name: "checklistPassword" })));
@@ -31850,7 +31852,7 @@ class Input {
 }
 let inputIds = 0;
 
-const inputGroupCss = "/*!@:host*/.sc-road-input-group-h{display:block}/*!@.input-group*/.input-group.sc-road-input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%;font-family:var(--road-font, sans-serif)}/*!@::slotted(road-input),\n::slotted(input),\n::slotted(textarea),\n::slotted(road-select)*/.sc-road-input-group-s>road-input,.sc-road-input-group-s>input,.sc-road-input-group-s>textarea,.sc-road-input-group-s>road-select{position:relative;flex:1 1 auto;width:1%;margin-bottom:0}/*!@::slotted([slot=\"prepend\"])*/.sc-road-input-group-s>[slot=\"prepend\"]{margin-right:-3px;border-color:var(--road-input-outline);border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}/*!@::slotted([slot=\"append\"])*/.sc-road-input-group-s>[slot=\"append\"]{margin-left:-0.25rem;border-color:var(--road-input-outline);border-left-width:0}@media (hover: hover){/*!@.input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"])*/.input-group:not(.is-disabled):hover .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-input-outline-variant);border-right-color:transparent}/*!@.input-group:not(.is-disabled):hover ::slotted([slot=\"append\"])*/.input-group:not(.is-disabled):hover .sc-road-input-group-s>[slot=\"append\"]{border-color:var(--road-input-outline-variant);border-left-color:transparent}/*!@:host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"])*/.sc-road-input-group-h.phone-number-group .input-group:not(.is-disabled):hover .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-input-outline-variant)}}/*!@.input-group:focus-within ::slotted([slot=\"prepend\"])*/.input-group:focus-within .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-input-outline-variant);border-right-color:transparent}/*!@:host(.phone-number-group) .input-group:focus-within ::slotted([slot=\"prepend\"])*/.sc-road-input-group-h.phone-number-group .input-group:focus-within .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-input-outline-variant);border-right-color:transparent}/*!@.input-group:focus-within ::slotted([slot=\"append\"])*/.input-group:focus-within .sc-road-input-group-s>[slot=\"append\"]{border-color:var(--road-input-outline-variant);border-left-color:transparent}/*!@.input-group-prepend,\n.input-group-append*/.input-group-prepend.sc-road-input-group,.input-group-append.sc-road-input-group{display:flex;height:3rem}/*!@::slotted(road-button)*/.sc-road-input-group-s>road-button{--padding-start:0.5rem;--padding-end:0.5rem;position:relative;z-index:2;min-width:3rem;margin:0;font-size:var(--road-font-size-14)}/*!@.input-group-prepend*/.input-group-prepend.sc-road-input-group{z-index:1;order:-1}/*!@.input-group-prepend ~ .form-label*/.input-group-prepend.sc-road-input-group~.form-label.sc-road-input-group{left:calc(3rem + 1px)}/*!@.input-group-append*/.input-group-append.sc-road-input-group{position:relative;z-index:1;border-radius:0 0.25rem 0.25rem 0}/*!@::slotted(label)*/.sc-road-input-group-s>label{display:flex;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-on-surface);text-align:center;white-space:nowrap;cursor:text;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@::slotted(road-input:not(:first-child)),\n::slotted(road-select:not(:first-child))*/.sc-road-input-group-s>road-input:not(:first-child),.sc-road-input-group-s>road-select:not(:first-child){border-radius:0}/*!@.input-group-append ::slotted([slot=\"append\"])*/.input-group-append .sc-road-input-group-s>[slot=\"append\"]{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}/*!@.input-group-prepend ::slotted([slot=\"prepend\"])*/.input-group-prepend .sc-road-input-group-s>[slot=\"prepend\"]{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}/*!@:host(.phone-number-group) .input-group-prepend ::slotted([slot=\"prepend\"])*/.sc-road-input-group-h.phone-number-group .input-group-prepend .sc-road-input-group-s>[slot=\"prepend\"]{border-right:1px solid var(--road-input-outline);border-top-right-radius:0;border-bottom-right-radius:0}/*!@.input-group-prepend ::slotted(label)*/.input-group-prepend .sc-road-input-group-s>label{margin-right:calc(-1rem + 1px)}/*!@.input-group-append ::slotted(road-button)*/.input-group-append .sc-road-input-group-s>road-button{background-color:var(--road-surface)}/*!@.size-xl .input-group-prepend,\n.size-xl .input-group-append*/.size-xl.sc-road-input-group .input-group-prepend.sc-road-input-group,.size-xl.sc-road-input-group .input-group-append.sc-road-input-group{height:3.5rem}/*!@.size-xl ::slotted(road-button)*/.size-xl .sc-road-input-group-s>road-button{height:3.5rem}/*!@.input-group.is-invalid ::slotted([slot=\"append\"]),\n.input-group.is-invalid ::slotted([slot=\"prepend\"])*/.input-group.is-invalid .sc-road-input-group-s>[slot=\"append\"],.input-group.is-invalid.sc-road-input-group-s>[slot=\"prepend\"],.input-group.is-invalid .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-danger-outline)}/*!@:host(.phone-number-group) .input-group.is-invalid ::slotted([slot=\"prepend\"])*/.sc-road-input-group-h.phone-number-group .input-group.is-invalid.sc-road-input-group-s>[slot=\"prepend\"],.input-group.is-invalid .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-danger-outline)}/*!@.input-group.is-disabled ::slotted([slot=\"append\"]),\n.input-group.is-disabled ::slotted([slot=\"prepend\"])*/.input-group.is-disabled .sc-road-input-group-s>[slot=\"append\"],.input-group.is-disabled.sc-road-input-group-s>[slot=\"prepend\"],.input-group.is-disabled .sc-road-input-group-s>[slot=\"prepend\"]{cursor:not-allowed;background:#e4e5e9}/*!@.is-disabled ::slotted(road-button)*/.is-disabled .sc-road-input-group-s>road-button{opacity:1}";
+const inputGroupCss = "/*!@:host*/.sc-road-input-group-h{display:block}/*!@.input-group*/.input-group.sc-road-input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%;font-family:var(--road-font, sans-serif)}/*!@::slotted(road-input),\n::slotted(input),\n::slotted(textarea),\n::slotted(road-select)*/.sc-road-input-group-s>road-input,.sc-road-input-group-s>input,.sc-road-input-group-s>textarea,.sc-road-input-group-s>road-select{position:relative;flex:1 1 auto;width:1%;margin-bottom:0}/*!@::slotted([slot=\"prepend\"])*/.sc-road-input-group-s>[slot=\"prepend\"]{margin-right:-3px;border-color:var(--road-input-outline);border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}/*!@::slotted([slot=\"append\"])*/.sc-road-input-group-s>[slot=\"append\"]{margin-left:-0.25rem;border-color:var(--road-input-outline);border-left-width:0}@media (hover: hover){/*!@.input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"])*/.input-group:not(.is-disabled):hover .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-input-outline-variant);border-right-color:transparent}/*!@.input-group:not(.is-disabled):hover ::slotted([slot=\"append\"])*/.input-group:not(.is-disabled):hover .sc-road-input-group-s>[slot=\"append\"]{border-color:var(--road-input-outline-variant);border-left-color:transparent}/*!@:host(.phone-number-group) .input-group:not(.is-disabled):hover ::slotted([slot=\"prepend\"])*/.sc-road-input-group-h.phone-number-group .input-group:not(.is-disabled):hover .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-input-outline-variant)}}/*!@.input-group:focus-within ::slotted([slot=\"prepend\"]),\n:host(.phone-number-group) .input-group:focus-within ::slotted([slot=\"prepend\"])*/.input-group:focus-within .sc-road-input-group-s>[slot=\"prepend\"],.sc-road-input-group-h.phone-number-group .input-group:focus-within.sc-road-input-group-s>[slot=\"prepend\"],.sc-road-input-group-h.phone-number-group .input-group:focus-within .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-grey-0);border-width:2px;border-right-color:transparent;outline:none}/*!@.input-group:focus-within ::slotted([slot=\"append\"])*/.input-group:focus-within .sc-road-input-group-s>[slot=\"append\"]{border-color:var(--road-grey-0);border-width:2px;border-left-color:transparent;outline:none}/*!@.input-group:focus-within ::slotted(road-input):focus-visible*/.input-group:focus-within .sc-road-input-group-s>road-input:focus-visible{border-color:var(--road-grey-0);border-width:2px;outline:none}/*!@.input-group-prepend,\n.input-group-append*/.input-group-prepend.sc-road-input-group,.input-group-append.sc-road-input-group{display:flex;height:3rem}/*!@::slotted(road-button)*/.sc-road-input-group-s>road-button{--padding-start:0.5rem;--padding-end:0.5rem;position:relative;z-index:2;min-width:3rem;margin:0;font-size:var(--road-font-size-14)}/*!@.input-group-prepend*/.input-group-prepend.sc-road-input-group{z-index:1;order:-1}/*!@.input-group-prepend ~ .form-label*/.input-group-prepend.sc-road-input-group~.form-label.sc-road-input-group{left:calc(3rem + 1px)}/*!@.input-group-append*/.input-group-append.sc-road-input-group{position:relative;z-index:1;border-radius:0 0.25rem 0.25rem 0}/*!@::slotted(label)*/.sc-road-input-group-s>label{display:flex;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-on-surface);text-align:center;white-space:nowrap;cursor:text;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@::slotted(road-label)*/.sc-road-input-group-s>road-label{display:flex;align-items:center;padding:0 0.5rem;margin-bottom:0;color:var(--road-on-surface);text-align:center;white-space:nowrap;cursor:text;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}/*!@::slotted(road-input:not(:first-child)),\n::slotted(road-select:not(:first-child))*/.sc-road-input-group-s>road-input:not(:first-child),.sc-road-input-group-s>road-select:not(:first-child){border-radius:0}/*!@.input-group-append ::slotted([slot=\"append\"])*/.input-group-append .sc-road-input-group-s>[slot=\"append\"]{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}/*!@.input-group-prepend ::slotted([slot=\"prepend\"])*/.input-group-prepend .sc-road-input-group-s>[slot=\"prepend\"]{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}/*!@:host(.phone-number-group) .input-group-prepend ::slotted([slot=\"prepend\"])*/.sc-road-input-group-h.phone-number-group .input-group-prepend .sc-road-input-group-s>[slot=\"prepend\"]{border-right:1px solid var(--road-input-outline);border-top-right-radius:0;border-bottom-right-radius:0}/*!@.input-group-prepend ::slotted(label)*/.input-group-prepend .sc-road-input-group-s>label{margin-right:calc(-1rem + 1px)}/*!@.input-group-append ::slotted(road-button)*/.input-group-append .sc-road-input-group-s>road-button{background-color:var(--road-surface)}/*!@.size-xl .input-group-prepend,\n.size-xl .input-group-append*/.size-xl.sc-road-input-group .input-group-prepend.sc-road-input-group,.size-xl.sc-road-input-group .input-group-append.sc-road-input-group{height:3.5rem}/*!@.size-xl ::slotted(road-button)*/.size-xl .sc-road-input-group-s>road-button{height:3.5rem}/*!@.input-group.is-invalid ::slotted([slot=\"append\"]),\n.input-group.is-invalid ::slotted([slot=\"prepend\"])*/.input-group.is-invalid .sc-road-input-group-s>[slot=\"append\"],.input-group.is-invalid.sc-road-input-group-s>[slot=\"prepend\"],.input-group.is-invalid .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-danger-outline)}/*!@:host(.phone-number-group) .input-group.is-invalid ::slotted([slot=\"prepend\"])*/.sc-road-input-group-h.phone-number-group .input-group.is-invalid.sc-road-input-group-s>[slot=\"prepend\"],.input-group.is-invalid .sc-road-input-group-s>[slot=\"prepend\"]{border-color:var(--road-danger-outline)}/*!@:host([disabled])*/[disabled].sc-road-input-group-h{cursor:not-allowed}/*!@:host([disabled]) .input-group*/[disabled].sc-road-input-group-h .input-group.sc-road-input-group{pointer-events:none}/*!@:host([disabled]) ::slotted([slot=\"append\"]),\n:host([disabled]) ::slotted([slot=\"prepend\"])*/.sc-road-input-group-h[disabled] .sc-road-input-group-s>[slot=\"append\"],.sc-road-input-group-h[disabled].sc-road-input-group-s>[slot=\"prepend\"],.sc-road-input-group-h[disabled] .sc-road-input-group-s>[slot=\"prepend\"]{color:var(--road-on-surface-disabled);cursor:not-allowed;background:#e4e5e9}/*!@:host([disabled]) ::slotted([slot=\"append\"] road-icon),\n:host([disabled]) ::slotted([slot=\"prepend\"] road-icon)*/.sc-road-input-group-h[disabled] .sc-road-input-group-s>[slot=\"append\"] road-icon,.sc-road-input-group-h[disabled].sc-road-input-group-s>[slot=\"prepend\"],.sc-road-input-group-h[disabled].sc-road-input-group-s>[slot=\"prepend\"] road-icon,.sc-road-input-group-h[disabled] .sc-road-input-group-s>[slot=\"prepend\"] road-icon{color:var(--road-on-surface-disabled)}/*!@:host([disabled]) road-icon*/[disabled].sc-road-input-group-h road-icon.sc-road-input-group{color:var(--road-on-surface-disabled)}";
 
 /**
  * @slot prepend - Add icon or button before the field.
@@ -31860,25 +31862,47 @@ const inputGroupCss = "/*!@:host*/.sc-road-input-group-h{display:block}/*!@.inpu
 class InputGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.disabled = false;
   }
-  componentDidLoad() {
-    var _a;
-    if (this.el.querySelector("road-input[disabled]")) {
-      (_a = this.el.querySelector("road-button")) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', "");
-    }
+  /** Watches for changes in the `disabled` prop and updates child elements. */
+  handleDisabledChange(newValue) {
+    this.updateDisabledState(newValue);
+  }
+  /** Applies or removes the `disabled` attribute to/from children. */
+  updateDisabledState(isDisabled) {
+    const children = this.el.querySelectorAll('road-input, road-button, road-select');
+    children.forEach(child => {
+      if (isDisabled) {
+        child.setAttribute('disabled', '');
+      }
+      else {
+        child.removeAttribute('disabled');
+      }
+    });
+  }
+  componentWillLoad() {
+    // Ensure the initial state of `disabled` is applied before render.
+    this.updateDisabledState(this.disabled);
   }
   render() {
-    const errorClass = this.el.querySelector("road-input[error]") ? 'is-invalid' : '';
-    const disabledClass = this.el.querySelector("road-input[disabled]") ? 'is-disabled' : '';
-    const sizeClass = this.el.querySelector("road-input[sizes]") ? `size-${this.el.querySelector("road-input").sizes}` : '';
+    const errorClass = this.el.querySelector('road-input[error]') ? 'is-invalid' : '';
+    const sizeClass = this.el.querySelector('road-input[sizes]')
+      ? `size-${this.el.querySelector('road-input').sizes}`
+      : '';
+    const disabledClass = this.disabled ? 'is-disabled' : '';
     return (hAsync("div", { class: `input-group ${errorClass} ${disabledClass} ${sizeClass}` }, hAsync("div", { class: "input-group-prepend" }, hAsync("slot", { name: "prepend" })), hAsync("slot", null), hAsync("div", { class: "input-group-append" }, hAsync("slot", { name: "append" }))));
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "disabled": ["handleDisabledChange"]
+  }; }
   static get style() { return inputGroupCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "road-input-group",
-    "$members$": undefined,
+    "$members$": {
+      "disabled": [4]
+    },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
     "$attrsToReflect$": []
@@ -32177,6 +32201,14 @@ class NavbarItem {
   onNavbarChanged(ev) {
     this.selected = this.tab === ev.detail.tab;
   }
+  /**
+   * Watch for changes to `selected` and move focus to this element if `selected` is true.
+   */
+  handleSelectedChange(newValue) {
+    if (newValue) {
+      this.el.focus();
+    }
+  }
   selectTab(ev) {
     if (this.tab !== undefined) {
       if (!this.disabled) {
@@ -32204,13 +32236,16 @@ class NavbarItem {
       rel,
       target,
     };
-    return (hAsync(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "menu", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+    return (hAsync(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
         'navbar-item': true,
         'tab-selected': selected,
         'tab-disabled': disabled,
       } }, hAsync("a", Object.assign({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), hAsync("span", { class: "button-inner" }, hAsync("slot", null)))));
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "selected": ["handleSelectedChange"]
+  }; }
   static get style() { return navbarItemCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -32503,7 +32538,7 @@ class ProgressTrackerItem {
   }; }
 }
 
-const radioCss = ".sc-road-radio-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface)}.form-radio-inline.sc-road-radio-h{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:1.5rem;margin-bottom:0}.form-radio-input.sc-road-radio{position:absolute;z-index:-1;width:20px;height:20px;opacity:0}.form-radio-input.sc-road-radio:disabled{z-index:1;width:100%;cursor:not-allowed}.form-radio-label.sc-road-radio{position:relative;display:inline-flex;align-items:flex-start;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-radio-label.sc-road-radio::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0.1rem 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:50%;transition:border-color 0.2s ease-in-out}.form-radio-label.sc-road-radio::after{position:absolute;top:0.285rem;left:0.1875rem;box-sizing:border-box;display:block;width:0.875rem;height:0.875rem;content:\"\";background:var(--road-grey-60);border:none;border-radius:50%;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out;transform:scale(0);transform-origin:50% 50%}@media (hover: hover){.form-radio-input.sc-road-radio~.form-radio-label.sc-road-radio:hover::before{border-color:var(--road-input-surface)}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio:hover::after{background:var(--road-input-surface-variant)}}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-input-surface);opacity:1;transform:scale(1)}.form-radio-input.focus-visible.sc-road-radio~.form-radio-label.sc-road-radio::before{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant)}.form-radio-input.focus-visible.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-primary-700)}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio{cursor:not-allowed}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::before,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::before{background:var(--road-on-surface-disabled);border:none}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::after,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::after{background:var(--road-grey-60)}.form-radio-input.is-invalid.sc-road-radio~.form-radio-label.sc-road-radio::before{border-color:var(--road-danger-outline)}.form-radio-inverse.sc-road-radio{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-radio-inverse.sc-road-radio::before{margin:0 0 0 1rem}.form-radio-inverse.sc-road-radio::after{right:0.1875rem;left:auto}";
+const radioCss = ".sc-road-radio-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface)}.form-radio-inline.sc-road-radio-h{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:1.5rem;margin-bottom:0}.form-radio-input.sc-road-radio{position:absolute;z-index:-1;width:20px;height:20px;opacity:0}.form-radio-input.sc-road-radio:disabled{z-index:1;width:100%;cursor:not-allowed}.form-radio-label.sc-road-radio{position:relative;display:inline-flex;align-items:flex-start;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-radio-label.sc-road-radio::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0.1rem 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:50%;transition:border-color 0.2s ease-in-out}.form-radio-label-span.sc-road-radio{margin-left:var(--road-spacing-02);color:var(--road-on-surface-weak)}.form-radio-label.sc-road-radio::after{position:absolute;top:0.285rem;left:0.1875rem;box-sizing:border-box;display:block;width:0.875rem;height:0.875rem;content:\"\";background:var(--road-grey-60);border:none;border-radius:50%;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out;transform:scale(0);transform-origin:50% 50%}@media (hover: hover){.form-radio-input.sc-road-radio~.form-radio-label.sc-road-radio:hover::before{border-color:var(--road-input-surface)}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio:hover::after{background:var(--road-input-surface-variant)}}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-input-surface);opacity:1;transform:scale(1)}.form-radio-input.focus-visible.sc-road-radio~.form-radio-label.sc-road-radio::before{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant)}.form-radio-input.focus-visible.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-primary-700)}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio{cursor:not-allowed}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::before,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::before{background:var(--road-on-surface-disabled);border:none}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::after,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::after{background:var(--road-grey-60)}.form-radio-input.is-invalid.sc-road-radio~.form-radio-label.sc-road-radio::before{border-color:var(--road-danger-outline)}.form-radio-inverse.sc-road-radio{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-radio-inverse.sc-road-radio::before{margin:0 0 0 1rem}.form-radio-inverse.sc-road-radio::after{right:0.1875rem;left:auto}";
 
 class Radio {
   constructor(hostRef) {
@@ -32533,6 +32568,7 @@ class Radio {
     this.disabled = false;
     this.value = undefined;
     this.label = `${this.radioId}-label`;
+    this.secondaryLabel = undefined;
     this.inverse = false;
     this.error = undefined;
     this.helper = undefined;
@@ -32561,7 +32597,7 @@ class Radio {
     const inverseClass = this.inverse && 'form-radio-inverse';
     const isInvalidClass = this.error ? 'is-invalid' : '';
     const inlineClass = this.inline ? 'form-radio-inline' : '';
-    return (hAsync(Host, { class: `form-radio ${inlineClass}` }, hAsync("input", { class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), hAsync("label", { class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label)));
+    return (hAsync(Host, { class: `form-radio ${inlineClass}` }, hAsync("input", { class: `form-radio-input ${isInvalidClass}`, type: "radio", id: this.radioId, name: this.name, required: this.required, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, checked: this.checked, "aria-checked": `${this.checked}`, "aria-labelledby": labelId, value: this.value, onFocus: this.onFocus, onBlur: this.onBlur }), hAsync("label", { class: `form-radio-label ${inverseClass}`, id: labelId, htmlFor: this.radioId }, this.label, " ", hAsync("span", { class: "form-radio-label-span" }, this.secondaryLabel))));
   }
   get el() { return getElement(this); }
   static get style() { return radioCss; }
@@ -32575,6 +32611,7 @@ class Radio {
       "disabled": [4],
       "value": [8],
       "label": [1],
+      "secondaryLabel": [1, "secondary-label"],
       "inverse": [4],
       "error": [4],
       "helper": [1],
@@ -36409,6 +36446,11 @@ class SelectFilter {
           this.onClick(activeOption.item.value, activeOption.item.label);
         }
       }
+      else if (event.key === 'Escape') {
+        event.preventDefault();
+        this.isOpen = false;
+        this.isActive = false;
+      }
     }
   }
   get filteredOptions() {
@@ -36489,7 +36531,7 @@ class Spinner {
   }; }
 }
 
-const progressIndicatorHorizontalCss = "/*!@:host*/.sc-road-progress-indicator-horizontal-h{display:block}/*!@.progress-indicator-horizontal*/.progress-indicator-horizontal.sc-road-progress-indicator-horizontal{display:flex;padding-left:0;margin:0;font-family:var(--road-font);line-height:1.5;list-style:none}/*!@.progress-indicator-horizontal.progress-indicator-horizontal-header*/.progress-indicator-horizontal.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal{background-color:var(--road-header-surface)}/*!@.progress-indicator-horizontal-item*/.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal{display:flex;flex:1;flex-direction:column;text-align:center}/*!@.progress-indicator-horizontal-item:last-child*/.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:last-child{margin-top:0.125rem}/*!@.progress-indicator-horizontal-item:not(:last-child)::after*/.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:\"\";background:var(--road-surface-disabled)}/*!@.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:\"\";background:var(--road-header-surface-disabled)}/*!@.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link*/.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:not(.completed) .progress-indicator-horizontal-link.sc-road-progress-indicator-horizontal{cursor:not-allowed}/*!@.progress-indicator-horizontal-link*/.progress-indicator-horizontal-link.sc-road-progress-indicator-horizontal{z-index:1;display:flex;flex-direction:column;align-items:center;text-decoration:none}/*!@.progress-indicator-horizontal-icon*/.progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}/*!@::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon*/.sc-road-progress-indicator-horizontal-s>[slot=\"progress-indicator-horizontal-icon\"] road-icon{color:currentColor}/*!@.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon*/.progress-indicator-horizontal-header .sc-road-progress-indicator-horizontal-s>[slot=\"progress-indicator-horizontal-icon\"] road-icon{color:currentColor}/*!@.progress-indicator-horizontal-header .progress-indicator-horizontal-icon*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-header-surface-disabled);background:var(--road-header-surface-disabled);border-radius:50%;fill:currentColor}/*!@.progress-indicator-horizontal-title*/.progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}/*!@.progress-indicator-horizontal-title span*/.progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal span.sc-road-progress-indicator-horizontal{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-weak)}/*!@.progress-indicator-horizontal-header .progress-indicator-horizontal-title*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-header-surface-disabled)}/*!@.progress-indicator-horizontal-header .progress-indicator-horizontal-title span*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal span.sc-road-progress-indicator-horizontal{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-header-surface-weak)}/*!@.completed:not(:last-child)::after*/.completed.sc-road-progress-indicator-horizontal:not(:last-child)::after{background:var(--road-primary)}/*!@.progress-indicator-horizontal-header .completed:not(:last-child)::after*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .completed.sc-road-progress-indicator-horizontal:not(:last-child)::after{background:var(--road-header-badge)}/*!@.current .progress-indicator-horizontal-icon*/.current.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{color:var(--road-on-primary);background:var(--road-primary);border:0}/*!@.completed .progress-indicator-horizontal-icon*/.completed.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}/*!@.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .completed.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{color:var(--road-header-badge);background:none;border:2px solid var(--road-header-badge)}/*!@.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .current.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{width:calc(1.5rem);height:calc(1.5rem);color:var(--road-on-header-badge);background:var(--road-header-badge);border:0}/*!@.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title*/.current.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal,.completed.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal{font-weight:700;color:var(--road-on-surface)}/*!@.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .current.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal,.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .completed.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal{font-weight:700;color:var(--road-on-header-surface)}";
+const progressIndicatorHorizontalCss = "/*!@:host*/.sc-road-progress-indicator-horizontal-h{display:block}/*!@.progress-indicator-horizontal*/.progress-indicator-horizontal.sc-road-progress-indicator-horizontal{display:flex;padding-left:0;margin:0;font-family:var(--road-font);line-height:1.5;list-style:none}/*!@.progress-indicator-horizontal.progress-indicator-horizontal-header*/.progress-indicator-horizontal.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal{background-color:var(--road-header-surface)}/*!@.progress-indicator-horizontal-item*/.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal{display:flex;flex:1;flex-direction:column;text-align:center}/*!@.progress-indicator-horizontal-item:last-child*/.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:last-child{margin-top:0.125rem}/*!@.progress-indicator-horizontal-item:not(:last-child)::after*/.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:\"\";background:var(--road-surface-disabled)}/*!@.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:\"\";background:var(--road-header-surface-disabled)}/*!@.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link*/.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:not(.completed) .progress-indicator-horizontal-link.sc-road-progress-indicator-horizontal{cursor:not-allowed}/*!@.progress-indicator-horizontal-link*/.progress-indicator-horizontal-link.sc-road-progress-indicator-horizontal{z-index:1;display:flex;flex-direction:column;align-items:center;text-decoration:none}/*!@.progress-indicator-horizontal-icon*/.progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}/*!@::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon*/.sc-road-progress-indicator-horizontal-s>[slot=\"progress-indicator-horizontal-icon\"] road-icon{color:currentColor}/*!@.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon*/.progress-indicator-horizontal-header .sc-road-progress-indicator-horizontal-s>[slot=\"progress-indicator-horizontal-icon\"] road-icon{color:currentColor}/*!@.progress-indicator-horizontal-header .progress-indicator-horizontal-icon*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-header-surface-disabled);background:var(--road-header-surface-disabled);border-radius:50%;fill:currentColor}/*!@.progress-indicator-horizontal-title*/.progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}/*!@.progress-indicator-horizontal-title span*/.progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal span.sc-road-progress-indicator-horizontal{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-weak)}/*!@.progress-indicator-horizontal-header .progress-indicator-horizontal-title*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-header-surface-disabled)}/*!@.progress-indicator-horizontal-header .progress-indicator-horizontal-title span*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal span.sc-road-progress-indicator-horizontal{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-header-surface-weak)}/*!@.completed:not(:last-child)::after*/.completed.sc-road-progress-indicator-horizontal:not(:last-child)::after{background:var(--road-primary)}/*!@.progress-indicator-horizontal-header .completed:not(:last-child)::after,\n.progress-indicator-horizontal-header .in-progress:not(:last-child)::after*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .completed.sc-road-progress-indicator-horizontal:not(:last-child)::after,.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .in-progress.sc-road-progress-indicator-horizontal:not(:last-child)::after{background:var(--road-header-badge)}/*!@.current .progress-indicator-horizontal-icon*/.current.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{color:var(--road-on-primary);background:var(--road-primary);border:0}/*!@.completed .progress-indicator-horizontal-icon,\n.in-progress .progress-indicator-horizontal-icon*/.completed.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal,.in-progress.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}/*!@.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon,\n.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-icon*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .completed.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal,.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .in-progress.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{color:var(--road-header-badge);background:none;border:2px solid var(--road-header-badge)}/*!@.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .current.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-icon.sc-road-progress-indicator-horizontal{width:calc(1.5rem);height:calc(1.5rem);color:var(--road-on-header-badge);background:var(--road-header-badge);border:0}/*!@.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title,\n.in-progress .progress-indicator-horizontal-title*/.current.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal,.completed.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal,.in-progress.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal{font-weight:700;color:var(--road-on-surface)}/*!@.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-title*/.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .current.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal,.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .completed.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal,.progress-indicator-horizontal-header.sc-road-progress-indicator-horizontal .in-progress.sc-road-progress-indicator-horizontal .progress-indicator-horizontal-title.sc-road-progress-indicator-horizontal{font-weight:700;color:var(--road-on-header-surface)}/*!@.in-progress.progress-indicator-horizontal-item:not(:last-child)::before*/.in-progress.progress-indicator-horizontal-item.sc-road-progress-indicator-horizontal:not(:last-child)::before{position:relative;top:0.93rem;left:calc(50% + 12px);order:-1;width:calc(50% - 24px);height:2px;content:\"\";background:var(--road-primary)}";
 
 /**
  * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add
@@ -36727,7 +36769,7 @@ class TabBar {
   }; }
 }
 
-const tabButtonCss = "/*!@:host*/.sc-road-tab-button-h{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}/*!@:host(.tab-secondary)*/.tab-secondary.sc-road-tab-button-h{--tab-underline-selected:var(--road-secondary-600)}/*!@:host(.tab-selected)*/.tab-selected.sc-road-tab-button-h{color:var(--tab-color-selected)}/*!@:host(.tab-selected) ::slotted(road-icon)*/.sc-road-tab-button-h.tab-selected .sc-road-tab-button-s>road-icon{color:var(--tab-color-selected)}/*!@:host(.tab-selected) .button-native::after*/.tab-selected.sc-road-tab-button-h .button-native.sc-road-tab-button::after{background:var(--tab-underline-selected);opacity:1;transform:none}/*!@:host(:hover)*/.sc-road-tab-button-h:hover{background:var(--tab-background-hover)}/*!@:host(.focus-visible)*/.focus-visible.sc-road-tab-button-h{background:var(--tab-background-focused);outline:auto}/*!@.button-native*/.button-native.sc-road-tab-button{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*/.button-native.sc-road-tab-button::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*/.button-inner.sc-road-tab-button{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}/*!@:host ::slotted(road-icon)*/.sc-road-tab-button-h .sc-road-tab-button-s>road-icon{color:var(--tab-color)}/*!@:host(.tab-layout-icon-start) ::slotted(road-icon)*/.sc-road-tab-button-h.tab-layout-icon-start .sc-road-tab-button-s>road-icon{margin-right:0.5rem}/*!@:host(.tab-layout-icon-top) .button-inner*/.tab-layout-icon-top.sc-road-tab-button-h .button-inner.sc-road-tab-button{flex-direction:column}/*!@:host ::slotted(road-label)*/.sc-road-tab-button-h .sc-road-tab-button-s>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)*/.sc-road-tab-button-h.tab-layout-icon-top .sc-road-tab-button-s>road-label{margin-top:0.25rem;font-size:1rem}";
+const tabButtonCss = "/*!@:host*/.sc-road-tab-button-h{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}/*!@:host(.tab-secondary)*/.tab-secondary.sc-road-tab-button-h{--tab-underline-selected:var(--road-secondary-600)}/*!@:host(.tab-selected)*/.tab-selected.sc-road-tab-button-h{color:var(--tab-color-selected)}/*!@:host(.tab-selected) ::slotted(road-icon)*/.sc-road-tab-button-h.tab-selected .sc-road-tab-button-s>road-icon{color:var(--tab-color-selected)}/*!@:host(.tab-selected) .button-native::after*/.tab-selected.sc-road-tab-button-h .button-native.sc-road-tab-button::after{background:var(--tab-underline-selected);opacity:1;transform:none}/*!@:host(:hover)*/.sc-road-tab-button-h:hover{background:var(--tab-background-hover)}/*!@:host(.focus-visible)*/.focus-visible.sc-road-tab-button-h{background:var(--tab-background-focused);outline:auto}/*!@:host(.tab-disabled)*/.tab-disabled.sc-road-tab-button-h{background:var(--road-surface-disabled)}/*!@:host(.tab-disabled) .button-native*/.tab-disabled.sc-road-tab-button-h .button-native.sc-road-tab-button{cursor:not-allowed}/*!@:host(.tab-disabled) ::slotted(road-label)*/.sc-road-tab-button-h.tab-disabled .sc-road-tab-button-s>road-label{color:var(--road-on-surface-disabled)}/*!@.button-native*/.button-native.sc-road-tab-button{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*/.button-native.sc-road-tab-button::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*/.button-inner.sc-road-tab-button{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}/*!@:host ::slotted(road-icon)*/.sc-road-tab-button-h .sc-road-tab-button-s>road-icon{color:var(--tab-color)}/*!@:host(.tab-layout-icon-start) ::slotted(road-icon)*/.sc-road-tab-button-h.tab-layout-icon-start .sc-road-tab-button-s>road-icon{margin-right:0.5rem}/*!@:host(.tab-layout-icon-top) .button-inner*/.tab-layout-icon-top.sc-road-tab-button-h .button-inner.sc-road-tab-button{flex-direction:column}/*!@:host ::slotted(road-label)*/.sc-road-tab-button-h .sc-road-tab-button-s>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)*/.sc-road-tab-button-h.tab-layout-icon-top .sc-road-tab-button-s>road-label{margin-top:0.25rem;font-size:1rem}";
 
 /**
  * @slot  - Content of the tab-button, it should be road-icon and road-label elements.
@@ -36752,6 +36794,7 @@ class TabButton {
     this.rel = undefined;
     this.layout = 'icon-start';
     this.selected = false;
+    this.disabled = false;
     this.tab = undefined;
     this.target = undefined;
   }
@@ -36791,20 +36834,21 @@ class TabButton {
     return 0;
   }
   render() {
-    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab } = this;
+    const { hasIcon, hasLabel, tabIndex, href, rel, target, layout, selected, tab, disabled } = this;
     const attrs = {
       download: this.download,
-      href,
+      href: !disabled ? href : undefined,
       rel,
       target,
     };
-    return (hAsync(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex, "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+    return (hAsync(Host, { onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
         'tab-selected': selected,
         'tab-has-label': hasLabel,
         'tab-has-icon': hasIcon,
         'tab-has-label-only': hasLabel && !hasIcon,
         'tab-has-icon-only': hasIcon && !hasLabel,
         [`tab-layout-${layout}`]: true,
+        'tab-disabled': disabled, // Classe CSS pour les styles désactivés
       } }, hAsync("a", Object.assign({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), hAsync("span", { class: "button-inner" }, hAsync("slot", null)))));
   }
   get el() { return getElement(this); }
@@ -36818,6 +36862,7 @@ class TabButton {
       "rel": [1],
       "layout": [1],
       "selected": [1028],
+      "disabled": [1028],
       "tab": [1],
       "target": [1]
     },
@@ -37165,7 +37210,7 @@ class Text {
   }; }
 }
 
-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 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{width:100vw;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{width:100vw;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)}";
 
 class Textarea {
   constructor(hostRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.26.0",
+  "version": "3.28.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",