@randstad-uca/design-system 1.0.10 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +39 -33
  2. package/dist/index.js.map +1 -1
  3. package/dist/package.json +1 -1
  4. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -41,11 +41,6 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
41
41
  display: inline-block;
42
42
  }
43
43
 
44
- :host([disabled]) {
45
- pointer-events: none;
46
- cursor: not-allowed;
47
- }
48
-
49
44
  .button {
50
45
  display: flex;
51
46
  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
61
56
  width: 100%;
62
57
  }
63
58
 
64
- .button[disabled] {
65
- cursor: not-allowed;
66
- }
67
-
68
59
  .button-lg {
69
60
  font-size: 18px;
70
61
  line-height: 30px;
71
- min-width: 48px;
72
- min-height: 62px; /* padding (16px * 2) + line-height (30px) */
62
+ min-height: 62px;
73
63
  }
74
64
 
75
65
  .button-md {
76
66
  font-size: 14px;
77
67
  line-height: 25px;
78
- min-height: 57px; /* padding (16px * 2) + line-height (25px) */
68
+ min-height: 57px;
79
69
  }
80
70
 
71
+ /* Primary */
81
72
  .button-primary {
82
73
  background-color: var(--primary-color);
83
74
  color: var(--white);
84
75
  }
85
76
 
86
- :host(:hover) .button-primary:not([disabled]) {
77
+ .button-primary:not([disabled]):hover {
87
78
  background-color: var(--primary-button-hover);
88
79
  }
89
80
 
90
- :host(:active) .button-primary:not([disabled]) {
81
+ .button-primary:not([disabled]):active {
91
82
  background-color: var(--primary-button-active);
92
83
  }
93
84
 
94
- :host(:focus-within) .button-primary:not([disabled]) {
95
- background-color: var(--primary-button-focus);
85
+ .button-primary:not([disabled]):focus-visible {
86
+ outline: 2px solid var(--primary-button-focus);
87
+ outline-offset: 2px;
96
88
  }
97
89
 
98
90
  .button-primary[disabled] {
99
91
  color: var(--secondary-color-60);
100
92
  background-color: var(--secondary-color-20);
93
+ cursor: not-allowed;
101
94
  }
102
95
 
96
+ /* Secondary */
103
97
  .button-secondary {
104
98
  background: none;
105
99
  color: var(--primary-color);
106
100
  border: 1px solid var(--primary-color);
107
101
  }
108
102
 
109
- :host(:hover) .button-secondary:not([disabled]) {
103
+ .button-secondary:not([disabled]):hover {
110
104
  color: #175197;
111
- border: 1px solid #175197;
105
+ border-color: #175197;
112
106
  }
113
107
 
114
- :host(:active) .button-secondary:not([disabled]) {
108
+ .button-secondary:not([disabled]):active {
115
109
  color: var(--secondary-color-80);
116
- border: 1px solid var(--secondary-color-80);
110
+ border-color: var(--secondary-color-80);
117
111
  }
118
112
 
119
- :host(:focus-within) .button-secondary:not([disabled]) {
120
- color: var(--primary-color);
121
- border: 1px solid var(--primary-color);
113
+ .button-secondary:not([disabled]):focus-visible {
114
+ outline: 2px solid var(--primary-color);
115
+ outline-offset: 2px;
122
116
  }
123
117
 
124
118
  .button-secondary[disabled] {
125
119
  color: var(--secondary-color-60);
126
- border: 1px solid var(--secondary-color-60);
120
+ border-color: var(--secondary-color-60);
121
+ cursor: not-allowed;
127
122
  }
128
123
 
124
+ /* Tertiary */
129
125
  .button-tertiary {
130
126
  background: none;
131
127
  border: none;
132
128
  color: var(--primary-color);
133
129
  }
134
130
 
135
- :host(:hover) .button-tertiary:not([disabled]) {
131
+ .button-tertiary:not([disabled]):hover {
136
132
  background: #2175D90D;
137
133
  }
138
134
 
139
- :host(:active) .button-tertiary:not([disabled]) {
135
+ .button-tertiary:not([disabled]):active {
140
136
  background-color: #2175D91A;
141
137
  }
142
138
 
143
- :host(:focus-within) .button-tertiary:not([disabled]) {
144
- border: 1px solid var(--primary-color);
139
+ .button-tertiary:not([disabled]):focus-visible {
140
+ outline: 2px solid var(--primary-color);
141
+ outline-offset: 2px;
145
142
  }
146
143
 
147
144
  .button-tertiary[disabled] {
148
145
  color: #6F758D;
146
+ cursor: not-allowed;
149
147
  }
150
148
 
149
+ /* Round */
151
150
  .button-round {
152
151
  width: 48px;
153
152
  height: 48px;
@@ -157,16 +156,22 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
157
156
  padding: 0;
158
157
  }
159
158
 
160
- :host(:hover) .button-round:not([disabled]) {
159
+ .button-round:not([disabled]):hover {
161
160
  background-color: #E8F1FB;
162
161
  }
163
162
 
164
- :host(:active) .button-round:not([disabled]) {
163
+ .button-round:not([disabled]):active {
165
164
  background-color: #A6C8F0;
166
165
  }
167
166
 
167
+ .button-round:not([disabled]):focus-visible {
168
+ outline: 2px solid var(--primary-color);
169
+ outline-offset: 2px;
170
+ }
171
+
168
172
  .button-round[disabled] {
169
173
  background-color: var(--secondary-color-20);
174
+ cursor: not-allowed;
170
175
  }
171
176
 
172
177
  .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
174
179
  height: 24px;
175
180
  }
176
181
 
182
+ /* Loader */
177
183
  .loader {
178
184
  display: flex;
179
185
  gap: 8px;
180
186
  justify-content: center;
181
187
  align-items: center;
182
188
  width: 100%;
183
- height: 100%; /* Ocupa toda la altura del botón */
189
+ height: 100%;
184
190
  }
185
191
 
186
192
  .dot {
@@ -221,7 +227,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
221
227
  border: none;
222
228
  color: var(--white);
223
229
  }
224
- `}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`
230
+ `}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`
225
231
  <button
226
232
  type="button"
227
233
  class=${t}
@@ -237,7 +243,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
237
243
  `:o`
238
244
  ${this.iconSrc&&"button-round"===this.variant?o`<img src=${this.iconSrc} alt="icon" class="button-icon" />`:""}
239
245
  ${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
240
- ${this.label}
246
+ ${this.label?o`<span>${this.label}</span>`:o`<slot></slot>`}
241
247
  ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
242
248
  `}
243
249
  </button>