@randstad-uca/design-system 1.0.22 → 1.0.24

package/dist/index.js

@@ -9,23 +9,23 @@ const l=t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)}
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let u=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==p)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(c&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=h.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&h.set(e,t))}return t}toString(){return this.cssText}};const b=(t,e)=>{if(c)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),o=d.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,t.appendChild(e)}},y=c?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new u("string"==typeof t?t:t+"",void 0,p))(e)})(t):t,{is:m,defineProperty:f,getOwnPropertyDescriptor:g,getOwnPropertyNames:v,getOwnPropertySymbols:x,getPrototypeOf:w}=Object,k=globalThis,$=k.trustedTypes,S=$?$.emptyScript:"",C=k.reactiveElementPolyfillSupport,E=(t,e)=>t,O={toAttribute(t,e){switch(e){case Boolean:t=t?S:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},P=(t,e)=>!m(t,e),T={attribute:!0,type:String,converter:O,reflect:!1,useDefault:!1,hasChanged:P};
+ */let u=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==p)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(c&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=h.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&h.set(e,t))}return t}toString(){return this.cssText}};const b=(t,e)=>{if(c)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),o=d.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,t.appendChild(e)}},y=c?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new u("string"==typeof t?t:t+"",void 0,p))(e)})(t):t,{is:m,defineProperty:g,getOwnPropertyDescriptor:f,getOwnPropertyNames:v,getOwnPropertySymbols:x,getPrototypeOf:w}=Object,k=globalThis,$=k.trustedTypes,S=$?$.emptyScript:"",C=k.reactiveElementPolyfillSupport,E=(t,e)=>t,O={toAttribute(t,e){switch(e){case Boolean:t=t?S:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},P=(t,e)=>!m(t,e),T={attribute:!0,type:String,converter:O,reflect:!1,useDefault:!1,hasChanged:P};
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */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=T){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&&f(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=g(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)??T}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=[...v(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(y(t))}else void 0!==t&&e.push(y(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??P)(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");
+ */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=T){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&&g(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=f(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)??T}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=[...v(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(y(t))}else void 0!==t&&e.push(y(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??P)(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 z={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:P},j=(t=z,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?j(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 z={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:P},I=(t=z,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 j(t){return(e,i)=>"object"==typeof i?I(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
  * SPDX-License-Identifier: BSD-3-Clause
- */function L(t){return I({...t,state:!0,attribute:!1})}
+ */function L(t){return j({...t,state:!0,attribute:!1})}
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -54,13 +54,13 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
   font-size: 16px;
   line-height: 25px;
   letter-spacing: 0%;
-`,B=t`
+`,U=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 18px;
   line-height: 30px;
   letter-spacing: 0%;
-`,U=t`
+`,B=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 18px;
@@ -81,7 +81,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
   line-height: 30px;
   letter-spacing: -1%;
   vertical-align: middle;
-`;let q=class extends e{constructor(){super(...arguments),this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.disabled=!1,this.iconName=null,this.type="button"}static{this.styles=t`
+`;let D=class extends e{constructor(){super(...arguments),this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.disabled=!1,this.iconName=null,this.type="button"}static{this.styles=t`
     :host {
       display: inline-block;
     }
@@ -101,7 +101,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .button-lg {
-      ${B}
+      ${U}
       min-height: 62px;
     }
 
@@ -269,6 +269,41 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       border: none;
       color: var(--white);
     }
+
+    .button-card {
+      font-family: 'Graphik';
+      background-color: var(--primary-color);
+      color: var(--white);
+      border-radius: 4px;
+      padding: 4px 16px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 15px;
+      letter-spacing: 0%;
+      text-align: center;
+      vertical-align: middle;
+
+    }
+
+    .button-card:not([disabled]):hover {
+      background-color: #175197;
+    }
+
+    .button-card:not([disabled]):active {
+      background-color: #124077;
+    }
+
+    .button-card:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
+    .button-card[disabled] {
+      background-color: #CFD1D9;
+      color: #6F758D;
+      cursor: not-allowed;
+    }
+
   `}handleClick(t){if(!this.disabled)if("submit"===this.type){const t=this.closest("form");t&&t.requestSubmit()}else this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))}render(){const t={button:!0,[`button-${this.size}`]:"button-round"!==this.variant,[this.variant]:!0,loader:this.loader},e="button-tertiary"===this.variant?"var(--primary-color)":"white";return i`
       <button
         part="button"
@@ -291,7 +326,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?i`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
-    `}};n([I({type:String}),a("design:type",String)],q.prototype,"variant",void 0),n([I({type:String}),a("design:type",String)],q.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],q.prototype,"label",void 0),n([I({type:Boolean}),a("design:type",Object)],q.prototype,"loader",void 0),n([I({type:String,attribute:"icon-src"}),a("design:type",String)],q.prototype,"iconSrc",void 0),n([I({type:String}),a("design:type",String)],q.prototype,"iconPosition",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Boolean)],q.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],q.prototype,"iconName",void 0),n([I({type:String}),a("design:type",String)],q.prototype,"type",void 0),q=n([l("randstad-button")],q);let D=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([j({type:String}),a("design:type",String)],D.prototype,"variant",void 0),n([j({type:String}),a("design:type",String)],D.prototype,"size",void 0),n([j({type:String}),a("design:type",Object)],D.prototype,"label",void 0),n([j({type:Boolean}),a("design:type",Object)],D.prototype,"loader",void 0),n([j({type:String,attribute:"icon-src"}),a("design:type",String)],D.prototype,"iconSrc",void 0),n([j({type:String}),a("design:type",String)],D.prototype,"iconPosition",void 0),n([j({type:Boolean,reflect:!0}),a("design:type",Boolean)],D.prototype,"disabled",void 0),n([j({type:String}),a("design:type",Object)],D.prototype,"iconName",void 0),n([j({type:String}),a("design:type",String)],D.prototype,"type",void 0),D=n([l("randstad-button")],D);let q=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`
     :host {
       display: block;
       max-width: 100%;
@@ -345,7 +380,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       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`
+  `}toggleCheck(t){this.checked=t.target.checked,this.dispatchEvent(new Event("change",{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"
@@ -361,7 +396,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
           ${this.renderClause(this.clause2Text,this.clause2Url)}.
         </span>
       </label>
-    `}};n([I({type:String}),a("design:type",Object)],D.prototype,"prefix",void 0),n([I({type:String}),a("design:type",Object)],D.prototype,"clause1Text",void 0),n([I({type:String}),a("design:type",String)],D.prototype,"clause1Url",void 0),n([I({type:String}),a("design:type",Object)],D.prototype,"connector",void 0),n([I({type:String}),a("design:type",Object)],D.prototype,"clause2Text",void 0),n([I({type:String}),a("design:type",String)],D.prototype,"clause2Url",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],D.prototype,"checked",void 0),D=n([l("randstad-checkbox")],D);let G=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}static{this.styles=t`
+    `}};n([j({type:String}),a("design:type",Object)],q.prototype,"prefix",void 0),n([j({type:String}),a("design:type",Object)],q.prototype,"clause1Text",void 0),n([j({type:String}),a("design:type",String)],q.prototype,"clause1Url",void 0),n([j({type:String}),a("design:type",Object)],q.prototype,"connector",void 0),n([j({type:String}),a("design:type",Object)],q.prototype,"clause2Text",void 0),n([j({type:String}),a("design:type",String)],q.prototype,"clause2Url",void 0),n([j({type:Boolean,reflect:!0}),a("design:type",Object)],q.prototype,"checked",void 0),q=n([l("randstad-checkbox")],q);let G=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}static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -395,7 +430,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .form-input {
-      ${B}
+      ${U}
       padding: 16px;
       border: 1px solid var(--secondary-color-10);
       border-radius: 4px;
@@ -430,7 +465,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     input::placeholder {
-      ${B}
+      ${U}
       color: var(--secondary-color-40);
     }
 
@@ -468,7 +503,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     textarea {
-      ${B}
+      ${U}
       resize: none;
     }
 
@@ -582,7 +617,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       visibility: visible;
       opacity: 1;
     }
-  `}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}))}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}
@@ -607,6 +642,8 @@ function _(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"
@@ -615,6 +652,7 @@ function _(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}
                   />
 
@@ -642,7 +680,7 @@ function _(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)],G.prototype,"placeholder",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"labelColor",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"value",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],G.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],G.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Boolean)],G.prototype,"error",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Boolean)],G.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Boolean)],G.prototype,"typing",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"tooltipMessage",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"linkText",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"linkRoute",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],G.prototype,"isPasswordVisible",void 0),n([I({type:Boolean}),a("design:type",Boolean)],G.prototype,"cleanButton",void 0),n([I({type:Number}),a("design:type",Number)],G.prototype,"maxLength",void 0),G=n([l("randstad-form")],G);class H extends e{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=t`
+    `}};n([j({type:String}),a("design:type",String)],G.prototype,"placeholder",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"label",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"labelColor",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"value",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"size",void 0),n([j({type:String}),a("design:type",Object)],G.prototype,"icon",void 0),n([j({type:String}),a("design:type",Object)],G.prototype,"helper",void 0),n([j({type:Boolean}),a("design:type",Boolean)],G.prototype,"error",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"errorMessage",void 0),n([j({type:Boolean}),a("design:type",Boolean)],G.prototype,"disabled",void 0),n([j({type:Boolean}),a("design:type",Boolean)],G.prototype,"typing",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"type",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"tooltipMessage",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"linkText",void 0),n([j({type:String}),a("design:type",String)],G.prototype,"linkRoute",void 0),n([j({type:Boolean,reflect:!0}),a("design:type",Object)],G.prototype,"isPasswordVisible",void 0),n([j({type:Boolean}),a("design:type",Boolean)],G.prototype,"cleanButton",void 0),n([j({type:Number}),a("design:type",Number)],G.prototype,"maxLength",void 0),G=n([l("randstad-form")],G);class K extends e{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=t`
     :host {
       display: inline-flex;
       width: var(--icon-size, 24px);
@@ -656,7 +694,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       height: var(--icon-size, 24px);
       fill: var(--icon-color, currentColor);
     }
-  `}connectedCallback(){super.connectedCallback(),this.style.setProperty("--icon-size",this.size)}updated(t){t.has("size")&&this.style.setProperty("--icon-size",this.size)}async loadIcon(){try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),i=new DOMParser,o=i.parseFromString(e,"image/svg+xml").querySelector("svg");if(!o)throw new Error("No se encontró un elemento SVG válido");o.removeAttribute("fill"),o.setAttribute("width",this.size),o.setAttribute("height",this.size),o.querySelectorAll("[fill]").forEach((t=>t.removeAttribute("fill"))),o.setAttribute("fill","currentColor"),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML=""),this.renderRoot.appendChild(o)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML="<span>⚠️</span>")}}render(){return this.loadIcon(),null}}n([I({type:String}),a("design:type",Object)],H.prototype,"name",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"size",void 0),customElements.define("randstad-icon",H);let Y=class extends e{constructor(){super(...arguments),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1}static{this.styles=t`
+  `}connectedCallback(){super.connectedCallback(),this.style.setProperty("--icon-size",this.size)}updated(t){t.has("size")&&this.style.setProperty("--icon-size",this.size)}async loadIcon(){try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),i=new DOMParser,o=i.parseFromString(e,"image/svg+xml").querySelector("svg");if(!o)throw new Error("No se encontró un elemento SVG válido");o.removeAttribute("fill"),o.setAttribute("width",this.size),o.setAttribute("height",this.size),o.querySelectorAll("[fill]").forEach((t=>t.removeAttribute("fill"))),o.setAttribute("fill","currentColor"),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML=""),this.renderRoot.appendChild(o)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML="<span>⚠️</span>")}}render(){return this.loadIcon(),null}}n([j({type:String}),a("design:type",Object)],K.prototype,"name",void 0),n([j({type:String}),a("design:type",Object)],K.prototype,"size",void 0),customElements.define("randstad-icon",K);let H=class extends e{constructor(){super(...arguments),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1}static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -709,7 +747,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
         <randstad-icon class="icon" name="${this.icon}" size="24px" style="color: var(--icon-color);"></randstad-icon>
         <span class="message">${this.message}</span>
       </div>
-    `}};n([I({type:String}),a("design:type",String)],Y.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"icon",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"message",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"open",void 0),Y=n([l("randstad-notice")],Y);let K=class extends e{constructor(){super(...arguments),this.open=!1,this.title="Título del modal",this.scrollable=!1,this.showNotice=!1,this.noticeType="informative",this.noticeMessage="",this.noticeIcon="info",this.showPrimaryButton=!1,this.primaryButtonLabel="Aceptar",this.showSecondaryButton=!1,this.secondaryButtonLabel="Cancelar"}static{this.styles=t`
+    `}};n([j({type:String}),a("design:type",String)],H.prototype,"type",void 0),n([j({type:String}),a("design:type",String)],H.prototype,"icon",void 0),n([j({type:String}),a("design:type",String)],H.prototype,"message",void 0),n([j({type:Boolean}),a("design:type",Boolean)],H.prototype,"open",void 0),H=n([l("randstad-notice")],H);let Y=class extends e{constructor(){super(...arguments),this.open=!1,this.title="Título del modal",this.scrollable=!1,this.showNotice=!1,this.noticeType="informative",this.noticeMessage="",this.noticeIcon="info",this.showPrimaryButton=!1,this.primaryButtonLabel="Aceptar",this.showSecondaryButton=!1,this.secondaryButtonLabel="Cancelar"}static{this.styles=t`
     :host {
       font-family: 'Graphik', sans-serif;
       display: none;
@@ -894,7 +932,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
         </div>
       </div>
     </div>
-  `}};n([I({type:Boolean,reflect:!0}),a("design:type",Object)],K.prototype,"open",void 0),n([I({type:String}),a("design:type",Object)],K.prototype,"title",void 0),n([I({type:String}),a("design:type",String)],K.prototype,"subtitle",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"scrollable",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"showNotice",void 0),n([I({type:String}),a("design:type",String)],K.prototype,"noticeType",void 0),n([I({type:String}),a("design:type",Object)],K.prototype,"noticeMessage",void 0),n([I({type:String}),a("design:type",Object)],K.prototype,"noticeIcon",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"showPrimaryButton",void 0),n([I({type:String}),a("design:type",Object)],K.prototype,"primaryButtonLabel",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"showSecondaryButton",void 0),n([I({type:String}),a("design:type",Object)],K.prototype,"secondaryButtonLabel",void 0),K=n([l("custom-modal")],K);let W=class extends e{constructor(){super(...arguments),this.open=!1,this.type="default",this.icon="warning",this.title="Título del Popup",this.description="Descripción del popup",this.width="400px",this.buttonText="Aceptar",this.confirmText="Sí",this.cancelText="No"}static{this.styles=t`
+  `}};n([j({type:Boolean,reflect:!0}),a("design:type",Object)],Y.prototype,"open",void 0),n([j({type:String}),a("design:type",Object)],Y.prototype,"title",void 0),n([j({type:String}),a("design:type",String)],Y.prototype,"subtitle",void 0),n([j({type:Boolean}),a("design:type",Object)],Y.prototype,"scrollable",void 0),n([j({type:Boolean}),a("design:type",Object)],Y.prototype,"showNotice",void 0),n([j({type:String}),a("design:type",String)],Y.prototype,"noticeType",void 0),n([j({type:String}),a("design:type",Object)],Y.prototype,"noticeMessage",void 0),n([j({type:String}),a("design:type",Object)],Y.prototype,"noticeIcon",void 0),n([j({type:Boolean}),a("design:type",Object)],Y.prototype,"showPrimaryButton",void 0),n([j({type:String}),a("design:type",Object)],Y.prototype,"primaryButtonLabel",void 0),n([j({type:Boolean}),a("design:type",Object)],Y.prototype,"showSecondaryButton",void 0),n([j({type:String}),a("design:type",Object)],Y.prototype,"secondaryButtonLabel",void 0),Y=n([l("custom-modal")],Y);let W=class extends e{constructor(){super(...arguments),this.open=!1,this.type="default",this.icon="warning",this.title="Título del Popup",this.description="Descripción del popup",this.width="400px",this.buttonText="Aceptar",this.confirmText="Sí",this.cancelText="No"}static{this.styles=t`
     :host {
       display: none;
       position: fixed;
@@ -1011,7 +1049,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
               `}
         </div>
       </div>
-    `}};n([I({type:Boolean,reflect:!0}),a("design:type",Object)],W.prototype,"open",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"type",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,"title",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"description",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"width",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"buttonText",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"confirmText",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"cancelText",void 0),W=n([l("custom-popup")],W);
+    `}};n([j({type:Boolean,reflect:!0}),a("design:type",Object)],W.prototype,"open",void 0),n([j({type:String}),a("design:type",Object)],W.prototype,"type",void 0),n([j({type:String}),a("design:type",Object)],W.prototype,"icon",void 0),n([j({type:String}),a("design:type",Object)],W.prototype,"title",void 0),n([j({type:String}),a("design:type",Object)],W.prototype,"description",void 0),n([j({type:String}),a("design:type",Object)],W.prototype,"width",void 0),n([j({type:String}),a("design:type",Object)],W.prototype,"buttonText",void 0),n([j({type:String}),a("design:type",Object)],W.prototype,"confirmText",void 0),n([j({type:String}),a("design:type",Object)],W.prototype,"cancelText",void 0),W=n([l("custom-popup")],W);
 /**
  * @license
  * Copyright 2023 Google LLC
@@ -1022,7 +1060,7 @@ const X=Symbol("attachableController");let J;r||(J=new MutationObserver((t=>{for
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */const Z=["focusin","focusout","pointerdown"];class tt extends e{constructor(){super(...arguments),this.visible=!1,this.inward=!1,this.attachableController=new Q(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}handleEvent(t){if(!t[et]){switch(t.type){default:return;case"focusin":this.visible=this.control?.matches(":focus-visible")??!1;break;case"focusout":case"pointerdown":this.visible=!1}t[et]=!0}}onControlChange(t,e){if(!r)for(const i of Z)t?.removeEventListener(i,this),e?.addEventListener(i,this)}update(t){t.has("visible")&&this.dispatchEvent(new Event("visibility-changed")),super.update(t)}}n([I({type:Boolean,reflect:!0})],tt.prototype,"visible",void 0),n([I({type:Boolean,reflect:!0})],tt.prototype,"inward",void 0);const et=Symbol("handledByFocusRing"),it=t`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
+ */const Z=["focusin","focusout","pointerdown"];class tt extends e{constructor(){super(...arguments),this.visible=!1,this.inward=!1,this.attachableController=new Q(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}handleEvent(t){if(!t[et]){switch(t.type){default:return;case"focusin":this.visible=this.control?.matches(":focus-visible")??!1;break;case"focusout":case"pointerdown":this.visible=!1}t[et]=!0}}onControlChange(t,e){if(!r)for(const i of Z)t?.removeEventListener(i,this),e?.addEventListener(i,this)}update(t){t.has("visible")&&this.dispatchEvent(new Event("visibility-changed")),super.update(t)}}n([j({type:Boolean,reflect:!0})],tt.prototype,"visible",void 0),n([j({type:Boolean,reflect:!0})],tt.prototype,"inward",void 0);const et=Symbol("handledByFocusRing"),it=t`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
 `
 /**
  * @license
@@ -1044,7 +1082,7 @@ const rt="cubic-bezier(0.2, 0, 0, 1)";
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */var st;!function(t){t[t.INACTIVE=0]="INACTIVE",t[t.TOUCH_DELAY=1]="TOUCH_DELAY",t[t.HOLDING=2]="HOLDING",t[t.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"}(st||(st={}));const nt=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],at=r?null:window.matchMedia("(forced-colors: active)");class lt extends e{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=st.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new Q(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const t={hovered:this.hovered,pressed:this.pressed};return i`<div class="surface ${s(t)}"></div>`}update(t){t.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(t)}handlePointerenter(t){this.shouldReactToEvent(t)&&(this.hovered=!0)}handlePointerleave(t){this.shouldReactToEvent(t)&&(this.hovered=!1,this.state!==st.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state!==st.HOLDING)return this.state===st.TOUCH_DELAY?(this.state=st.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=st.WAITING_FOR_CLICK}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t))return this.state=st.WAITING_FOR_CLICK,void this.startPressAnimation(t);this.checkBoundsAfterContextMenu&&!this.inBounds(t)||(this.checkBoundsAfterContextMenu=!1,this.state=st.TOUCH_DELAY,await new Promise((t=>{setTimeout(t,150)})),this.state===st.TOUCH_DELAY&&(this.state=st.HOLDING,this.startPressAnimation(t)))}}handleClick(){this.disabled||(this.state!==st.WAITING_FOR_CLICK?this.state===st.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation()):this.endPressAnimation())}handlePointercancel(t){this.shouldReactToEvent(t)&&this.endPressAnimation()}handleContextmenu(){this.disabled||(this.checkBoundsAfterContextMenu=!0,this.endPressAnimation())}determineRippleSize(){const{height:t,width:e}=this.getBoundingClientRect(),i=Math.max(t,e),o=Math.max(.35*i,75),r=Math.floor(.2*i),s=Math.sqrt(e**2+t**2)+10;this.initialSize=r,this.rippleScale=""+(s+o)/r,this.rippleSize=`${r}px`}getNormalizedPointerEventCoords(t){const{scrollX:e,scrollY:i}=window,{left:o,top:r}=this.getBoundingClientRect(),s=e+o,n=i+r,{pageX:a,pageY:l}=t;return{x:a-s,y:l-n}}getTranslationCoordinates(t){const{height:e,width:i}=this.getBoundingClientRect(),o={x:(i-this.initialSize)/2,y:(e-this.initialSize)/2};let r;return r=t instanceof PointerEvent?this.getNormalizedPointerEventCoords(t):{x:i/2,y:e/2},r={x:r.x-this.initialSize/2,y:r.y-this.initialSize/2},{startPoint:r,endPoint:o}}startPressAnimation(t){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:e,endPoint:i}=this.getTranslationCoordinates(t),o=`${e.x}px, ${e.y}px`,r=`${i.x}px, ${i.y}px`;this.growAnimation=this.mdRoot.animate({top:[0,0],left:[0,0],height:[this.rippleSize,this.rippleSize],width:[this.rippleSize,this.rippleSize],transform:[`translate(${o}) scale(1)`,`translate(${r}) scale(${this.rippleScale})`]},{pseudoElement:"::after",duration:450,easing:rt,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=st.INACTIVE;const t=this.growAnimation;let e=1/0;"number"==typeof t?.currentTime?e=t.currentTime:t?.currentTime&&(e=t.currentTime.to("ms").value),e>=225?this.pressed=!1:(await new Promise((t=>{setTimeout(t,225-e)})),this.growAnimation===t&&(this.pressed=!1))}shouldReactToEvent(t){if(this.disabled||!t.isPrimary)return!1;if(this.rippleStartEvent&&this.rippleStartEvent.pointerId!==t.pointerId)return!1;if("pointerenter"===t.type||"pointerleave"===t.type)return!this.isTouch(t);const e=1===t.buttons;return this.isTouch(t)||e}inBounds({x:t,y:e}){const{top:i,left:o,bottom:r,right:s}=this.getBoundingClientRect();return t>=o&&t<=s&&e>=i&&e<=r}isTouch({pointerType:t}){return"touch"===t}async handleEvent(t){if(!at?.matches)switch(t.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(t);break;case"pointerdown":await this.handlePointerdown(t);break;case"pointerenter":this.handlePointerenter(t);break;case"pointerleave":this.handlePointerleave(t);break;case"pointerup":this.handlePointerup(t)}}onControlChange(t,e){if(!r)for(const i of nt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}}n([I({type:Boolean,reflect:!0})],lt.prototype,"disabled",void 0),n([L()],lt.prototype,"hovered",void 0),n([L()],lt.prototype,"pressed",void 0),n([_(".surface")],lt.prototype,"mdRoot",void 0);
+ */var st;!function(t){t[t.INACTIVE=0]="INACTIVE",t[t.TOUCH_DELAY=1]="TOUCH_DELAY",t[t.HOLDING=2]="HOLDING",t[t.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"}(st||(st={}));const nt=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],at=r?null:window.matchMedia("(forced-colors: active)");class lt extends e{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=st.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new Q(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const t={hovered:this.hovered,pressed:this.pressed};return i`<div class="surface ${s(t)}"></div>`}update(t){t.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(t)}handlePointerenter(t){this.shouldReactToEvent(t)&&(this.hovered=!0)}handlePointerleave(t){this.shouldReactToEvent(t)&&(this.hovered=!1,this.state!==st.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state!==st.HOLDING)return this.state===st.TOUCH_DELAY?(this.state=st.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=st.WAITING_FOR_CLICK}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t))return this.state=st.WAITING_FOR_CLICK,void this.startPressAnimation(t);this.checkBoundsAfterContextMenu&&!this.inBounds(t)||(this.checkBoundsAfterContextMenu=!1,this.state=st.TOUCH_DELAY,await new Promise((t=>{setTimeout(t,150)})),this.state===st.TOUCH_DELAY&&(this.state=st.HOLDING,this.startPressAnimation(t)))}}handleClick(){this.disabled||(this.state!==st.WAITING_FOR_CLICK?this.state===st.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation()):this.endPressAnimation())}handlePointercancel(t){this.shouldReactToEvent(t)&&this.endPressAnimation()}handleContextmenu(){this.disabled||(this.checkBoundsAfterContextMenu=!0,this.endPressAnimation())}determineRippleSize(){const{height:t,width:e}=this.getBoundingClientRect(),i=Math.max(t,e),o=Math.max(.35*i,75),r=Math.floor(.2*i),s=Math.sqrt(e**2+t**2)+10;this.initialSize=r,this.rippleScale=""+(s+o)/r,this.rippleSize=`${r}px`}getNormalizedPointerEventCoords(t){const{scrollX:e,scrollY:i}=window,{left:o,top:r}=this.getBoundingClientRect(),s=e+o,n=i+r,{pageX:a,pageY:l}=t;return{x:a-s,y:l-n}}getTranslationCoordinates(t){const{height:e,width:i}=this.getBoundingClientRect(),o={x:(i-this.initialSize)/2,y:(e-this.initialSize)/2};let r;return r=t instanceof PointerEvent?this.getNormalizedPointerEventCoords(t):{x:i/2,y:e/2},r={x:r.x-this.initialSize/2,y:r.y-this.initialSize/2},{startPoint:r,endPoint:o}}startPressAnimation(t){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:e,endPoint:i}=this.getTranslationCoordinates(t),o=`${e.x}px, ${e.y}px`,r=`${i.x}px, ${i.y}px`;this.growAnimation=this.mdRoot.animate({top:[0,0],left:[0,0],height:[this.rippleSize,this.rippleSize],width:[this.rippleSize,this.rippleSize],transform:[`translate(${o}) scale(1)`,`translate(${r}) scale(${this.rippleScale})`]},{pseudoElement:"::after",duration:450,easing:rt,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=st.INACTIVE;const t=this.growAnimation;let e=1/0;"number"==typeof t?.currentTime?e=t.currentTime:t?.currentTime&&(e=t.currentTime.to("ms").value),e>=225?this.pressed=!1:(await new Promise((t=>{setTimeout(t,225-e)})),this.growAnimation===t&&(this.pressed=!1))}shouldReactToEvent(t){if(this.disabled||!t.isPrimary)return!1;if(this.rippleStartEvent&&this.rippleStartEvent.pointerId!==t.pointerId)return!1;if("pointerenter"===t.type||"pointerleave"===t.type)return!this.isTouch(t);const e=1===t.buttons;return this.isTouch(t)||e}inBounds({x:t,y:e}){const{top:i,left:o,bottom:r,right:s}=this.getBoundingClientRect();return t>=o&&t<=s&&e>=i&&e<=r}isTouch({pointerType:t}){return"touch"===t}async handleEvent(t){if(!at?.matches)switch(t.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(t);break;case"pointerdown":await this.handlePointerdown(t);break;case"pointerenter":this.handlePointerenter(t);break;case"pointerleave":this.handlePointerleave(t);break;case"pointerup":this.handlePointerup(t)}}onControlChange(t,e){if(!r)for(const i of nt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}}n([j({type:Boolean,reflect:!0})],lt.prototype,"disabled",void 0),n([L()],lt.prototype,"hovered",void 0),n([L()],lt.prototype,"pressed",void 0),n([_(".surface")],lt.prototype,"mdRoot",void 0);
 /**
  * @license
  * Copyright 2024 Google LLC
@@ -1073,7 +1111,7 @@ function pt(t){return t.currentTarget===t.target&&(t.composedPath()[0]===t.targe
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const yt=Symbol("createValidator"),mt=Symbol("getValidityAnchor"),ft=Symbol("privateValidator"),gt=Symbol("privateSyncValidity"),vt=Symbol("privateCustomValidationMessage");
+const yt=Symbol("createValidator"),mt=Symbol("getValidityAnchor"),gt=Symbol("privateValidator"),ft=Symbol("privateSyncValidity"),vt=Symbol("privateCustomValidationMessage");
 /**
  * @license
  * Copyright 2023 Google LLC
@@ -1106,7 +1144,7 @@ class Ot{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{}
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */var At;const zt=Symbol("checked");let jt=0;const It=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[gt](),this[ut].validity}get validationMessage(){return this[gt](),this[ut].validationMessage}get willValidate(){return this[gt](),this[ut].willValidate}checkValidity(){return this[gt](),this[ut].checkValidity()}reportValidity(){return this[gt](),this[ut].reportValidity()}setCustomValidity(t){this[vt]=t,this[gt]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[gt]()}firstUpdated(t){super.firstUpdated(t),this[gt]()}[(e=vt,gt)](){if(r)return;this[ft]||(this[ft]=this[yt]());const{validity:t,validationMessage:e}=this[ft].getValidity(),i=!!this[vt],o=this[vt]||e;this[ut].setValidity({...t,customError:i},o,this[mt]()??void 0)}[yt](){throw new Error("Implement [createValidator]")}[mt](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[ut].form}get labels(){return this[ut].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[ut].setFormValue(this[Ct](),this[Et]())}[Ct](){throw new Error("Implement [getFormValue]")}[Et](){return this[Ct]()}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}((Lt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[xt](){return this[wt]}set[xt](t){this[xt]!==t&&(this[wt]=t,this[St]())}connectedCallback(){super.connectedCallback(),this[St]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[$t])return this.hasAttribute("tabindex")?void(this[kt]=this.tabIndex):(this[kt]=null,void this[St]())}else super.attributeChangedCallback(t,e,i)}[(e=wt,i=kt,o=$t,St)](){const t=this[xt]?0:-1,e=this[kt]??t;this[$t]=!0,this.tabIndex=e,this[$t]=!1}}return n([I({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(e),class extends Lt{get[ut](){return this[bt]||(this[bt]=this.attachInternals()),this[bt]}})));var Lt;class _t extends It{get checked(){return this[zt]}set checked(t){const e=this.checked;e!==t&&(this[zt]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++jt,this[At]=!1,this.required=!1,this.value="on",this.selectionController=new Tt(this),this.addController(this.selectionController),r||(this[ut].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 At;const zt=Symbol("checked");let It=0;const jt=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[ft](),this[ut].validity}get validationMessage(){return this[ft](),this[ut].validationMessage}get willValidate(){return this[ft](),this[ut].willValidate}checkValidity(){return this[ft](),this[ut].checkValidity()}reportValidity(){return this[ft](),this[ut].reportValidity()}setCustomValidity(t){this[vt]=t,this[ft]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[ft]()}firstUpdated(t){super.firstUpdated(t),this[ft]()}[(e=vt,ft)](){if(r)return;this[gt]||(this[gt]=this[yt]());const{validity:t,validationMessage:e}=this[gt].getValidity(),i=!!this[vt],o=this[vt]||e;this[ut].setValidity({...t,customError:i},o,this[mt]()??void 0)}[yt](){throw new Error("Implement [createValidator]")}[mt](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[ut].form}get labels(){return this[ut].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[ut].setFormValue(this[Ct](),this[Et]())}[Ct](){throw new Error("Implement [getFormValue]")}[Et](){return this[Ct]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,n([j({noAccessor:!0})],e.prototype,"name",null),n([j({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((Lt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[xt](){return this[wt]}set[xt](t){this[xt]!==t&&(this[wt]=t,this[St]())}connectedCallback(){super.connectedCallback(),this[St]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[$t])return this.hasAttribute("tabindex")?void(this[kt]=this.tabIndex):(this[kt]=null,void this[St]())}else super.attributeChangedCallback(t,e,i)}[(e=wt,i=kt,o=$t,St)](){const t=this[xt]?0:-1,e=this[kt]??t;this[$t]=!0,this.tabIndex=e,this[$t]=!1}}return n([j({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(e),class extends Lt{get[ut](){return this[bt]||(this[bt]=this.attachInternals()),this[bt]}})));var Lt;class _t extends jt{get checked(){return this[zt]}set checked(t){const e=this.checked;e!==t&&(this[zt]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++It,this[At]=!1,this.required=!1,this.value="on",this.selectionController=new Tt(this),this.addController(this.selectionController),r||(this[ut].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"
@@ -1129,7 +1167,7 @@ class Ot{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{}
 
         <div class="touch-target"></div>
       </div>
-    `}updated(){this[ut].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(pt(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()}[(At=zt,Ct)](){return this.checked?this.value:null}[Et](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[yt](){return new Pt((()=>this.selectionController?this.selectionController.controls:[this]))}[mt](){return this.container}}n([I({type:Boolean})],_t.prototype,"checked",null),n([I({type:Boolean})],_t.prototype,"required",void 0),n([I()],_t.prototype,"value",void 0),n([_(".container")],_t.prototype,"container",void 0);
+    `}updated(){this[ut].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(pt(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()}[(At=zt,Ct)](){return this.checked?this.value:null}[Et](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[yt](){return new Pt((()=>this.selectionController?this.selectionController.controls:[this]))}[mt](){return this.container}}n([j({type:Boolean})],_t.prototype,"checked",null),n([j({type:Boolean})],_t.prototype,"required",void 0),n([j()],_t.prototype,"value",void 0),n([_(".container")],_t.prototype,"container",void 0);
 /**
  * @license
  * Copyright 2024 Google LLC
@@ -1200,7 +1238,7 @@ const Rt=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)],Mt.prototype,"name",void 0),n([I({type:Boolean}),a("design:type",Object)],Mt.prototype,"checked",void 0),n([I({type:Boolean}),a("design:type",Object)],Mt.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Object)],Mt.prototype,"error",void 0),Mt=n([l("custom-radio")],Mt);let Bt=class extends e{static{this.styles=t`
+    `}};n([j({type:String}),a("design:type",Object)],Mt.prototype,"name",void 0),n([j({type:Boolean}),a("design:type",Object)],Mt.prototype,"checked",void 0),n([j({type:Boolean}),a("design:type",Object)],Mt.prototype,"disabled",void 0),n([j({type:Boolean}),a("design:type",Object)],Mt.prototype,"error",void 0),Mt=n([l("custom-radio")],Mt);let Ut=class extends e{static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -1310,7 +1348,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .filter-input {
-      ${B};
+      ${U};
       padding: 16px;
       padding-right: 40px;
       border: none;
@@ -1330,7 +1368,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .filter-input::placeholder {
-      ${B};
+      ${U};
       color: var(--secondary-color-40);
     }
 
@@ -1375,12 +1413,16 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .options-list li {
-      ${B};
+      ${U};
       padding: 8px 16px 8px 16px;
       cursor: pointer;
       color: var(--secondary-color-80);
     }
 
+    .options-list li.highlighted {
+      background-color: var(--primary-color-10);
+    }
+
     .mobile-modal {
       position: fixed;
       bottom: 0;
@@ -1440,7 +1482,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .filter-fake {
-      ${B};
+      ${U};
       padding: 15px;
       padding-right: 40px;
       width: 100%;
@@ -1478,7 +1520,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     .options-list::-webkit-scrollbar-button {
       display: none;
     }
-  `}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.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.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">
@@ -1490,7 +1532,17 @@ const Rt=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`
@@ -1498,6 +1550,7 @@ const Rt=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}"
@@ -1530,12 +1583,14 @@ const Rt=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>
@@ -1543,19 +1598,21 @@ const Rt=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)],Bt.prototype,"options",void 0),n([I({type:String}),a("design:type",Object)],Bt.prototype,"placeholder",void 0),n([I({type:String,attribute:"default-value"}),a("design:type",Object)],Bt.prototype,"defaultValue",void 0),n([I({type:Boolean}),a("design:type",Object)],Bt.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],Bt.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],Bt.prototype,"value",void 0),n([I({type:String}),a("design:type",Object)],Bt.prototype,"labelColor",void 0),n([I({type:Boolean}),a("design:type",Object)],Bt.prototype,"filterable",void 0),n([I({type:Number}),a("design:type",Number)],Bt.prototype,"maxLength",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Boolean)],Bt.prototype,"error",void 0),n([L(),a("design:type",Boolean)],Bt.prototype,"isMobile",void 0),n([L(),a("design:type",Array)],Bt.prototype,"filteredOptions",void 0),n([L(),a("design:type",Object)],Bt.prototype,"filterValue",void 0),n([L(),a("design:type",Object)],Bt.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],Bt.prototype,"mobileFilterValue",void 0),Bt=n([l("filterable-select"),a("design:paramtypes",[])],Bt);let Ut=class extends e{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=t`
+    `}};n([j({type:Array}),a("design:type",Array)],Ut.prototype,"options",void 0),n([j({type:String}),a("design:type",Object)],Ut.prototype,"placeholder",void 0),n([j({type:String,attribute:"default-value"}),a("design:type",Object)],Ut.prototype,"defaultValue",void 0),n([j({type:Boolean}),a("design:type",Object)],Ut.prototype,"disabled",void 0),n([j({type:String}),a("design:type",Object)],Ut.prototype,"label",void 0),n([j({type:String}),a("design:type",String)],Ut.prototype,"value",void 0),n([j({type:String}),a("design:type",Object)],Ut.prototype,"labelColor",void 0),n([j({type:Boolean}),a("design:type",Object)],Ut.prototype,"filterable",void 0),n([j({type:Number}),a("design:type",Number)],Ut.prototype,"maxLength",void 0),n([j({type:Boolean,reflect:!0}),a("design:type",Boolean)],Ut.prototype,"error",void 0),n([L(),a("design:type",Boolean)],Ut.prototype,"isMobile",void 0),n([L(),a("design:type",Array)],Ut.prototype,"filteredOptions",void 0),n([L(),a("design:type",Object)],Ut.prototype,"filterValue",void 0),n([L(),a("design:type",Object)],Ut.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],Ut.prototype,"mobileFilterValue",void 0),n([L(),a("design:type",Object)],Ut.prototype,"highlightedIndex",void 0),Ut=n([l("filterable-select"),a("design:paramtypes",[])],Ut);let Bt=class extends e{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=t`
     .stepper {
       display: flex;
       gap: 20px;
@@ -1655,7 +1712,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </div>
         `))}
       </div>
-    `}};n([I({type:Number}),a("design:type",Object)],Ut.prototype,"totalSteps",void 0),n([I({type:Number}),a("design:type",Object)],Ut.prototype,"currentStep",void 0),Ut=n([l("custom-stepper")],Ut);const Vt=new CSSStyleSheet;Vt.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 Nt extends e{static{this.styles=[Vt,t`
+    `}};n([j({type:Number}),a("design:type",Object)],Bt.prototype,"totalSteps",void 0),n([j({type:Number}),a("design:type",Object)],Bt.prototype,"currentStep",void 0),Bt=n([l("custom-stepper")],Bt);const Vt=new CSSStyleSheet;Vt.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 Nt extends e{static{this.styles=[Vt,t`
       :host {
         display: flex;
         position: fixed;
@@ -1791,7 +1848,7 @@ const Rt=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",Nt);let qt=class extends e{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=78,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`
+    `}}customElements.define("randstad-snackbar",Nt);let Dt=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;
@@ -1804,7 +1861,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .tab {
-      ${U};
+      ${B};
       display: flex;
       gap: 8px;
       flex-direction: row;
@@ -1861,7 +1918,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     .tab-wrapper {
       display: flex;
       justify-content: flex-start;
-      gap: 16px;
+      gap: 0px;
       overflow-x: auto;
       scroll-behavior: smooth;
       scrollbar-width: none; /* Firefox */
@@ -1878,7 +1935,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       font-size: 24px;
       cursor: pointer;
       z-index: 1;
-      width: 78px;
+      width: 56px;
       height: 100%;
       display: flex;
       align-items: center;
@@ -1899,6 +1956,13 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       right: 0;
       background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
     }
+
+    @media (max-width: 940px) {
+      .tab {
+        ${M};
+        padding: 16px;
+      }
+    }
   `}firstUpdated(){this.handleScroll()}updated(t){t.has("selected")&&(this.internalSelected=this.selected)}selectTab(t){this.internalSelected=t,this.dispatchEvent(new CustomEvent("tab-change",{detail:t,bubbles:!0,composed:!0}))}scrollTabsLeft(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(let o=i.length-1;o>=0;o--){const r=i[o].offsetLeft;if(r<e+this.SCROLL_OFFSET-1){const e=r-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}}setTimeout((()=>this.handleScroll()),300)}scrollTabsRight(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(const o of i)if(o.offsetLeft>e+this.SCROLL_OFFSET){const e=o.offsetLeft-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}setTimeout((()=>this.handleScroll()),300)}render(){return i`
       <div class="scroll-container">
         ${this.showPrev?i`
@@ -1923,7 +1987,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </button>
         `:null}
       </div>
-    `}};n([I({type:Array}),a("design:type",Array)],qt.prototype,"tabs",void 0),n([I({type:String}),a("design:type",String)],qt.prototype,"selected",void 0),n([L(),a("design:type",String)],qt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],qt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],qt.prototype,"showNext",void 0),qt=n([l("tabs-bar")],qt);let Dt=class extends e{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=t`
+    `}};n([j({type:Array}),a("design:type",Array)],Dt.prototype,"tabs",void 0),n([j({type:String}),a("design:type",String)],Dt.prototype,"selected",void 0),n([L(),a("design:type",String)],Dt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],Dt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],Dt.prototype,"showNext",void 0),Dt=n([l("tabs-bar")],Dt);let qt=class extends e{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=t`
     :host {
       display: inline-block;
       width: 64px;
@@ -1984,5 +2048,5 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           ${this.value} de ${this.max}
         </text>
       </svg>
-    `}};n([I({type:Number}),a("design:type",Object)],Dt.prototype,"value",void 0),n([I({type:Number}),a("design:type",Object)],Dt.prototype,"max",void 0),Dt=n([l("progress-circle")],Dt);export{D as Checkbox,K as CustomModal,W as CustomPopup,Mt as CustomRadio,Ut as CustomStepper,Bt as FilterableSelect,H as IconComponent,Dt as ProgressCircle,q as RandstadButton,G as RandstadForm,Y as RandstadNotice,qt as TabsBar};
+    `}};n([j({type:Number}),a("design:type",Object)],qt.prototype,"value",void 0),n([j({type:Number}),a("design:type",Object)],qt.prototype,"max",void 0),qt=n([l("progress-circle")],qt);export{q as Checkbox,Y as CustomModal,W as CustomPopup,Mt as CustomRadio,Bt as CustomStepper,Ut as FilterableSelect,K as IconComponent,qt as ProgressCircle,D as RandstadButton,G as RandstadForm,H as RandstadNotice,Dt as TabsBar};
 //# sourceMappingURL=index.js.map