@randstad-uca/design-system 1.0.10 → 1.0.12

package/dist/index.js

@@ -41,11 +41,6 @@ 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;
@@ -61,93 +56,97 @@ 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-width: 48px;
-      min-height: 62px; /* padding (16px * 2) + line-height (30px) */
+      min-height: 62px;
     }
 
     .button-md {
       font-size: 14px;
       line-height: 25px;
-      min-height: 57px; /* padding (16px * 2) + line-height (25px) */
+      min-height: 57px;
     }
 
+    /* Primary */
     .button-primary {
       background-color: var(--primary-color);
       color: var(--white);
     }
 
-    :host(:hover) .button-primary:not([disabled]) {
+    .button-primary:not([disabled]):hover {
       background-color: var(--primary-button-hover);
     }
 
-    :host(:active) .button-primary:not([disabled]) {
+    .button-primary:not([disabled]):active {
       background-color: var(--primary-button-active);
     }
 
-    :host(:focus-within) .button-primary:not([disabled]) {
-      background-color: var(--primary-button-focus);
+    .button-primary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-button-focus);
+      outline-offset: 2px;
     }
 
     .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);
     }
 
-    :host(:hover) .button-secondary:not([disabled]) {
+    .button-secondary:not([disabled]):hover {
       color: #175197;
-      border: 1px solid #175197;
+      border-color: #175197;
     }
 
-    :host(:active) .button-secondary:not([disabled]) {
+    .button-secondary:not([disabled]):active {
       color: var(--secondary-color-80);
-      border: 1px solid var(--secondary-color-80);
+      border-color: var(--secondary-color-80);
     }
 
-    :host(:focus-within) .button-secondary:not([disabled]) {
-      color: var(--primary-color);
-      border: 1px solid var(--primary-color);
+    .button-secondary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
     }
 
     .button-secondary[disabled] {
       color: var(--secondary-color-60);
-      border: 1px solid var(--secondary-color-60);
+      border-color: var(--secondary-color-60);
+      cursor: not-allowed;
     }
 
+    /* Tertiary */
     .button-tertiary {
       background: none;
       border: none;
       color: var(--primary-color);
     }
 
-    :host(:hover) .button-tertiary:not([disabled]) {
+    .button-tertiary:not([disabled]):hover {
       background: #2175D90D;
     }
 
-    :host(:active) .button-tertiary:not([disabled]) {
+    .button-tertiary:not([disabled]):active {
       background-color: #2175D91A;
     }
 
-    :host(:focus-within) .button-tertiary:not([disabled]) {
-      border: 1px solid var(--primary-color);
+    .button-tertiary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
     }
 
     .button-tertiary[disabled] {
       color: #6F758D;
+      cursor: not-allowed;
     }
 
+    /* Round */
     .button-round {
       width: 48px;
       height: 48px;
@@ -157,16 +156,22 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       padding: 0;
     }
 
-    :host(:hover) .button-round:not([disabled]) {
+    .button-round:not([disabled]):hover {
       background-color: #E8F1FB;
     }
 
-    :host(:active) .button-round:not([disabled]) {
+    .button-round:not([disabled]):active {
       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 {
@@ -174,13 +179,14 @@ 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%; /* Ocupa toda la altura del botón */
+      height: 100%;
     }
 
     .dot {
@@ -221,7 +227,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-round":`button-${this.size} ${this.variant}`} ${this.loader?"loader":""}`.trim(),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-${this.size}`} ${this.variant} ${this.loader?"loader":""}`,e="button-tertiary"===this.variant?"#2175D9":"white";return o`
       <button
         type="button"
         class=${t}
@@ -237,7 +243,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}
+              ${this.label?o`<span>${this.label}</span>`:o`<slot></slot>`}
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
@@ -4215,11 +4221,7 @@ 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}>
-                          <randstad-icon
-                            name=${this.isPasswordVisible?"eye_crossed":"eye"}
-                            size="24px"
-                            color="#2175D9"
-                          ></randstad-icon>
+                          ${this.isPasswordVisible?o`<randstad-icon name='eye_crossed' size="24px" color="#2175D9"></randstad-icon>`:o`<randstad-icon name='eye' size="24px" color="#2175D9"></randstad-icon>`}
                         </button>
                       `:r}
                 `}