@randstad-uca/design-system 1.0.8 → 1.0.10

package/dist/components/Icon.d.ts

@@ -3,9 +3,10 @@ export declare class IconComponent extends LitElement {
     name: string;
     size: string;
     color: string;
-    key: string;
     static styles: import("lit").CSSResult;
+    constructor();
+    connectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;
     loadIcon(): Promise<void>;
-    render(): symbol;
+    render(): null;
 }

package/dist/components/Select.d.ts

@@ -5,6 +5,7 @@ export declare class FilterableSelect extends LitElement {
     defaultValue: string;
     disabled: boolean;
     label: string;
+    value: string;
     labelColor: string;
     filterable: boolean;
     filteredOptions: never[];
@@ -13,7 +14,7 @@ export declare class FilterableSelect extends LitElement {
     private debounceTimeout;
     static styles: import("lit").CSSResult;
     constructor();
-    willUpdate(changedProperties: any): void;
+    willUpdate(changedProperties: Map<string, any>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleInputClick(e: any): void;

package/dist/index.js

@@ -41,6 +41,11 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       display: inline-block;
     }
 
+    :host([disabled]) {
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
     .button {
       display: flex;
       align-items: center;
@@ -56,97 +61,93 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       width: 100%;
     }
 
+    .button[disabled] {
+      cursor: not-allowed;
+    }
+
     .button-lg {
       font-size: 18px;
       line-height: 30px;
-      min-height: 62px;
+      min-width: 48px;
+      min-height: 62px; /* padding (16px * 2) + line-height (30px) */
     }
 
     .button-md {
       font-size: 14px;
       line-height: 25px;
-      min-height: 57px;
+      min-height: 57px; /* padding (16px * 2) + line-height (25px) */
     }
 
-    /* Primary */
     .button-primary {
       background-color: var(--primary-color);
       color: var(--white);
     }
 
-    .button-primary:not([disabled]):hover {
+    :host(:hover) .button-primary:not([disabled]) {
       background-color: var(--primary-button-hover);
     }
 
-    .button-primary:not([disabled]):active {
+    :host(:active) .button-primary:not([disabled]) {
       background-color: var(--primary-button-active);
     }
 
-    .button-primary:not([disabled]):focus-visible {
-      outline: 2px solid var(--primary-button-focus);
-      outline-offset: 2px;
+    :host(:focus-within) .button-primary:not([disabled]) {
+      background-color: var(--primary-button-focus);
     }
 
     .button-primary[disabled] {
       color: var(--secondary-color-60);
       background-color: var(--secondary-color-20);
-      cursor: not-allowed;
     }
 
-    /* Secondary */
     .button-secondary {
       background: none;
       color: var(--primary-color);
       border: 1px solid var(--primary-color);
     }
 
-    .button-secondary:not([disabled]):hover {
+    :host(:hover) .button-secondary:not([disabled]) {
       color: #175197;
-      border-color: #175197;
+      border: 1px solid #175197;
     }
 
-    .button-secondary:not([disabled]):active {
+    :host(:active) .button-secondary:not([disabled]) {
       color: var(--secondary-color-80);
-      border-color: var(--secondary-color-80);
+      border: 1px solid var(--secondary-color-80);
     }
 
-    .button-secondary:not([disabled]):focus-visible {
-      outline: 2px solid var(--primary-color);
-      outline-offset: 2px;
+    :host(:focus-within) .button-secondary:not([disabled]) {
+      color: var(--primary-color);
+      border: 1px solid var(--primary-color);
     }
 
     .button-secondary[disabled] {
       color: var(--secondary-color-60);
-      border-color: var(--secondary-color-60);
-      cursor: not-allowed;
+      border: 1px solid var(--secondary-color-60);
     }
 
-    /* Tertiary */
     .button-tertiary {
       background: none;
       border: none;
       color: var(--primary-color);
     }
 
-    .button-tertiary:not([disabled]):hover {
+    :host(:hover) .button-tertiary:not([disabled]) {
       background: #2175D90D;
     }
 
-    .button-tertiary:not([disabled]):active {
+    :host(:active) .button-tertiary:not([disabled]) {
       background-color: #2175D91A;
     }
 
-    .button-tertiary:not([disabled]):focus-visible {
-      outline: 2px solid var(--primary-color);
-      outline-offset: 2px;
+    :host(:focus-within) .button-tertiary:not([disabled]) {
+      border: 1px solid var(--primary-color);
     }
 
     .button-tertiary[disabled] {
       color: #6F758D;
-      cursor: not-allowed;
     }
 
-    /* Round */
     .button-round {
       width: 48px;
       height: 48px;
@@ -156,22 +157,16 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       padding: 0;
     }
 
-    .button-round:not([disabled]):hover {
+    :host(:hover) .button-round:not([disabled]) {
       background-color: #E8F1FB;
     }
 
-    .button-round:not([disabled]):active {
+    :host(:active) .button-round:not([disabled]) {
       background-color: #A6C8F0;
     }
 
-    .button-round:not([disabled]):focus-visible {
-      outline: 2px solid var(--primary-color);
-      outline-offset: 2px;
-    }
-
     .button-round[disabled] {
       background-color: var(--secondary-color-20);
-      cursor: not-allowed;
     }
 
     .button-round img.button-icon {
@@ -179,14 +174,13 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       height: 24px;
     }
 
-    /* Loader */
     .loader {
       display: flex;
       gap: 8px;
       justify-content: center;
       align-items: center;
       width: 100%;
-      height: 100%;
+      height: 100%; /* Ocupa toda la altura del botón */
     }
 
     .dot {
@@ -227,7 +221,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       border: none;
       color: var(--white);
     }
-  `}handleClick(t){this.disabled||this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0}))}render(){const t=`button ${"button-round"===this.variant?"":`button-${this.size}`} ${this.variant} ${this.loader?"loader":""}`,e="button-tertiary"===this.variant?"#2175D9":"white";return o`
+  `}handleClick(t){this.disabled||this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0}))}render(){const t=`button ${"button-round"===this.variant?"button-round":`button-${this.size} ${this.variant}`} ${this.loader?"loader":""}`.trim(),e="button-tertiary"===this.variant?"#2175D9":"white";return o`
       <button
         type="button"
         class=${t}
@@ -243,7 +237,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
             `:o`
               ${this.iconSrc&&"button-round"===this.variant?o`<img src=${this.iconSrc} alt="icon" class="button-icon" />`:""}
               ${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
-              ${this.label?o`<span>${this.label}</span>`:o`<slot></slot>`}
+              ${this.label}
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
@@ -314,7 +308,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
           ${this.prefix}&nbsp;
           ${this.renderClause(this.clause1Text,this.clause1Url)},&nbsp;
           ${this.connector}&nbsp;
-          ${this.renderClause(this.clause2Text,this.clause2Url)}
+          ${this.renderClause(this.clause2Text,this.clause2Url)}.
         </span>
       </label>
     `}};n([I({type:String}),a("design:type",Object)],M.prototype,"prefix",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"clause1Text",void 0),n([I({type:String}),a("design:type",String)],M.prototype,"clause1Url",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"connector",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"clause2Text",void 0),n([I({type:String}),a("design:type",String)],M.prototype,"clause2Url",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],M.prototype,"checked",void 0),M=n([l("randstad-checkbox")],M);
@@ -4047,7 +4041,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       outline: none;
       transition: border-color 0.3s ease, box-shadow 0.3s ease;
       width: 100%;
-      color: #0F1941 !important;
+      color: #0F1941;
     }
 
     .form.error .form-input {
@@ -4167,7 +4161,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
     }
 
     .link-text:hover {
-      text-decoration: underline;
+      color: #0f3b65;
     }
 
     .tooltip-wrapper randstad-icon {
@@ -4182,13 +4176,6 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
     .toggle-password randstad-icon svg {
       fill: #2175D9 !important;
     }
-
-    input:-webkit-autofill,
-    textarea:-webkit-autofill {
-      box-shadow: 0 0 0px 1000px white inset !important;
-      -webkit-text-fill-color: #0F1941 !important;
-      transition: background-color 5000s ease-in-out 0s;
-    }
   `}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;this.value=e.value,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0}))}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}render(){return o`
       <div
         class="form ${this.error?"error":""} ${this.success?"success":""} ${this.disabled?"disabled":""}"
@@ -4228,10 +4215,11 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
                   />
                   ${"password"===this.type?o`
                         <button type="button" class="toggle-password" @click=${this.togglePassword}>
-                          <button type="button" class="toggle-password" @click=${this.togglePassword}>
-                            ${this.isPasswordVisible?o`<randstad-icon name="eye_crossed" size="24px" color="#2175D9" key="visible"></randstad-icon>`:o`<randstad-icon name="eye" size="24px" color="#2175D9" key="hidden"></randstad-icon>`}
-                          </button>
-
+                          <randstad-icon
+                            name=${this.isPasswordVisible?"eye_crossed":"eye"}
+                            size="24px"
+                            color="#2175D9"
+                          ></randstad-icon>
                         </button>
                       `:r}
                 `}
@@ -4245,15 +4233,11 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
                 ${this.errorMessage?this.errorMessage:o`<slot name="error-extended"></slot>`}
               </p>
             `:r}
-        ${this.linkText&&this.linkRoute?o`
-            <div style="text-align: right;">
-              <a class="link-text" href="#" @click=${this.handleLinkClick}>${this.linkText}</a>
-            </div>
-          `:r}
+        ${this.linkText&&this.linkRoute?o`<a class="link-text" href="#" @click=${this.handleLinkClick}>${this.linkText}</a>`:r}
 
         ${this.helper?o`<p class="helper-description">${this.helper}</p>`:r}
       </div>
-    `}};n([I({type:String}),a("design:type",String)],xs.prototype,"placeholder",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"labelColor",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"value",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],xs.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],xs.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"error",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"success",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"typing",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"tooltipMessage",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"linkText",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"linkRoute",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],xs.prototype,"isPasswordVisible",void 0),xs=n([l("randstad-form")],xs);class Cs extends t{constructor(){super(...arguments),this.name="",this.size="24px",this.color="",this.key=""}static{this.styles=e`
+    `}};n([I({type:String}),a("design:type",String)],xs.prototype,"placeholder",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"labelColor",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"value",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],xs.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],xs.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"error",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"success",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Boolean)],xs.prototype,"typing",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"tooltipMessage",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"linkText",void 0),n([I({type:String}),a("design:type",String)],xs.prototype,"linkRoute",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],xs.prototype,"isPasswordVisible",void 0),xs=n([l("randstad-form")],xs);class Cs extends t{static{this.styles=e`
     :host {
       display: inline-flex;
       width: var(--icon-size, 24px);
@@ -4261,13 +4245,12 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       align-items: center;
       justify-content: center;
     }
-
     svg {
-      width: var(--icon-size, 24px);
-      height: var(--icon-size, 24px);
+      width: var(--icon-size, 24px); /* Tamaño fijo basado en size */
+      height: var(--icon-size, 24px); /* Tamaño fijo basado en size */
       fill: var(--icon-color, currentColor);
     }
-  `}updated(t){(t.has("name")||t.has("key"))&&this.loadIcon(),t.has("size")&&this.style.setProperty("--icon-size",this.size),t.has("color")&&this.style.setProperty("--icon-color",this.color)}async loadIcon(){if(this.name)try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),o=new DOMParser,i=o.parseFromString(e,"image/svg+xml").querySelector("svg");if(!i)throw new Error("No se encontró un SVG válido");i.removeAttribute("fill"),i.setAttribute("width",this.size),i.setAttribute("height",this.size),this.renderRoot.innerHTML="",this.renderRoot.appendChild(i)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),this.renderRoot.innerHTML="<span>⚠️</span>"}else this.renderRoot.innerHTML=""}render(){return r}}n([I({type:String}),a("design:type",String)],Cs.prototype,"name",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"size",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"color",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"key",void 0),customElements.define("randstad-icon",Cs);let ks=class extends t{constructor(){super(...arguments),this.open=!1,this.title="Título del modal"}static{this.styles=e`
+  `}constructor(){super(),this.name="",this.size="24px",this.color=""}connectedCallback(){super.connectedCallback(),this.name&&this.loadIcon()}updated(t){t.has("name")&&this.name&&this.loadIcon(),t.has("size")&&this.style.setProperty("--icon-size",this.size),t.has("color")&&this.style.setProperty("--icon-color",this.color)}async loadIcon(){if(this.name)try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),o=new DOMParser,i=o.parseFromString(e,"image/svg+xml").querySelector("svg");if(!i)throw new Error("No se encontró un elemento SVG válido");i.removeAttribute("fill"),i.setAttribute("width",this.size||"24px"),i.setAttribute("height",this.size||"24px"),this.renderRoot.innerHTML="",this.renderRoot.appendChild(i)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),this.renderRoot.innerHTML="<span>⚠️</span>"}else this.renderRoot.innerHTML=""}render(){return null}}n([I({type:String}),a("design:type",String)],Cs.prototype,"name",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"size",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"color",void 0),customElements.define("randstad-icon",Cs);let ks=class extends t{constructor(){super(...arguments),this.open=!1,this.title="Título del modal"}static{this.styles=e`
     :host {
       display: none;
       position: fixed;
@@ -4354,6 +4337,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       line-height: 25px;
       font-weight: 400;
       color: white;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       font-family: 'Graphik', sans-serif;
     }
     .container {
@@ -4865,7 +4849,6 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       background: white;
       cursor: pointer;
       transition: background-color 0.3s ease;
-      color: #0F1941 !important;
     }
 
     .input-container:hover .filter-input {
@@ -4973,7 +4956,7 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     .hidden {
       display: none;
     }
-  `}constructor(){super(),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.labelColor="",this.filterable=!0,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.debounceTimeout=null,this.defaultValue&&this.options.includes(this.defaultValue)&&(this.filterValue=this.defaultValue)}willUpdate(t){t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")&&this.options.includes(this.defaultValue)&&(this.filterValue=this.defaultValue)}connectedCallback(){super.connectedCallback(),this.filteredOptions=[...this.options],document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside.bind(this))}handleInputClick(t){this.disabled||t.target!==this.shadowRoot.querySelector(".filter-input")||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){const e=t.target.value.toLowerCase();this.filterValue=e,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()}handleSelect(t){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.isOpen||this.filterValue?(this.isOpen=!1,this.filterValue="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0}))):this.isOpen=!0,this.requestUpdate())}handleClickOutside(t){this.contains(t.target)||(this.isOpen=!1,this.requestUpdate())}render(){return o`
+  `}constructor(){if(super(),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.value="",this.labelColor="",this.filterable=!0,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.debounceTimeout=null,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.filteredOptions=[...this.options],document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside.bind(this))}handleInputClick(t){this.disabled||t.target!==this.shadowRoot.querySelector(".filter-input")||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){const e=t.target.value.toLowerCase();this.filterValue=e,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()}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){this.contains(t.target)||(this.isOpen=!1,this.requestUpdate())}render(){return o`
       <div class="select-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
         ${this.label?o`
           <div class="label-container">
@@ -4996,7 +4979,8 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
               @click="${this.handleIconClick}"
               ?disabled="${this.disabled}"
             >
-              ${this.isOpen||this.filterValue?o`<randstad-icon name="close" size="24px" color="#2175D9" key="visible"></randstad-icon>`:o`<randstad-icon name="arrow_down" size="24px" color="#2175D9" key="hidden"></randstad-icon>`}
+              ${this.filterable&&this.filterValue?o`<randstad-icon name="close" size="24px" color="#2175D9"></randstad-icon>`:this.isOpen&&this.filteredOptions.length>0?o`<randstad-icon name="arrow_up" size="24px" color="#2175D9"></randstad-icon>`:o`<randstad-icon name="arrow_down" size="24px" color="#2175D9"></randstad-icon>`}
+
             </button>
           </div>
           <ul class="options-list ${this.isOpen&&this.filteredOptions.length>0?"":"hidden"}">
@@ -5008,7 +4992,7 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </ul>
         </div>
       </div>
-    `}};n([I({type:Array}),a("design:type",Array)],ma.prototype,"options",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"placeholder",void 0),n([I({type:String,attribute:"default-value"}),a("design:type",Object)],ma.prototype,"defaultValue",void 0),n([I({type:Boolean}),a("design:type",Object)],ma.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"label",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"labelColor",void 0),n([I({type:Boolean}),a("design:type",Object)],ma.prototype,"filterable",void 0),n([$(),a("design:type",Object)],ma.prototype,"filteredOptions",void 0),n([$(),a("design:type",Object)],ma.prototype,"filterValue",void 0),n([$(),a("design:type",Object)],ma.prototype,"isOpen",void 0),ma=n([l("filterable-select"),a("design:paramtypes",[])],ma);let fa=class extends t{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=e`
+    `}};n([I({type:Array}),a("design:type",Array)],ma.prototype,"options",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"placeholder",void 0),n([I({type:String,attribute:"default-value"}),a("design:type",Object)],ma.prototype,"defaultValue",void 0),n([I({type:Boolean}),a("design:type",Object)],ma.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],ma.prototype,"value",void 0),n([I({type:String}),a("design:type",Object)],ma.prototype,"labelColor",void 0),n([I({type:Boolean}),a("design:type",Object)],ma.prototype,"filterable",void 0),n([$(),a("design:type",Object)],ma.prototype,"filteredOptions",void 0),n([$(),a("design:type",Object)],ma.prototype,"filterValue",void 0),n([$(),a("design:type",Object)],ma.prototype,"isOpen",void 0),ma=n([l("filterable-select"),a("design:paramtypes",[])],ma);let fa=class extends t{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=e`
     .stepper {
       display: flex;
       gap: 20px;
@@ -5165,8 +5149,8 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         align-items: center;
         box-sizing: border-box;
         min-height: 48px;
-        min-width: 380px;
-        max-width: 380px;
+        min-width: 270px;
+        max-width: 480px;
         border-radius: 4px;
         padding: 8px;
         gap: 8px;
@@ -5220,17 +5204,6 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       .informative {
         background-color: var(--ui-informative);
       }
-
-      @media (max-width: 940px) {
-        :host {
-          bottom: 16px !important;
-          left: 50% !important;
-          right: auto !important;
-          top: auto !important;
-          transform: translateX(-50%) !important;
-          justify-content: center !important;
-        }
-      }
     `]}constructor(){super(),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1,this.position="bottom-center"}static get properties(){return{type:{type:String},icon:{type:String},message:{type:String},open:{type:Boolean},position:{type:String,reflect:!0}}}render(){const t="error"===this.type||"warning"===this.type?"alert":"status";return o`
       <div
         class="container ${this.open?"":"hidden"} ${this.type}"