@vector-crystal-web/atoms 1.26.0 → 1.26.1

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 (12) hide show
  1. package/CHANGELOG.md +4 -1
  2. package/button/index.d.ts +1 -1
  3. package/button/src/button.scss +29 -10
  4. package/chip/src/chip.scss +30 -20
  5. package/divider/index.d.ts +2 -2
  6. package/fesm2022/vector-crystal-web-atoms-button.mjs +2 -2
  7. package/fesm2022/vector-crystal-web-atoms-chip.mjs +3 -3
  8. package/fesm2022/vector-crystal-web-atoms-hint.mjs +4 -4
  9. package/fesm2022/vector-crystal-web-atoms-label.mjs +1 -1
  10. package/fesm2022/vector-crystal-web-atoms-toast.mjs +4 -4
  11. package/label/index.d.ts +1 -1
  12. package/package.json +32 -32
package/CHANGELOG.md CHANGED
@@ -1,4 +1,4 @@
1
- # RELEASES - [VECTOR-CRYSTAL-WEB/ATOMS] - VERSION: [1.26.0] - LAST-UPDATE: [2026/03/07]
1
+ # RELEASES - [VECTOR-CRYSTAL-WEB/ATOMS] - VERSION: [1.26.1] - LAST-UPDATE: [2026/03/09]
2
2
 
3
3
  ---
4
4
 
@@ -94,6 +94,7 @@
94
94
 
95
95
  ### ♻️ Refactor
96
96
 
97
+ - 2026/03/08 (Diogo Ribeiro): **crystal-web/atoms:** css formatting adjustments and bold icons on button, chip, hint, label and toast
97
98
  - 2026/03/06 (Diogo Ribeiro): **atoms/text-field:** improved customization for text and password and in the story
98
99
  - 2026/03/06 (Diogo Ribeiro): **atoms/label:** adjustments to the label component and improvements to the story
99
100
  - 2026/03/06 (Diogo Ribeiro): **crystal-web/atoms:** path resolution in entry points adjustments
@@ -134,6 +135,8 @@
134
135
 
135
136
  ### 🔧 Chore
136
137
 
138
+ - 2026/03/08 (Diogo Ribeiro): **crystal-web/tokens:** update package version, dependencies and logs
139
+ - 2026/03/06 (Diogo Ribeiro): **atoms/label-text-field:** update package version, dependencies and logs
137
140
  - 2026/03/03 (Diogo Ribeiro): **shared/bundle:** update package version, dependencies and logs
138
141
  - 2026/03/03 (Diogo Ribeiro): **atoms/bundle:** update package version, dependencies and logs
139
142
  - 2026/03/03 (Diogo Ribeiro): **tokens/bundle:** update package version, dependencies and logs
package/button/index.d.ts CHANGED
@@ -22,7 +22,7 @@ declare class CrystalButton {
22
22
  readonly rounded: _angular_core.InputSignal<boolean>;
23
23
  readonly text: _angular_core.InputSignal<boolean>;
24
24
  readonly icon: _angular_core.InputSignal<string>;
25
- readonly iconPos: _angular_core.InputSignal<"right" | "left">;
25
+ readonly iconPos: _angular_core.InputSignal<"left" | "right">;
26
26
  readonly disabled: _angular_core.InputSignal<boolean>;
27
27
  readonly shadow: _angular_core.InputSignal<shadowType>;
28
28
  readonly cwClick: _angular_core.OutputEmitterRef<Event>;
package/button/src/button.scss CHANGED
@@ -2,15 +2,21 @@
2
2
 
3
3
  :host ::ng-deep {
4
4
  .p-button {
5
- padding: tokens.$padding-padding-5 tokens.$padding-padding-8;
6
- min-height: 36px;
5
+ padding: tokens.$padding-padding-3 tokens.$padding-padding-6 !important;
6
+ min-height: 32px;
7
+ min-width: 110px;
8
+ gap: tokens.$spacing-spacing-3;
7
9
  font-family: tokens.$primitive-font-family-body;
8
10
  font-size: tokens.$primitive-font-size-default;
9
11
  font-weight: var(--primitive-font-weight-6);
10
12
  border-radius: tokens.$radius-radius-2;
11
13
 
14
+ span.p-button-label {
15
+ font-weight: var(--primitive-font-weight-6);
16
+ }
17
+
12
18
  .p-button-icon {
13
- font-size: var(--primitive-font-size-body-6);
19
+ font-size: var(--primitive-dimension-7);
14
20
  }
15
21
  .p-button-icon-left {
16
22
  margin-left: 0;
@@ -29,7 +35,9 @@
29
35
  padding: 0 !important;
30
36
  align-items: center;
31
37
  justify-content: center;
32
- .p-button-icon {
38
+ min-width: auto;
39
+
40
+ &.p-button-icon-only {
33
41
  font-size: var(--primitive-font-size-body-5);
34
42
  }
35
43
  }
@@ -220,8 +228,12 @@
220
228
  // size
221
229
  .cw-button--x-small {
222
230
  .p-button {
223
- min-height: 32px;
231
+ height: 32px;
224
232
  padding: tokens.$padding-padding-5 tokens.$padding-padding-8;
233
+
234
+ .p-button-icon {
235
+ font-size: var(--primitive-dimension-6);
236
+ }
225
237
  }
226
238
  &.cw-button--only-icon {
227
239
  .p-button {
@@ -229,29 +241,35 @@
229
241
  height: 32px;
230
242
  width: 32px;
231
243
  .p-button-icon {
232
- font-size: var(--primitive-font-size-body-3);
244
+ font-size: var(--primitive-dimension-6);
233
245
  }
234
246
  }
235
247
  }
236
248
  }
249
+
237
250
  .cw-button--small {
238
251
  .p-button {
239
- min-height: 36px;
252
+ height: 36px;
240
253
  padding: tokens.$padding-padding-5 tokens.$padding-padding-8;
254
+
255
+ .p-button-icon {
256
+ font-size: var(--primitive-dimension-6);
257
+ }
241
258
  }
242
259
  &.cw-button--only-icon {
243
260
  .p-button {
244
261
  height: 36px;
245
262
  width: 36px;
246
263
  .p-button-icon {
247
- font-size: var(--primitive-font-size-body-5);
264
+ font-size: var(--primitive-dimension-6);
248
265
  }
249
266
  }
250
267
  }
251
268
  }
269
+
252
270
  .cw-button--medium {
253
271
  .p-button {
254
- min-height: 42px;
272
+ height: 42px;
255
273
  padding: tokens.$padding-padding-6 tokens.$padding-padding-8;
256
274
  }
257
275
  &.cw-button--only-icon {
@@ -265,9 +283,10 @@
265
283
  }
266
284
  }
267
285
  }
286
+
268
287
  .cw-button--large {
269
288
  .p-button {
270
- min-height: 48px;
289
+ height: 48px;
271
290
  padding: tokens.$padding-padding-5 tokens.$padding-padding-8;
272
291
  }
273
292
  &.cw-button--only-icon {
package/chip/src/chip.scss CHANGED
@@ -1,28 +1,46 @@
1
1
  @use '@vector-crystal-web/tokens/variables' as tokens;
2
2
 
3
3
  :host ::ng-deep {
4
+ .cw-chip-wrapper {
5
+ display: inline-flex;
6
+ outline: none;
7
+ &:focus .p-chip,
8
+ &:focus-visible .p-chip,
9
+ &:focus-within .p-chip {
10
+ border: 1px solid #{tokens.$color-stroke-brand-default} !important;
11
+ outline: 3px solid tokens.$color-stroke-interactive-brand-focused !important;
12
+ outline-offset: 0;
13
+ }
14
+ }
15
+
4
16
  .p-chip {
5
17
  display: flex;
6
- padding: tokens.$padding-padding-2 tokens.$padding-padding-5;
7
- width: fit-content;
18
+ padding: tokens.$padding-padding-2 tokens.$padding-padding-5 !important;
19
+ gap: tokens.$spacing-spacing-3;
8
20
  min-height: var(--primitive-dimension-7);
9
21
  font-family: tokens.$primitive-font-family-body;
10
- font-size: var(--primitive-font-size-body-1);
22
+ font-size: var(--primitive-font-size-body-2);
11
23
  font-weight: var(--primitive-font-weight-6);
12
- align-items: center;
13
- // justify-content: center;
24
+ align-items: center !important;
14
25
  border-radius: tokens.$radius-full;
15
26
 
16
27
  .p-chip-icon {
17
28
  display: flex;
18
- margin: auto var(--primitive-dimension-1);
19
- min-height: var(--primitive-dimension-6);
20
29
  align-items: center;
30
+ justify-content: center;
31
+ margin: auto var(--primitive-dimension-1);
32
+ width: var(--primitive-dimension-6);
33
+ height: var(--primitive-dimension-6);
34
+ font-size: var(--primitive-dimension-6);
21
35
  font-weight: var(--primitive-font-weight-5);
22
36
  }
23
37
 
24
38
  .p-chip-remove-icon {
25
39
  margin: auto var(--primitive-dimension-2);
40
+ display: block;
41
+ width: var(--primitive-dimension-6);
42
+ height: var(--primitive-dimension-6) !important;
43
+ font-size: var(--primitive-dimension-6);
26
44
  }
27
45
  }
28
46
 
@@ -131,6 +149,7 @@
131
149
  box-shadow: var(--primitive-shadow-large);
132
150
  }
133
151
  }
152
+
134
153
  .cw-chip--warning {
135
154
  background: tokens.$color-fill-feedback-warning;
136
155
  color: tokens.$color-text-feedback-warning;
@@ -261,25 +280,16 @@
261
280
 
262
281
  // size
263
282
  .cw-chip--small {
264
- height: var(--primitive-dimension-7);
265
- min-height: var(--primitive-dimension-7);
266
- padding: tokens.$padding-padding-1 tokens.$padding-padding-3;
267
- gap: tokens.$padding-padding-7;
283
+ height: var(--primitive-dimension-8);
268
284
  }
269
285
  .cw-chip--medium {
270
- height: var(--primitive-dimension-8);
271
- min-height: var(--primitive-dimension-8);
272
- gap: tokens.$padding-padding-1;
286
+ height: var(--primitive-dimension-9);
273
287
  }
274
288
  .cw-chip--large {
275
- height: var(--primitive-dimension-9);
276
- min-height: var(--primitive-dimension-9);
277
- gap: tokens.$padding-padding-2;
289
+ height: var(--primitive-dimension-10);
278
290
  }
279
291
  .cw-chip--x-large {
280
- height: var(--primitive-dimension-10);
281
- min-height: var(--primitive-dimension-10);
282
- gap: tokens.$padding-padding-2;
292
+ height: var(--primitive-dimension-11);
283
293
  }
284
294
 
285
295
  // disabled
package/divider/index.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
 
3
3
  declare class CrystalDivider {
4
- typeLine: _angular_core.InputSignal<"solid" | "dashed" | "dotted">;
5
- layout: _angular_core.InputSignal<"vertical" | "horizontal">;
4
+ typeLine: _angular_core.InputSignal<"solid" | "dotted" | "dashed">;
5
+ layout: _angular_core.InputSignal<"horizontal" | "vertical">;
6
6
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<CrystalDivider, never>;
7
7
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<CrystalDivider, "cw-divider", never, { "typeLine": { "alias": "typeLine"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
8
8
  }