@randstad-uca/design-system 1.0.25 → 1.0.27

package/dist/assets/icons/arrow_back.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3095_5899)">
+<path d="M21.475 12.2H3.725L8.575 7.35C8.775 7.15 8.775 6.85 8.575 6.65C8.375 6.45 8.075 6.45 7.875 6.65L2.15 12.35C1.95 12.55 1.95 12.85 2.15 13.05L7.8 18.7C7.9 18.8 8.025 18.85 8.15 18.85C8.275 18.85 8.4 18.8 8.5 18.7C8.7 18.5 8.7 18.2 8.5 18L3.725 13.2H21.5C21.775 13.2 22 12.975 22 12.7C22 12.425 21.75 12.2 21.475 12.2Z" fill="#2175D9"/>
+</g>
+<defs>
+<clipPath id="clip0_3095_5899">
+<rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/components/Checkbox.d.ts

@@ -1,15 +1,9 @@
 import { LitElement } from 'lit';
 export declare class Checkbox extends LitElement {
-    prefix: string;
-    clause1Text: string;
-    clause1Url?: string;
-    connector: string;
-    clause2Text: string;
-    clause2Url?: string;
     checked: boolean;
+    error: boolean;
+    disabled: boolean;
     static styles: import("lit").CSSResult;
     private toggleCheck;
-    private renderClause;
-    private stopPropagation;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/Form.d.ts

@@ -20,10 +20,13 @@ export declare class RandstadForm extends LitElement {
     maxLength?: number;
     required: boolean;
     optional: boolean;
+    helpLink?: string;
     static styles: import("lit").CSSResult;
     private togglePassword;
     private handleInput;
     private handleClear;
     private handleLinkClick;
+    private handleHelpClick;
+    private handleKeyDown;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/Select.d.ts

@@ -22,6 +22,7 @@ export declare class FilterableSelect extends LitElement {
     filterValue: string;
     isOpen: boolean;
     mobileFilterValue: string;
+    private highlightedIndex;
     private debounceTimeout;
     static styles: import("lit").CSSResult;
     constructor();
@@ -36,6 +37,7 @@ export declare class FilterableSelect extends LitElement {
     handleSelect(option: any): void;
     handleIconClick(): void;
     handleClickOutside(e: Event): void;
+    handleKeyDown(e: KeyboardEvent): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/index.js

@@ -14,13 +14,13 @@ const l=t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)}
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */Symbol.metadata??=Symbol("metadata"),k.litPropertyMetadata??=new WeakMap;class P extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=z){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&v(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=m(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const s=o?.call(this);r?.call(this,e),this.requestUpdate(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??z}static _$Ei(){if(this.hasOwnProperty(E("elementProperties")))return;const t=w(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(E("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(E("properties"))){const t=this.properties,e=[...f(t),...x(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(g(t))}else void 0!==t&&e.push(g(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return b(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:O).toAttribute(e,i.type);this._$Em=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:O;this._$Em=o,this[o]=r.fromAttribute(e,t.type)??this._$Ej?.get(o)??null,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const o=this.constructor,r=this[t];if(i??=o.getPropertyOptions(t),!((i.hasChanged??j)(r,e)||i.useDefault&&i.reflect&&r===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:r},s){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==r||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM()}updated(t){}firstUpdated(t){}}P.elementStyles=[],P.shadowRootOptions={mode:"open"},P[E("elementProperties")]=new Map,P[E("finalized")]=new Map,C?.({ReactiveElement:P}),(k.reactiveElementVersions??=[]).push("2.1.0");
+ */Symbol.metadata??=Symbol("metadata"),k.litPropertyMetadata??=new WeakMap;class A extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=z){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&v(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=m(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const s=o?.call(this);r?.call(this,e),this.requestUpdate(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??z}static _$Ei(){if(this.hasOwnProperty(E("elementProperties")))return;const t=w(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(E("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(E("properties"))){const t=this.properties,e=[...f(t),...x(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(g(t))}else void 0!==t&&e.push(g(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return b(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:O).toAttribute(e,i.type);this._$Em=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:O;this._$Em=o,this[o]=r.fromAttribute(e,t.type)??this._$Ej?.get(o)??null,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const o=this.constructor,r=this[t];if(i??=o.getPropertyOptions(t),!((i.hasChanged??j)(r,e)||i.useDefault&&i.reflect&&r===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:r},s){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==r||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM()}updated(t){}firstUpdated(t){}}A.elementStyles=[],A.shadowRootOptions={mode:"open"},A[E("elementProperties")]=new Map,A[E("finalized")]=new Map,C?.({ReactiveElement:A}),(k.reactiveElementVersions??=[]).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const T={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:j},A=(t=T,e,i)=>{const{kind:o,metadata:r}=i;let s=globalThis.litPropertyMetadata.get(r);if(void 0===s&&globalThis.litPropertyMetadata.set(r,s=new Map),"setter"===o&&((t=Object.create(t)).wrapped=!0),s.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,r,t)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];e.call(this,i),this.requestUpdate(o,r,t)}}throw Error("Unsupported decorator location: "+o)};function I(t){return(e,i)=>"object"==typeof i?A(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
+const P={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:j},T=(t=P,e,i)=>{const{kind:o,metadata:r}=i;let s=globalThis.litPropertyMetadata.get(r);if(void 0===s&&globalThis.litPropertyMetadata.set(r,s=new Map),"setter"===o&&((t=Object.create(t)).wrapped=!0),s.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,r,t)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];e.call(this,i),this.requestUpdate(o,r,t)}}throw Error("Unsupported decorator location: "+o)};function I(t){return(e,i)=>"object"==typeof i?T(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -60,28 +60,28 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
   font-size: 18px;
   line-height: 30px;
   letter-spacing: 0%;
-`,U=t`
+`,D=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 18px;
   line-height: 30px;
   letter-spacing: 0%;
   vertical-align: middle;
-`,V=t`
+`,U=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 20px;
   line-height: 30px;
   letter-spacing: -1%;
   vertical-align: middle;
-`,q=t`
+`,V=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 26px;
   line-height: 30px;
   letter-spacing: -1%;
   vertical-align: middle;
-`;let D=class extends e{constructor(){super(...arguments),this.title="",this.isOpen=!1,this.isDesktop=window.innerWidth>940,this.handleResize=()=>{this.isDesktop=window.innerWidth>940}}static{this.styles=t`
+`;let q=class extends e{constructor(){super(...arguments),this.title="",this.isOpen=!1,this.isDesktop=window.innerWidth>940,this.handleResize=()=>{this.isDesktop=window.innerWidth>940}}static{this.styles=t`
     :host {
       display: flex;
       flex-direction: column;
@@ -159,7 +159,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       <div class="content ${this.isOpen?"open":""}">
         <slot></slot>
       </div>
-    `}};n([I({type:String}),a("design:type",Object)],D.prototype,"title",void 0),n([L(),a("design:type",Object)],D.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],D.prototype,"isDesktop",void 0),D=n([l("accordion-panel")],D);let N=class extends e{static{this.styles=t`
+    `}};n([I({type:String}),a("design:type",Object)],q.prototype,"title",void 0),n([L(),a("design:type",Object)],q.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],q.prototype,"isDesktop",void 0),q=n([l("accordion-panel")],q);let N=class extends e{static{this.styles=t`
     :host {
       display: flex;
       flex-direction: column;
@@ -406,7 +406,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
             `:i`
               ${this.iconSrc&&"button-round"===this.variant?i`<img src=${this.iconSrc} alt="icon" class="button-icon" part="button-icon"/>`:""}
               ${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?i`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
-              ${this.label?i`<span>${this.label}</span>`:i`<slot></slot>`}
+              ${this.label?i`<span part="label">${this.label}</span>`:i`<slot></slot>`}
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?i`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
@@ -524,7 +524,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
           </div>
         </div>
       </div>
-    `}};n([I({type:String}),a("design:type",Object)],H.prototype,"img",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"name",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"title",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"description",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"url",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"buttonLabel",void 0),H=n([l("carousel-card")],H);let Y=class extends e{constructor(){super(...arguments),this.prefix="Acepto los",this.clause1Text="términos y condiciones",this.connector="y los",this.clause2Text="avisos de privacidad del sitio",this.checked=!1}static{this.styles=t`
+    `}};n([I({type:String}),a("design:type",Object)],H.prototype,"img",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"name",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"title",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"description",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"url",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"buttonLabel",void 0),H=n([l("carousel-card")],H);let K=class extends e{constructor(){super(...arguments),this.checked=!1,this.error=!1,this.disabled=!1}static{this.styles=t`
     :host {
       display: block;
       max-width: 100%;
@@ -565,36 +565,81 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       transform: rotate(45deg);
     }
 
-    input[type="checkbox"]:hover {
-      box-shadow: 0px 0px 0px 4px #0F19411A;
+    input[type="checkbox"]:checked:disabled::after {
+      border-color: var(--secondary-color-40);
+    }
+
+    label.error input[type="checkbox"]:checked:disabled::after {
+      border-color: white;
     }
 
     .terms-text {
       display: inline;
     }
 
-    .terms-link {
+    .terms-text ::slotted(a) {
       color: var(--primary-color);
       text-decoration: none;
       cursor: pointer;
     }
-  `}toggleCheck(t){this.checked=t.target.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))}renderClause(t,e){return e?i`<a class="terms-link" href="${e}" target="_blank" rel="noopener" @click=${this.stopPropagation}>${t}</a>`:i`${t}`}stopPropagation(t){t.stopPropagation()}render(){return i`
-      <label>
+
+    input[type="checkbox"].error,
+    label.error input[type="checkbox"]:not(:disabled) {
+      border-color: var(--ui-negative);
+    }
+
+    /* Hover sin error (solo si no está deshabilitado) */
+    input[type="checkbox"]:hover:not(:disabled):not(.error) {
+      box-shadow: 0 0 0 4px var(--secondary-color-10);
+    }
+
+    /* Hover con error (solo si no está deshabilitado) */
+    label.error input[type="checkbox"]:hover:not(:disabled) {
+      box-shadow: 0px 0px 0px 4px #E00F0F1A;
+    }
+
+    /* ✅ Focus sin error */
+    input[type="checkbox"]:focus-visible:not(:disabled):not(.error),
+    label:not(.error) input[type="checkbox"]:focus-visible:not(:disabled) {
+      outline: none;
+      box-shadow: 0 0 0 4px var(--secondary-color-10);
+    }
+
+    /* ❌ Focus con error */
+    label.error input[type="checkbox"]:focus-visible:not(:disabled) {
+      outline: none;
+      box-shadow: 0 0 0 4px #E00F0F1A;
+    }
+
+    input[type="checkbox"].error:checked,
+    label.error input[type="checkbox"]:checked {
+      background-color: var(--ui-negative);
+      border-color: var(--ui-negative);
+    }
+
+    input[type="checkbox"]:disabled {
+      background-color: var(--secondary-color-10);
+      border-color: var(--secondary-color-20);
+      cursor: not-allowed;
+    }
+
+  `}toggleCheck(t){this.checked=t.target.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))}render(){return i`
+      <label class="${this.error?"error":""} ${this.disabled?"disabled":""}">
         <input
           type="checkbox"
           role="checkbox"
           aria-checked=${this.checked?"true":"false"}
           .checked=${this.checked}
+          ?disabled=${this.disabled}
           @change=${this.toggleCheck}
+          @focus=${()=>this.setAttribute("focused","")}
+          @blur=${()=>this.removeAttribute("focused")}
         />
         <span class="terms-text">
-          ${this.prefix}&nbsp;
-          ${this.renderClause(this.clause1Text,this.clause1Url)},&nbsp;
-          ${this.connector}&nbsp;
-          ${this.renderClause(this.clause2Text,this.clause2Url)}.
+          <slot></slot>
         </span>
       </label>
-    `}};n([I({type:String}),a("design:type",Object)],Y.prototype,"prefix",void 0),n([I({type:String}),a("design:type",Object)],Y.prototype,"clause1Text",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"clause1Url",void 0),n([I({type:String}),a("design:type",Object)],Y.prototype,"connector",void 0),n([I({type:String}),a("design:type",Object)],Y.prototype,"clause2Text",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"clause2Url",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],Y.prototype,"checked",void 0),Y=n([l("randstad-checkbox")],Y);let W=class extends e{constructor(){super(...arguments),this.value="",this.size="md",this.icon=null,this.helper=null,this.error=!1,this.errorMessage="",this.disabled=!1,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1,this.required=!1,this.optional=!1}static{this.styles=t`
+    `}};n([I({type:Boolean,reflect:!0}),a("design:type",Object)],K.prototype,"checked",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"error",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"disabled",void 0),K=n([l("randstad-checkbox")],K);let Y=class extends e{constructor(){super(...arguments),this.value="",this.size="md",this.icon=null,this.helper=null,this.error=!1,this.errorMessage="",this.disabled=!1,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1,this.required=!1,this.optional=!1}static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -828,7 +873,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       color: var(--secondary-color-60);
       ${_}
     }
-  `}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){const e=t.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=e.slice(0,this.maxLength):this.value=e,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleClear(){this.value="",this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}render(){const t=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type;return i`
+  `}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){const e=t.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=e.slice(0,this.maxLength):this.value=e,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleClear(){this.value="",this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}handleHelpClick(){this.helpLink&&window.open(this.helpLink,"_blank")}handleKeyDown(t){if("Enter"===t.key){const t=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),e=this.closest("form");e&&e.dispatchEvent(t)}}render(){const t=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type;return i`
       <div
         class="form ${this.error?"error":""} ${this.disabled?"disabled":""}"
         style=${this.labelColor?`--label-color: ${this.labelColor}`:o}
@@ -839,9 +884,16 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
               ${this.label}
               ${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
             </label>
-            ${this.tooltipMessage?.trim()?i`<div class="tooltip-wrapper">
-                  <randstad-icon class="help-icon" name="ayuda" size="20px"></randstad-icon>
-                </div>`:o}
+            ${this.helpLink?i`
+                  <div class="tooltip-wrapper">
+                    <randstad-icon
+                      class="help-icon"
+                      name="ayuda"
+                      size="20px"
+                      @click=${this.handleHelpClick}>
+                    </randstad-icon>
+                  </div>
+                `:o}
           </div>
         `:o}
 
@@ -856,6 +908,8 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                     .value=${this.value}
                     ?disabled=${this.disabled}
                     @input=${this.handleInput}
+                    @keydown=${this.handleKeyDown}
+                    maxlength=${this.maxLength??o}
                   ></textarea>`:i`
                   <input
                     class="form-input"
@@ -864,6 +918,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                     .value=${this.value}
                     ?disabled=${this.disabled}
                     @input=${this.handleInput}
+                    @keydown=${this.handleKeyDown}
                     maxlength=${this.maxLength??o}
                   />
 
@@ -891,7 +946,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
         ${this.helper?i`<p class="helper-description">${this.helper}</p>`:o}
       </div>
-    `}};n([I({type:String}),a("design:type",String)],W.prototype,"placeholder",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"labelColor",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"value",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Boolean)],W.prototype,"error",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Boolean)],W.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Boolean)],W.prototype,"typing",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"tooltipMessage",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"linkText",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"linkRoute",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],W.prototype,"isPasswordVisible",void 0),n([I({type:Boolean}),a("design:type",Boolean)],W.prototype,"cleanButton",void 0),n([I({type:Number}),a("design:type",Number)],W.prototype,"maxLength",void 0),n([I({type:Boolean}),a("design:type",Object)],W.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],W.prototype,"optional",void 0),W=n([l("randstad-form")],W);let K=class extends e{constructor(){super(...arguments),this.label="",this.error=!1,this.errorMessage="",this.required=!1,this.optional=!1}static{this.styles=t`
+    `}};n([I({type:String}),a("design:type",String)],Y.prototype,"placeholder",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"labelColor",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"value",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],Y.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],Y.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"error",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"typing",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"tooltipMessage",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"linkText",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"linkRoute",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],Y.prototype,"isPasswordVisible",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"cleanButton",void 0),n([I({type:Number}),a("design:type",Number)],Y.prototype,"maxLength",void 0),n([I({type:Boolean}),a("design:type",Object)],Y.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],Y.prototype,"optional",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"helpLink",void 0),Y=n([l("randstad-form")],Y);let W=class extends e{constructor(){super(...arguments),this.label="",this.error=!1,this.errorMessage="",this.required=!1,this.optional=!1}static{this.styles=t`
     :host {
       display: flex;
       flex-direction: column;
@@ -944,7 +999,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       </div>
 
       ${this.error?i`<p class="error">${this.errorMessage}</p>`:this.helper?i`<p class="helper">${this.helper}</p>`:null}
-    `}};n([I({type:String}),a("design:type",Object)],K.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],K.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"error",void 0),n([I({type:String}),a("design:type",Object)],K.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"optional",void 0),K=n([l("randstad-form-group")],K);class X extends e{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=t`
+    `}};n([I({type:String}),a("design:type",Object)],W.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Object)],W.prototype,"error",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Object)],W.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],W.prototype,"optional",void 0),W=n([l("randstad-form-group")],W);class X extends e{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=t`
     :host {
       display: inline-flex;
       width: var(--icon-size, 24px);
@@ -1090,7 +1145,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .modal-title {
-      ${q}
+      ${V}
       margin: 0;
       color: var(--secondary-color);
     }
@@ -1236,7 +1291,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .popup-title {
-      ${V}
+      ${U}
       margin: 0;
       color: var(--secondary-color-80);
     }
@@ -1438,18 +1493,18 @@ const Ct=Symbol("isFocusable"),Et=Symbol("privateIsFocusable"),Ot=Symbol("extern
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const Pt=Symbol("getFormValue"),Tt=Symbol("getFormState");
+const At=Symbol("getFormValue"),Pt=Symbol("getFormState");
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-class At{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const t=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,t)))return this.currentValidity;const{validity:e,validationMessage:i}=this.computeValidity(t);return this.prevState=this.copy(t),this.currentValidity={validationMessage:i,validity:{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing}},this.currentValidity}}
+class Tt{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const t=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,t)))return this.currentValidity;const{validity:e,validationMessage:i}=this.computeValidity(t);return this.prevState=this.copy(t),this.currentValidity={validationMessage:i,validity:{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing}},this.currentValidity}}
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */class It extends At{computeValidity(t){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let e=!1,i=!1;for(const{checked:o,required:r}of t)r&&(e=!0),o&&(i=!0);return this.radioElement.checked=i,this.radioElement.required=e,{validity:{valueMissing:e&&!i},validationMessage:this.radioElement.validationMessage}}equals(t,e){if(t.length!==e.length)return!1;for(let i=0;i<t.length;i++){const o=t[i],r=e[i];if(o.checked!==r.checked||o.required!==r.required)return!1}return!0}copy(t){return t.map((({checked:t,required:e})=>({checked:t,required:e})))}}
+ */class It extends Tt{computeValidity(t){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let e=!1,i=!1;for(const{checked:o,required:r}of t)r&&(e=!0),o&&(i=!0);return this.radioElement.checked=i,this.radioElement.required=e,{validity:{valueMissing:e&&!i},validationMessage:this.radioElement.validationMessage}}equals(t,e){if(t.length!==e.length)return!1;for(let i=0;i<t.length;i++){const o=t[i],r=e[i];if(o.checked!==r.checked||o.required!==r.required)return!1}return!0}copy(t){return t.map((({checked:t,required:e})=>({checked:t,required:e})))}}
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -1459,7 +1514,7 @@ class At{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{}
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */var Ft;const _t=Symbol("checked");let Rt=0;const Mt=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[$t](),this[mt].validity}get validationMessage(){return this[$t](),this[mt].validationMessage}get willValidate(){return this[$t](),this[mt].willValidate}checkValidity(){return this[$t](),this[mt].checkValidity()}reportValidity(){return this[$t](),this[mt].reportValidity()}setCustomValidity(t){this[St]=t,this[$t]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[$t]()}firstUpdated(t){super.firstUpdated(t),this[$t]()}[(e=St,$t)](){if(r)return;this[kt]||(this[kt]=this[xt]());const{validity:t,validationMessage:e}=this[kt].getValidity(),i=!!this[St],o=this[St]||e;this[mt].setValidity({...t,customError:i},o,this[wt]()??void 0)}[xt](){throw new Error("Implement [createValidator]")}[wt](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[mt].form}get labels(){return this[mt].labels}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}attributeChangedCallback(t,e,i){if("name"!==t&&"disabled"!==t)super.attributeChangedCallback(t,e,i);else{const i="disabled"===t?null!==e:e;this.requestUpdate(t,i)}}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[mt].setFormValue(this[Pt](),this[Tt]())}[Pt](){throw new Error("Implement [getFormValue]")}[Tt](){return this[Pt]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,n([I({noAccessor:!0})],e.prototype,"name",null),n([I({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((Bt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[Ct](){return this[Et]}set[Ct](t){this[Ct]!==t&&(this[Et]=t,this[zt]())}connectedCallback(){super.connectedCallback(),this[zt]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[jt])return this.hasAttribute("tabindex")?void(this[Ot]=this.tabIndex):(this[Ot]=null,void this[zt]())}else super.attributeChangedCallback(t,e,i)}[(e=Et,i=Ot,o=jt,zt)](){const t=this[Ct]?0:-1,e=this[Ot]??t;this[jt]=!0,this.tabIndex=e,this[jt]=!1}}return n([I({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(e),class extends Bt{get[mt](){return this[ft]||(this[ft]=this.attachInternals()),this[ft]}})));var Bt;class Ut extends Mt{get checked(){return this[_t]}set checked(t){const e=this.checked;e!==t&&(this[_t]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++Rt,this[Ft]=!1,this.required=!1,this.value="on",this.selectionController=new Lt(this),this.addController(this.selectionController),r||(this[mt].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t={checked:this.checked};return i`
+ */var Ft;const _t=Symbol("checked");let Rt=0;const Mt=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[$t](),this[mt].validity}get validationMessage(){return this[$t](),this[mt].validationMessage}get willValidate(){return this[$t](),this[mt].willValidate}checkValidity(){return this[$t](),this[mt].checkValidity()}reportValidity(){return this[$t](),this[mt].reportValidity()}setCustomValidity(t){this[St]=t,this[$t]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[$t]()}firstUpdated(t){super.firstUpdated(t),this[$t]()}[(e=St,$t)](){if(r)return;this[kt]||(this[kt]=this[xt]());const{validity:t,validationMessage:e}=this[kt].getValidity(),i=!!this[St],o=this[St]||e;this[mt].setValidity({...t,customError:i},o,this[wt]()??void 0)}[xt](){throw new Error("Implement [createValidator]")}[wt](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[mt].form}get labels(){return this[mt].labels}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}attributeChangedCallback(t,e,i){if("name"!==t&&"disabled"!==t)super.attributeChangedCallback(t,e,i);else{const i="disabled"===t?null!==e:e;this.requestUpdate(t,i)}}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[mt].setFormValue(this[At](),this[Pt]())}[At](){throw new Error("Implement [getFormValue]")}[Pt](){return this[At]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,n([I({noAccessor:!0})],e.prototype,"name",null),n([I({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((Bt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[Ct](){return this[Et]}set[Ct](t){this[Ct]!==t&&(this[Et]=t,this[zt]())}connectedCallback(){super.connectedCallback(),this[zt]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[jt])return this.hasAttribute("tabindex")?void(this[Ot]=this.tabIndex):(this[Ot]=null,void this[zt]())}else super.attributeChangedCallback(t,e,i)}[(e=Et,i=Ot,o=jt,zt)](){const t=this[Ct]?0:-1,e=this[Ot]??t;this[jt]=!0,this.tabIndex=e,this[jt]=!1}}return n([I({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(e),class extends Bt{get[mt](){return this[ft]||(this[ft]=this.attachInternals()),this[ft]}})));var Bt;class Dt extends Mt{get checked(){return this[_t]}set checked(t){const e=this.checked;e!==t&&(this[_t]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++Rt,this[Ft]=!1,this.required=!1,this.value="on",this.selectionController=new Lt(this),this.addController(this.selectionController),r||(this[mt].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t={checked:this.checked};return i`
       <div class="container ${s(t)}" aria-hidden="true">
         <md-ripple
           part="ripple"
@@ -1482,19 +1537,19 @@ class At{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{}
 
         <div class="touch-target"></div>
       </div>
-    `}updated(){this[mt].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(yt(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}[(Ft=_t,Pt)](){return this.checked?this.value:null}[Tt](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[xt](){return new It((()=>this.selectionController?this.selectionController.controls:[this]))}[wt](){return this.container}}n([I({type:Boolean})],Ut.prototype,"checked",null),n([I({type:Boolean})],Ut.prototype,"required",void 0),n([I()],Ut.prototype,"value",void 0),n([F(".container")],Ut.prototype,"container",void 0);
+    `}updated(){this[mt].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(yt(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}[(Ft=_t,At)](){return this.checked?this.value:null}[Pt](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[xt](){return new It((()=>this.selectionController?this.selectionController.controls:[this]))}[wt](){return this.container}}n([I({type:Boolean})],Dt.prototype,"checked",null),n([I({type:Boolean})],Dt.prototype,"required",void 0),n([I()],Dt.prototype,"value",void 0),n([F(".container")],Dt.prototype,"container",void 0);
 /**
  * @license
  * Copyright 2024 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
+const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
 `
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */;let qt=class extends Ut{};qt.styles=[Vt],qt=n([l("md-radio")],qt);let Dt=class extends e{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=t`
+ */;let Vt=class extends Dt{};Vt.styles=[Ut],Vt=n([l("md-radio")],Vt);let qt=class extends e{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=t`
     :host {
       font-family: "Graphik", sans-serif;
     }
@@ -1553,7 +1608,7 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         ></md-radio>
         <span>${this.checked?"On":"Off"} ${this.error?"Error":""}</span>
       </label>
-    `}};n([I({type:String}),a("design:type",Object)],Dt.prototype,"name",void 0),n([I({type:Boolean}),a("design:type",Object)],Dt.prototype,"checked",void 0),n([I({type:Boolean}),a("design:type",Object)],Dt.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Object)],Dt.prototype,"error",void 0),Dt=n([l("custom-radio")],Dt);let Nt=class extends e{static{this.styles=t`
+    `}};n([I({type:String}),a("design:type",Object)],qt.prototype,"name",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"checked",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"error",void 0),qt=n([l("custom-radio")],qt);let Nt=class extends e{static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -1738,6 +1793,10 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       color: var(--secondary-color-80);
     }
 
+    .options-list li.highlighted {
+      background-color: var(--primary-color-10);
+    }
+
     .mobile-modal {
       position: fixed;
       bottom: 0;
@@ -1844,7 +1903,7 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       color: var(--secondary-color-60);
       ${_}
     }
-  `}constructor(){if(super(),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.value="",this.labelColor="",this.filterable=!0,this.error=!1,this.required=!1,this.optional=!1,this.isMobile=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this),this.defaultValue){const t=this.options.find((t=>"string"==typeof t?t===this.defaultValue:t.value===this.defaultValue));t&&(this.filterValue="string"==typeof t?t:t.label)}}willUpdate(t){if(t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")||t.has("options")){const t=this.options.find((t=>"string"==typeof t?t===this.defaultValue:t.value===this.defaultValue));t&&(this.filterValue="string"==typeof t?t:t.label)}if(t.has("value")){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));t&&(this.filterValue="string"==typeof t?t:t.label)}}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside.bind(this)),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(t){this.isMobile&&(this.mobileFilterValue=""),this.disabled||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){if(!this.filterable)return;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=i,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(this.filterValue.toLowerCase()))),this.isOpen=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{this.filterValue.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:this.filterValue},bubbles:!0,composed:!0}))}),300),this.requestUpdate()}handleMobileInput(t){const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.mobileFilterValue=i,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(i))),this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{i.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:i},bubbles:!0,composed:!0}))}),300)}handleSelect(t){this.value="string"==typeof t?t:t.value;const e="string"==typeof t?t:t.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:e},bubbles:!0,composed:!0})),this.filterValue="string"==typeof t?t:t.label,this.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this.filterValue="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1):this.isOpen=!this.isOpen,this.requestUpdate())}handleClickOutside(t){const e=t.target;e instanceof Node&&(this.contains(e)||(this.isOpen=!1,this.requestUpdate()))}render(){const t=this.isMobile;return i`
+  `}constructor(){if(super(),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.value="",this.labelColor="",this.filterable=!0,this.error=!1,this.required=!1,this.optional=!1,this.isMobile=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.highlightedIndex=-1,this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this),this.defaultValue){const t=this.options.find((t=>"string"==typeof t?t===this.defaultValue:t.value===this.defaultValue));t&&(this.filterValue="string"==typeof t?t:t.label)}}willUpdate(t){if(t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")||t.has("options")){const t=this.options.find((t=>"string"==typeof t?t===this.defaultValue:t.value===this.defaultValue));t&&(this.filterValue="string"==typeof t?t:t.label)}if(t.has("value")){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));t&&(this.filterValue="string"==typeof t?t:t.label)}}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside.bind(this)),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(t){this.isMobile&&(this.mobileFilterValue=""),this.disabled||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){if(!this.filterable)return;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=i,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(this.filterValue.toLowerCase()))),this.isOpen=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{this.filterValue.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:this.filterValue},bubbles:!0,composed:!0}))}),300),this.requestUpdate()}handleMobileInput(t){const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.mobileFilterValue=i,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(i))),this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{i.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:i},bubbles:!0,composed:!0}))}),300)}handleSelect(t){this.value="string"==typeof t?t:t.value;const e="string"==typeof t?t:t.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:e},bubbles:!0,composed:!0})),this.filterValue="string"==typeof t?t:t.label,this.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this.filterValue="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1):this.isOpen=!this.isOpen,this.requestUpdate())}handleClickOutside(t){const e=t.target;e instanceof Node&&(this.contains(e)||(this.isOpen=!1,this.requestUpdate()))}handleKeyDown(t){const{key:e}=t;if(!this.isOpen&&("Enter"===e||" "===e))return t.preventDefault(),void(this.isOpen=!0);if(this.isOpen)if("ArrowDown"===e)t.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.filteredOptions.length-1),this.requestUpdate();else if("ArrowUp"===e)t.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0),this.requestUpdate();else if("Enter"===e){t.preventDefault();const e=this.filteredOptions[this.highlightedIndex];e&&this.handleSelect(e)}else"Escape"===e&&(t.preventDefault(),this.isOpen=!1)}render(){const t=this.isMobile;return i`
       <div class="select-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
         ${this.label?i`
           <div class="label-container">
@@ -1859,7 +1918,17 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
 
           <div class="input-wrapper">
             ${t?i`
-              <div class="filter-fake" @click="${this.handleInputClick}">
+              <div
+                class="filter-fake"
+                @click="${this.handleInputClick}"
+                @keydown="${this.handleKeyDown}"
+                tabindex="0"
+                role="combobox"
+                aria-expanded="${this.isOpen}"
+                aria-controls="options-list"
+                aria-haspopup="listbox"
+                aria-activedescendant=""
+              ">
                 ${this.filterValue||this.placeholder}
               </div>
             `:i`
@@ -1867,6 +1936,7 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
                 class="filter-input"
                 .value="${this.filterValue||""}"
                 @click="${this.handleInputClick}"
+                @keydown="${this.handleKeyDown}"
                 @input=${this.handleInput}
                 placeholder="${this.filterValue?"":this.placeholder}"
                 ?disabled="${this.disabled}"
@@ -1899,12 +1969,14 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
                   </button>
                 </div>
                 <ul class="options-list">
-                  ${this.filteredOptions.map((t=>{const e="string"==typeof t?t:t.label,o="object"==typeof t&&t.disabled;return i`
+                  ${this.filteredOptions.map(((t,e)=>{const o="string"==typeof t?t:t.label,r="object"==typeof t&&t.disabled;return i`
                       <li
-                        class="${o?"disabled":""}"
-                        @click="${()=>{o||this.handleSelect(t)}}"
+                        class="${r?"disabled":""} ${e===this.highlightedIndex?"highlighted":""}"
+                        role="option"
+                        aria-selected="${e===this.highlightedIndex}"
+                        @click="${()=>{r||this.handleSelect(t)}}"
                       >
-                        ${e}
+                        ${o}
                       </li>
                     `}))}
                 </ul>
@@ -1912,19 +1984,21 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
             </div>
           `:!t&&this.isOpen&&this.filteredOptions.length>0?i`
             <ul class="options-list">
-              ${this.filteredOptions.map((t=>{const e="string"==typeof t?t:t.label,o="object"==typeof t&&t.disabled;return i`
+              ${this.filteredOptions.map(((t,e)=>{const o="string"==typeof t?t:t.label,r="object"==typeof t&&t.disabled;return i`
                   <li
-                    class="${o?"disabled":""}"
-                    @click="${()=>{o||this.handleSelect(t)}}"
+                    class="${r?"disabled":""} ${e===this.highlightedIndex?"highlighted":""}"
+                    role="option"
+                    aria-selected="${e===this.highlightedIndex}"
+                    @click="${()=>{r||this.handleSelect(t)}}"
                   >
-                    ${e}
+                    ${o}
                   </li>
                 `}))}
             </ul>
           `:""}
         </div>
       </div>
-    `}};n([I({type:Array}),a("design:type",Array)],Nt.prototype,"options",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"placeholder",void 0),n([I({type:String,attribute:"default-value"}),a("design:type",Object)],Nt.prototype,"defaultValue",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],Nt.prototype,"value",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"labelColor",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"filterable",void 0),n([I({type:Number}),a("design:type",Number)],Nt.prototype,"maxLength",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Boolean)],Nt.prototype,"error",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"optional",void 0),n([L(),a("design:type",Boolean)],Nt.prototype,"isMobile",void 0),n([L(),a("design:type",Array)],Nt.prototype,"filteredOptions",void 0),n([L(),a("design:type",Object)],Nt.prototype,"filterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],Nt.prototype,"mobileFilterValue",void 0),Nt=n([l("filterable-select"),a("design:paramtypes",[])],Nt);const Gt=new CSSStyleSheet;Gt.replaceSync("\n  @font-face {\n    font-family: 'Graphik';\n    src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),\n         url('/src/assets/font/Graphik-Regular.woff') format('woff'),\n         url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');\n    font-weight: normal;\n    font-style: normal;\n  }\n\n  .body-s {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 100%;\n    letter-spacing: 0%;\n    color: green;\n  }\n");class Ht extends e{static{this.styles=[Gt,t`
+    `}};n([I({type:Array}),a("design:type",Array)],Nt.prototype,"options",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"placeholder",void 0),n([I({type:String,attribute:"default-value"}),a("design:type",Object)],Nt.prototype,"defaultValue",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],Nt.prototype,"value",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"labelColor",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"filterable",void 0),n([I({type:Number}),a("design:type",Number)],Nt.prototype,"maxLength",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Boolean)],Nt.prototype,"error",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"optional",void 0),n([L(),a("design:type",Boolean)],Nt.prototype,"isMobile",void 0),n([L(),a("design:type",Array)],Nt.prototype,"filteredOptions",void 0),n([L(),a("design:type",Object)],Nt.prototype,"filterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],Nt.prototype,"mobileFilterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"highlightedIndex",void 0),Nt=n([l("filterable-select"),a("design:paramtypes",[])],Nt);const Gt=new CSSStyleSheet;Gt.replaceSync("\n  @font-face {\n    font-family: 'Graphik';\n    src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),\n         url('/src/assets/font/Graphik-Regular.woff') format('woff'),\n         url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');\n    font-weight: normal;\n    font-style: normal;\n  }\n\n  .body-s {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 100%;\n    letter-spacing: 0%;\n    color: green;\n  }\n");class Ht extends e{static{this.styles=[Gt,t`
       :host {
         display: flex;
         position: fixed;
@@ -2060,7 +2134,7 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         <randstad-icon name=${this.icon} size="24px" color="white"></randstad-icon>
         <span class="message">${this.message}</span>
       </div>
-    `}}customElements.define("randstad-snackbar",Ht);let Yt=class extends e{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=t`
+    `}}customElements.define("randstad-snackbar",Ht);let Kt=class extends e{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=t`
     .stepper {
       display: flex;
       gap: 20px;
@@ -2160,7 +2234,7 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </div>
         `))}
       </div>
-    `}};n([I({type:Number}),a("design:type",Object)],Yt.prototype,"totalSteps",void 0),n([I({type:Number}),a("design:type",Object)],Yt.prototype,"currentStep",void 0),Yt=n([l("custom-stepper")],Yt);let Wt=class extends e{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=56,this.handleScroll=()=>{const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const{scrollLeft:e,scrollWidth:i,clientWidth:o}=t;this.showPrev=e>0,this.showNext=e+o<i-1}}static{this.styles=t`
+    `}};n([I({type:Number}),a("design:type",Object)],Kt.prototype,"totalSteps",void 0),n([I({type:Number}),a("design:type",Object)],Kt.prototype,"currentStep",void 0),Kt=n([l("custom-stepper")],Kt);let Yt=class extends e{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=56,this.handleScroll=()=>{const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const{scrollLeft:e,scrollWidth:i,clientWidth:o}=t;this.showPrev=e>0,this.showNext=e+o<i-1}}static{this.styles=t`
     :host {
       display: block;
       border-bottom: 1px solid #E7E8EC;
@@ -2173,7 +2247,7 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .tab {
-      ${U};
+      ${D};
       display: flex;
       gap: 8px;
       flex-direction: row;
@@ -2299,7 +2373,7 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </button>
         `:null}
       </div>
-    `}};n([I({type:Array}),a("design:type",Array)],Wt.prototype,"tabs",void 0),n([I({type:String}),a("design:type",String)],Wt.prototype,"selected",void 0),n([L(),a("design:type",String)],Wt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],Wt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],Wt.prototype,"showNext",void 0),Wt=n([l("tabs-bar")],Wt);let Kt=class extends e{constructor(){super(...arguments),this.files=[],this.loading=!1,this.progress=0,this.isDragging=!1,this.disabled=!1}static{this.styles=t`
+    `}};n([I({type:Array}),a("design:type",Array)],Yt.prototype,"tabs",void 0),n([I({type:String}),a("design:type",String)],Yt.prototype,"selected",void 0),n([L(),a("design:type",String)],Yt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],Yt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],Yt.prototype,"showNext",void 0),Yt=n([l("tabs-bar")],Yt);let Wt=class extends e{constructor(){super(...arguments),this.files=[],this.loading=!1,this.progress=0,this.isDragging=!1,this.disabled=!1}static{this.styles=t`
 
     :host {
       font-family: 'Graphik', sans-serif;
@@ -2423,5 +2497,5 @@ const Vt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
             </label>
           `}
       </div>
-    `}};n([I({type:Array}),a("design:type",Array)],Kt.prototype,"files",void 0),n([L(),a("design:type",Object)],Kt.prototype,"loading",void 0),n([L(),a("design:type",Object)],Kt.prototype,"progress",void 0),n([L(),a("design:type",Object)],Kt.prototype,"isDragging",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],Kt.prototype,"disabled",void 0),Kt=n([l("upload-image")],Kt);export{N as AccordionList,D as AccordionPanel,H as CarouselCard,Y as Checkbox,Q as CustomModal,Z as CustomPopup,Dt as CustomRadio,Yt as CustomStepper,Nt as FilterableSelect,K as FormGroup,X as IconComponent,tt as ProgressCircle,G as RandstadButton,W as RandstadForm,J as RandstadNotice,Wt as TabsBar,Kt as UploadImage};
+    `}};n([I({type:Array}),a("design:type",Array)],Wt.prototype,"files",void 0),n([L(),a("design:type",Object)],Wt.prototype,"loading",void 0),n([L(),a("design:type",Object)],Wt.prototype,"progress",void 0),n([L(),a("design:type",Object)],Wt.prototype,"isDragging",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],Wt.prototype,"disabled",void 0),Wt=n([l("upload-image")],Wt);export{N as AccordionList,q as AccordionPanel,H as CarouselCard,K as Checkbox,Q as CustomModal,Z as CustomPopup,qt as CustomRadio,Kt as CustomStepper,Nt as FilterableSelect,W as FormGroup,X as IconComponent,tt as ProgressCircle,G as RandstadButton,Y as RandstadForm,J as RandstadNotice,Yt as TabsBar,Wt as UploadImage};
 //# sourceMappingURL=index.js.map