@snack-uikit/chips 0.26.9 → 0.26.10-preview-ef227a87.0

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 (16) hide show
  1. package/dist/cjs/components/ChipAssist/styles.module.css +1 -1
  2. package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css +5 -5
  3. package/dist/cjs/components/ChipChoice/styles.module.css +4 -4
  4. package/dist/cjs/components/ChipToggle/styles.module.css +2 -2
  5. package/dist/cjs/helperComponents/ButtonClearValue/styles.module.css +1 -1
  6. package/dist/esm/components/ChipAssist/styles.module.css +1 -1
  7. package/dist/esm/components/ChipChoice/components/ChipChoiceBase/styles.module.css +5 -5
  8. package/dist/esm/components/ChipChoice/styles.module.css +4 -4
  9. package/dist/esm/components/ChipToggle/styles.module.css +2 -2
  10. package/dist/esm/helperComponents/ButtonClearValue/styles.module.css +1 -1
  11. package/package.json +7 -7
  12. package/src/components/ChipAssist/styles.module.scss +6 -1
  13. package/src/components/ChipChoice/components/ChipChoiceBase/styles.module.scss +13 -2
  14. package/src/components/ChipChoice/styles.module.scss +2 -0
  15. package/src/components/ChipToggle/styles.module.scss +15 -3
  16. package/src/helperComponents/ButtonClearValue/styles.module.scss +19 -7
package/dist/cjs/components/ChipAssist/styles.module.css CHANGED
@@ -119,7 +119,7 @@
119
119
  background-color:var(--sys-neutral-background2-level, #ffffff);
120
120
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
121
121
  }
122
- .assistChip:focus-visible{
122
+ .assistChip:focus, .assistChip:focus-visible{
123
123
  outline-width:var(--border-state-focus-s-border-width, 2px);
124
124
  outline-style:var(--border-state-focus-s-border-style, solid);
125
125
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css CHANGED
@@ -158,17 +158,17 @@
158
158
  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
159
159
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
160
160
  }
161
- .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
161
+ .choiceChip:hover, .choiceChip:active, .choiceChip:focus, .choiceChip:focus-visible{
162
162
  background-color:var(--sys-neutral-background2-level, #ffffff);
163
163
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
164
164
  }
165
- .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
165
+ .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus .label, .choiceChip:focus-visible .label{
166
166
  color:var(--sys-neutral-text-support, #6d707f);
167
167
  }
168
- .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
168
+ .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus .value, .choiceChip:focus-visible .value{
169
169
  color:var(--sys-neutral-text-main, #41424e);
170
170
  }
171
- .choiceChip:focus-visible{
171
+ .choiceChip:focus, .choiceChip:focus-visible{
172
172
  outline-width:var(--border-state-focus-s-border-width, 2px);
173
173
  outline-style:var(--border-state-focus-s-border-style, solid);
174
174
  outline-color:var(--border-state-focus-s-border-color, );
@@ -398,7 +398,7 @@
398
398
  .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
399
399
  color:var(--sys-neutral-text-main, #41424e);
400
400
  }
401
- .choiceChip:focus-visible{
401
+ .choiceChip:focus, .choiceChip:focus-visible{
402
402
  outline-width:var(--border-state-focus-s-border-width, 2px);
403
403
  outline-style:var(--border-state-focus-s-border-style, solid);
404
404
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/ChipChoice/styles.module.css CHANGED
@@ -158,17 +158,17 @@
158
158
  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
159
159
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
160
160
  }
161
- .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
161
+ .choiceChip:hover, .choiceChip:active, .choiceChip:focus, .choiceChip:focus-visible{
162
162
  background-color:var(--sys-neutral-background2-level, #ffffff);
163
163
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
164
164
  }
165
- .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
165
+ .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus .label, .choiceChip:focus-visible .label{
166
166
  color:var(--sys-neutral-text-support, #6d707f);
167
167
  }
168
- .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
168
+ .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus .value, .choiceChip:focus-visible .value{
169
169
  color:var(--sys-neutral-text-main, #41424e);
170
170
  }
171
- .choiceChip:focus-visible{
171
+ .choiceChip:focus, .choiceChip:focus-visible{
172
172
  outline-width:var(--border-state-focus-s-border-width, 2px);
173
173
  outline-style:var(--border-state-focus-s-border-style, solid);
174
174
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/ChipToggle/styles.module.css CHANGED
@@ -33,7 +33,7 @@
33
33
  height:0;
34
34
  opacity:0;
35
35
  }
36
- .toggleChipInput:focus-visible + .toggleChipContent{
36
+ .toggleChipInput:focus + .toggleChipContent, .toggleChipInput:focus-visible + .toggleChipContent{
37
37
  outline-width:var(--border-state-focus-s-border-width, 2px);
38
38
  outline-style:var(--border-state-focus-s-border-style, solid);
39
39
  outline-color:var(--border-state-focus-s-border-color, );
@@ -202,7 +202,7 @@
202
202
  background-color:var(--sys-primary-decor-activated, #c5b2f1);
203
203
  border-color:transparent;
204
204
  }
205
- .toggleChip[data-checked] .toggleChipInput:focus-visible + .toggleChipContent{
205
+ .toggleChip[data-checked] .toggleChipInput:focus + .toggleChipContent, .toggleChip[data-checked] .toggleChipInput:focus-visible + .toggleChipContent{
206
206
  color:var(--sys-primary-text-main, #382a62);
207
207
  background-color:var(--sys-primary-decor-hovered, #decdfb);
208
208
  border-color:transparent;
package/dist/cjs/helperComponents/ButtonClearValue/styles.module.css CHANGED
@@ -30,7 +30,7 @@
30
30
  cursor:pointer;
31
31
  color:var(--sys-neutral-text-support, #6d707f);
32
32
  }
33
- .buttonClearValue:focus-visible{
33
+ .buttonClearValue:focus, .buttonClearValue:focus-visible{
34
34
  outline-width:var(--border-state-focus-s-border-width, 2px);
35
35
  outline-style:var(--border-state-focus-s-border-style, solid);
36
36
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/ChipAssist/styles.module.css CHANGED
@@ -119,7 +119,7 @@
119
119
  background-color:var(--sys-neutral-background2-level, #ffffff);
120
120
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
121
121
  }
122
- .assistChip:focus-visible{
122
+ .assistChip:focus, .assistChip:focus-visible{
123
123
  outline-width:var(--border-state-focus-s-border-width, 2px);
124
124
  outline-style:var(--border-state-focus-s-border-style, solid);
125
125
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/ChipChoice/components/ChipChoiceBase/styles.module.css CHANGED
@@ -158,17 +158,17 @@
158
158
  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
159
159
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
160
160
  }
161
- .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
161
+ .choiceChip:hover, .choiceChip:active, .choiceChip:focus, .choiceChip:focus-visible{
162
162
  background-color:var(--sys-neutral-background2-level, #ffffff);
163
163
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
164
164
  }
165
- .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
165
+ .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus .label, .choiceChip:focus-visible .label{
166
166
  color:var(--sys-neutral-text-support, #6d707f);
167
167
  }
168
- .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
168
+ .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus .value, .choiceChip:focus-visible .value{
169
169
  color:var(--sys-neutral-text-main, #41424e);
170
170
  }
171
- .choiceChip:focus-visible{
171
+ .choiceChip:focus, .choiceChip:focus-visible{
172
172
  outline-width:var(--border-state-focus-s-border-width, 2px);
173
173
  outline-style:var(--border-state-focus-s-border-style, solid);
174
174
  outline-color:var(--border-state-focus-s-border-color, );
@@ -398,7 +398,7 @@
398
398
  .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
399
399
  color:var(--sys-neutral-text-main, #41424e);
400
400
  }
401
- .choiceChip:focus-visible{
401
+ .choiceChip:focus, .choiceChip:focus-visible{
402
402
  outline-width:var(--border-state-focus-s-border-width, 2px);
403
403
  outline-style:var(--border-state-focus-s-border-style, solid);
404
404
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/ChipChoice/styles.module.css CHANGED
@@ -158,17 +158,17 @@
158
158
  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
159
159
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
160
160
  }
161
- .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
161
+ .choiceChip:hover, .choiceChip:active, .choiceChip:focus, .choiceChip:focus-visible{
162
162
  background-color:var(--sys-neutral-background2-level, #ffffff);
163
163
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
164
164
  }
165
- .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
165
+ .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus .label, .choiceChip:focus-visible .label{
166
166
  color:var(--sys-neutral-text-support, #6d707f);
167
167
  }
168
- .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
168
+ .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus .value, .choiceChip:focus-visible .value{
169
169
  color:var(--sys-neutral-text-main, #41424e);
170
170
  }
171
- .choiceChip:focus-visible{
171
+ .choiceChip:focus, .choiceChip:focus-visible{
172
172
  outline-width:var(--border-state-focus-s-border-width, 2px);
173
173
  outline-style:var(--border-state-focus-s-border-style, solid);
174
174
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/ChipToggle/styles.module.css CHANGED
@@ -33,7 +33,7 @@
33
33
  height:0;
34
34
  opacity:0;
35
35
  }
36
- .toggleChipInput:focus-visible + .toggleChipContent{
36
+ .toggleChipInput:focus + .toggleChipContent, .toggleChipInput:focus-visible + .toggleChipContent{
37
37
  outline-width:var(--border-state-focus-s-border-width, 2px);
38
38
  outline-style:var(--border-state-focus-s-border-style, solid);
39
39
  outline-color:var(--border-state-focus-s-border-color, );
@@ -202,7 +202,7 @@
202
202
  background-color:var(--sys-primary-decor-activated, #c5b2f1);
203
203
  border-color:transparent;
204
204
  }
205
- .toggleChip[data-checked] .toggleChipInput:focus-visible + .toggleChipContent{
205
+ .toggleChip[data-checked] .toggleChipInput:focus + .toggleChipContent, .toggleChip[data-checked] .toggleChipInput:focus-visible + .toggleChipContent{
206
206
  color:var(--sys-primary-text-main, #382a62);
207
207
  background-color:var(--sys-primary-decor-hovered, #decdfb);
208
208
  border-color:transparent;
package/dist/esm/helperComponents/ButtonClearValue/styles.module.css CHANGED
@@ -30,7 +30,7 @@
30
30
  cursor:pointer;
31
31
  color:var(--sys-neutral-text-support, #6d707f);
32
32
  }
33
- .buttonClearValue:focus-visible{
33
+ .buttonClearValue:focus, .buttonClearValue:focus-visible{
34
34
  outline-width:var(--border-state-focus-s-border-width, 2px);
35
35
  outline-style:var(--border-state-focus-s-border-style, solid);
36
36
  outline-color:var(--border-state-focus-s-border-color, );
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Chips",
7
- "version": "0.26.9",
7
+ "version": "0.26.10-preview-ef227a87.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,15 +36,15 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.19.9",
40
- "@snack-uikit/calendar": "0.11.35",
39
+ "@snack-uikit/button": "0.19.10-preview-ef227a87.0",
40
+ "@snack-uikit/calendar": "0.11.36-preview-ef227a87.0",
41
41
  "@snack-uikit/divider": "3.2.5",
42
42
  "@snack-uikit/dropdown": "0.4.7",
43
43
  "@snack-uikit/icons": "0.26.2",
44
- "@snack-uikit/list": "0.27.7",
44
+ "@snack-uikit/list": "0.27.8-preview-ef227a87.0",
45
45
  "@snack-uikit/loaders": "0.9.3",
46
- "@snack-uikit/tooltip": "0.17.1",
47
- "@snack-uikit/truncate-string": "0.6.18",
46
+ "@snack-uikit/tooltip": "0.17.2-preview-ef227a87.0",
47
+ "@snack-uikit/truncate-string": "0.6.19-preview-ef227a87.0",
48
48
  "@snack-uikit/utils": "3.8.1",
49
49
  "classnames": "2.5.1",
50
50
  "fuzzy-search": "3.2.1",
@@ -57,5 +57,5 @@
57
57
  "peerDependencies": {
58
58
  "@snack-uikit/locale": "*"
59
59
  },
60
- "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
60
+ "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
61
61
  }
package/src/components/ChipAssist/styles.module.scss CHANGED
@@ -29,6 +29,7 @@ $typography: (
29
29
  border-color: styles-tokens-chips-chipAssist.$sys-neutral-decor-hovered;
30
30
  }
31
31
 
32
+ &:focus,
32
33
  &:focus-visible {
33
34
  @include styles.chip-outline;
34
35
 
@@ -51,7 +52,11 @@ $typography: (
51
52
  }
52
53
 
53
54
  &[data-loading] {
54
- @include styles.chip-loading-state(styles-tokens-chips-chipAssist.$chip-assist, '&[data-variant="label-only"]', label);
55
+ @include styles.chip-loading-state(
56
+ styles-tokens-chips-chipAssist.$chip-assist,
57
+ '&[data-variant="label-only"]',
58
+ label
59
+ );
55
60
 
56
61
  color: styles-tokens-chips-chipAssist.$sys-neutral-text-main;
57
62
  background-color: styles-tokens-chips-chipAssist.$sys-neutral-background;
package/src/components/ChipChoice/components/ChipChoiceBase/styles.module.scss CHANGED
@@ -16,7 +16,11 @@
16
16
 
17
17
  .choiceChip {
18
18
  @include styles.chip-defaults;
19
- @include styles.chip-anatomy-styles(styles-tokens-chips-chipChoice.$chip-choice, styles.$sizes, styles.$labelTypography);
19
+ @include styles.chip-anatomy-styles(
20
+ styles-tokens-chips-chipChoice.$chip-choice,
21
+ styles.$sizes,
22
+ styles.$labelTypography
23
+ );
20
24
 
21
25
  background-color: styles-tokens-chips-chipChoice.$sys-neutral-background1-level;
22
26
  border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-default;
@@ -53,6 +57,7 @@
53
57
  }
54
58
  }
55
59
 
60
+ &:focus,
56
61
  &:focus-visible {
57
62
  @include styles.chip-outline;
58
63
  }
@@ -69,7 +74,13 @@
69
74
  }
70
75
 
71
76
  &[data-loading] {
72
- @include styles.chip-loading-state(styles-tokens-chips-chipChoice.$chip-choice, '&:not([data-label])', value, null, true);
77
+ @include styles.chip-loading-state(
78
+ styles-tokens-chips-chipChoice.$chip-choice,
79
+ '&:not([data-label])',
80
+ value,
81
+ null,
82
+ true
83
+ );
73
84
 
74
85
  background-color: styles-tokens-chips-chipChoice.$sys-neutral-background;
75
86
  border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-activated;
package/src/components/ChipChoice/styles.module.scss CHANGED
@@ -59,6 +59,7 @@ $footerGap: (
59
59
 
60
60
  &:hover,
61
61
  &:active,
62
+ &:focus,
62
63
  &:focus-visible {
63
64
  background-color: styles-tokens-chips-chipChoice.$sys-neutral-background2-level;
64
65
  border-color: styles-tokens-chips-chipChoice.$sys-neutral-decor-hovered;
@@ -72,6 +73,7 @@ $footerGap: (
72
73
  }
73
74
  }
74
75
 
76
+ &:focus,
75
77
  &:focus-visible {
76
78
  @include styles.chip-outline;
77
79
  }
package/src/components/ChipToggle/styles.module.scss CHANGED
@@ -31,6 +31,7 @@ $typography: (
31
31
 
32
32
  opacity: 0;
33
33
 
34
+ &:focus + .toggleChipContent,
34
35
  &:focus-visible + .toggleChipContent {
35
36
  @include styles.chip-outline;
36
37
 
@@ -41,7 +42,12 @@ $typography: (
41
42
  }
42
43
 
43
44
  .toggleChip {
44
- @include styles.chip-anatomy-styles(styles-tokens-chips-chipToggle.$chip-toggle, $sizes, $typography, toggleChipContent);
45
+ @include styles.chip-anatomy-styles(
46
+ styles-tokens-chips-chipToggle.$chip-toggle,
47
+ $sizes,
48
+ $typography,
49
+ toggleChipContent
50
+ );
45
51
 
46
52
  position: relative;
47
53
 
@@ -58,7 +64,7 @@ $typography: (
58
64
  }
59
65
 
60
66
  &:hover {
61
- .toggleChipContent {
67
+ .toggleChipContent {
62
68
  color: styles-tokens-chips-chipToggle.$sys-neutral-text-main;
63
69
  background-color: styles-tokens-chips-chipToggle.$sys-neutral-background2-level;
64
70
  border-color: styles-tokens-chips-chipToggle.$sys-neutral-decor-hovered;
@@ -74,7 +80,12 @@ $typography: (
74
80
  }
75
81
 
76
82
  &[data-loading] {
77
- @include styles.chip-loading-state(styles-tokens-chips-chipToggle.$chip-toggle, '&[data-variant="label-only"]', label, toggleChipContent);
83
+ @include styles.chip-loading-state(
84
+ styles-tokens-chips-chipToggle.$chip-toggle,
85
+ '&[data-variant="label-only"]',
86
+ label,
87
+ toggleChipContent
88
+ );
78
89
 
79
90
  .toggleChipContent {
80
91
  color: styles-tokens-chips-chipToggle.$sys-neutral-text-main;
@@ -124,6 +135,7 @@ $typography: (
124
135
  }
125
136
 
126
137
  .toggleChipInput {
138
+ &:focus + .toggleChipContent,
127
139
  &:focus-visible + .toggleChipContent {
128
140
  color: styles-tokens-chips-chipToggle.$sys-primary-text-main;
129
141
  background-color: styles-tokens-chips-chipToggle.$sys-primary-decor-hovered;
package/src/helperComponents/ButtonClearValue/styles.module.scss CHANGED
@@ -1,10 +1,10 @@
1
- @use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
2
- @use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice";
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-chips-chipChoice';
3
3
 
4
4
  $sizes: 'xxs', 'xs';
5
5
  $icon-sizes: (
6
6
  'xxs': styles-tokens-element.$icon-xs,
7
- 'xs': styles-tokens-element.$icon-s
7
+ 'xs': styles-tokens-element.$icon-s,
8
8
  );
9
9
 
10
10
  .buttonClearValue {
@@ -22,11 +22,22 @@ $icon-sizes: (
22
22
 
23
23
  @each $size in $sizes {
24
24
  &[data-size='#{$size}'] {
25
- @include styles-tokens-element.composite-var(styles-tokens-chips-chipChoice.$chip-choice, 'button-clear-value', $size);
25
+ @include styles-tokens-element.composite-var(
26
+ styles-tokens-chips-chipChoice.$chip-choice,
27
+ 'button-clear-value',
28
+ $size
29
+ );
26
30
 
27
31
  svg {
28
- width: styles-tokens-element.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
29
- height: styles-tokens-element.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
32
+ width: styles-tokens-element.simple-var(
33
+ $icon-sizes,
34
+ $size
35
+ ) !important; /* stylelint-disable-line declaration-no-important */
36
+ /* stylelint-disable-next-line declaration-empty-line-before */
37
+ height: styles-tokens-element.simple-var(
38
+ $icon-sizes,
39
+ $size
40
+ ) !important; /* stylelint-disable-line declaration-no-important */
30
41
  }
31
42
  }
32
43
  }
@@ -36,6 +47,7 @@ $icon-sizes: (
36
47
  color: styles-tokens-element.$sys-neutral-text-support;
37
48
  }
38
49
 
50
+ &:focus,
39
51
  &:focus-visible {
40
52
  @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
41
53
 
@@ -47,4 +59,4 @@ $icon-sizes: (
47
59
  &:active {
48
60
  color: styles-tokens-element.$sys-neutral-text-main;
49
61
  }
50
- }
62
+ }