@snack-uikit/tag 0.13.0 → 0.13.1-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 (7) hide show
  1. package/dist/cjs/components/TagLink/styles.module.css +9 -9
  2. package/dist/cjs/helperComponents/TagMore/styles.module.css +1 -1
  3. package/dist/esm/components/TagLink/styles.module.css +9 -9
  4. package/dist/esm/helperComponents/TagMore/styles.module.css +1 -1
  5. package/package.json +3 -3
  6. package/src/components/TagLink/styles.module.scss +1 -0
  7. package/src/helperComponents/TagMore/styles.module.scss +6 -5
package/dist/cjs/components/TagLink/styles.module.css CHANGED
@@ -51,7 +51,7 @@
51
51
  text-overflow:ellipsis;
52
52
  white-space:nowrap;
53
53
  }
54
- .tag[data-appearance=neutral]:focus-visible, .tag[data-appearance=neutral]:hover{
54
+ .tag[data-appearance=neutral]:focus, .tag[data-appearance=neutral]:focus-visible, .tag[data-appearance=neutral]:hover{
55
55
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
56
56
  }
57
57
  .tag[data-appearance=neutral]:active{
@@ -66,7 +66,7 @@
66
66
  text-overflow:ellipsis;
67
67
  white-space:nowrap;
68
68
  }
69
- .tag[data-appearance=primary]:focus-visible, .tag[data-appearance=primary]:hover{
69
+ .tag[data-appearance=primary]:focus, .tag[data-appearance=primary]:focus-visible, .tag[data-appearance=primary]:hover{
70
70
  background-color:var(--sys-primary-decor-hovered, #decdfb);
71
71
  }
72
72
  .tag[data-appearance=primary]:active{
@@ -81,7 +81,7 @@
81
81
  text-overflow:ellipsis;
82
82
  white-space:nowrap;
83
83
  }
84
- .tag[data-appearance=red]:focus-visible, .tag[data-appearance=red]:hover{
84
+ .tag[data-appearance=red]:focus, .tag[data-appearance=red]:focus-visible, .tag[data-appearance=red]:hover{
85
85
  background-color:var(--sys-red-decor-hovered, #fac1b3);
86
86
  }
87
87
  .tag[data-appearance=red]:active{
@@ -96,7 +96,7 @@
96
96
  text-overflow:ellipsis;
97
97
  white-space:nowrap;
98
98
  }
99
- .tag[data-appearance=orange]:focus-visible, .tag[data-appearance=orange]:hover{
99
+ .tag[data-appearance=orange]:focus, .tag[data-appearance=orange]:focus-visible, .tag[data-appearance=orange]:hover{
100
100
  background-color:var(--sys-orange-decor-hovered, #f8c699);
101
101
  }
102
102
  .tag[data-appearance=orange]:active{
@@ -111,7 +111,7 @@
111
111
  text-overflow:ellipsis;
112
112
  white-space:nowrap;
113
113
  }
114
- .tag[data-appearance=yellow]:focus-visible, .tag[data-appearance=yellow]:hover{
114
+ .tag[data-appearance=yellow]:focus, .tag[data-appearance=yellow]:focus-visible, .tag[data-appearance=yellow]:hover{
115
115
  background-color:var(--sys-yellow-decor-hovered, #ead49a);
116
116
  }
117
117
  .tag[data-appearance=yellow]:active{
@@ -126,7 +126,7 @@
126
126
  text-overflow:ellipsis;
127
127
  white-space:nowrap;
128
128
  }
129
- .tag[data-appearance=green]:focus-visible, .tag[data-appearance=green]:hover{
129
+ .tag[data-appearance=green]:focus, .tag[data-appearance=green]:focus-visible, .tag[data-appearance=green]:hover{
130
130
  background-color:var(--sys-green-decor-hovered, #c0e1ba);
131
131
  }
132
132
  .tag[data-appearance=green]:active{
@@ -141,7 +141,7 @@
141
141
  text-overflow:ellipsis;
142
142
  white-space:nowrap;
143
143
  }
144
- .tag[data-appearance=blue]:focus-visible, .tag[data-appearance=blue]:hover{
144
+ .tag[data-appearance=blue]:focus, .tag[data-appearance=blue]:focus-visible, .tag[data-appearance=blue]:hover{
145
145
  background-color:var(--sys-blue-decor-hovered, #c5d9f6);
146
146
  }
147
147
  .tag[data-appearance=blue]:active{
@@ -156,7 +156,7 @@
156
156
  text-overflow:ellipsis;
157
157
  white-space:nowrap;
158
158
  }
159
- .tag[data-appearance=violet]:focus-visible, .tag[data-appearance=violet]:hover{
159
+ .tag[data-appearance=violet]:focus, .tag[data-appearance=violet]:focus-visible, .tag[data-appearance=violet]:hover{
160
160
  background-color:var(--sys-violet-decor-hovered, #e1d0f7);
161
161
  }
162
162
  .tag[data-appearance=violet]:active{
@@ -171,7 +171,7 @@
171
171
  text-overflow:ellipsis;
172
172
  white-space:nowrap;
173
173
  }
174
- .tag[data-appearance=pink]:focus-visible, .tag[data-appearance=pink]:hover{
174
+ .tag[data-appearance=pink]:focus, .tag[data-appearance=pink]:focus-visible, .tag[data-appearance=pink]:hover{
175
175
  background-color:var(--sys-pink-decor-hovered, #f5c9d6);
176
176
  }
177
177
  .tag[data-appearance=pink]:active{
package/dist/cjs/helperComponents/TagMore/styles.module.css CHANGED
@@ -21,7 +21,7 @@
21
21
  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
22
22
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
23
23
  }
24
- .button:focus-visible{
24
+ .button:focus, .button:focus-visible{
25
25
  outline-width:var(--border-state-focus-s-border-width, 2px);
26
26
  outline-style:var(--border-state-focus-s-border-style, solid);
27
27
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/TagLink/styles.module.css CHANGED
@@ -51,7 +51,7 @@
51
51
  text-overflow:ellipsis;
52
52
  white-space:nowrap;
53
53
  }
54
- .tag[data-appearance=neutral]:focus-visible, .tag[data-appearance=neutral]:hover{
54
+ .tag[data-appearance=neutral]:focus, .tag[data-appearance=neutral]:focus-visible, .tag[data-appearance=neutral]:hover{
55
55
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
56
56
  }
57
57
  .tag[data-appearance=neutral]:active{
@@ -66,7 +66,7 @@
66
66
  text-overflow:ellipsis;
67
67
  white-space:nowrap;
68
68
  }
69
- .tag[data-appearance=primary]:focus-visible, .tag[data-appearance=primary]:hover{
69
+ .tag[data-appearance=primary]:focus, .tag[data-appearance=primary]:focus-visible, .tag[data-appearance=primary]:hover{
70
70
  background-color:var(--sys-primary-decor-hovered, #decdfb);
71
71
  }
72
72
  .tag[data-appearance=primary]:active{
@@ -81,7 +81,7 @@
81
81
  text-overflow:ellipsis;
82
82
  white-space:nowrap;
83
83
  }
84
- .tag[data-appearance=red]:focus-visible, .tag[data-appearance=red]:hover{
84
+ .tag[data-appearance=red]:focus, .tag[data-appearance=red]:focus-visible, .tag[data-appearance=red]:hover{
85
85
  background-color:var(--sys-red-decor-hovered, #fac1b3);
86
86
  }
87
87
  .tag[data-appearance=red]:active{
@@ -96,7 +96,7 @@
96
96
  text-overflow:ellipsis;
97
97
  white-space:nowrap;
98
98
  }
99
- .tag[data-appearance=orange]:focus-visible, .tag[data-appearance=orange]:hover{
99
+ .tag[data-appearance=orange]:focus, .tag[data-appearance=orange]:focus-visible, .tag[data-appearance=orange]:hover{
100
100
  background-color:var(--sys-orange-decor-hovered, #f8c699);
101
101
  }
102
102
  .tag[data-appearance=orange]:active{
@@ -111,7 +111,7 @@
111
111
  text-overflow:ellipsis;
112
112
  white-space:nowrap;
113
113
  }
114
- .tag[data-appearance=yellow]:focus-visible, .tag[data-appearance=yellow]:hover{
114
+ .tag[data-appearance=yellow]:focus, .tag[data-appearance=yellow]:focus-visible, .tag[data-appearance=yellow]:hover{
115
115
  background-color:var(--sys-yellow-decor-hovered, #ead49a);
116
116
  }
117
117
  .tag[data-appearance=yellow]:active{
@@ -126,7 +126,7 @@
126
126
  text-overflow:ellipsis;
127
127
  white-space:nowrap;
128
128
  }
129
- .tag[data-appearance=green]:focus-visible, .tag[data-appearance=green]:hover{
129
+ .tag[data-appearance=green]:focus, .tag[data-appearance=green]:focus-visible, .tag[data-appearance=green]:hover{
130
130
  background-color:var(--sys-green-decor-hovered, #c0e1ba);
131
131
  }
132
132
  .tag[data-appearance=green]:active{
@@ -141,7 +141,7 @@
141
141
  text-overflow:ellipsis;
142
142
  white-space:nowrap;
143
143
  }
144
- .tag[data-appearance=blue]:focus-visible, .tag[data-appearance=blue]:hover{
144
+ .tag[data-appearance=blue]:focus, .tag[data-appearance=blue]:focus-visible, .tag[data-appearance=blue]:hover{
145
145
  background-color:var(--sys-blue-decor-hovered, #c5d9f6);
146
146
  }
147
147
  .tag[data-appearance=blue]:active{
@@ -156,7 +156,7 @@
156
156
  text-overflow:ellipsis;
157
157
  white-space:nowrap;
158
158
  }
159
- .tag[data-appearance=violet]:focus-visible, .tag[data-appearance=violet]:hover{
159
+ .tag[data-appearance=violet]:focus, .tag[data-appearance=violet]:focus-visible, .tag[data-appearance=violet]:hover{
160
160
  background-color:var(--sys-violet-decor-hovered, #e1d0f7);
161
161
  }
162
162
  .tag[data-appearance=violet]:active{
@@ -171,7 +171,7 @@
171
171
  text-overflow:ellipsis;
172
172
  white-space:nowrap;
173
173
  }
174
- .tag[data-appearance=pink]:focus-visible, .tag[data-appearance=pink]:hover{
174
+ .tag[data-appearance=pink]:focus, .tag[data-appearance=pink]:focus-visible, .tag[data-appearance=pink]:hover{
175
175
  background-color:var(--sys-pink-decor-hovered, #f5c9d6);
176
176
  }
177
177
  .tag[data-appearance=pink]:active{
package/dist/esm/helperComponents/TagMore/styles.module.css CHANGED
@@ -21,7 +21,7 @@
21
21
  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
22
22
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
23
23
  }
24
- .button:focus-visible{
24
+ .button:focus, .button:focus-visible{
25
25
  outline-width:var(--border-state-focus-s-border-width, 2px);
26
26
  outline-style:var(--border-state-focus-s-border-style, solid);
27
27
  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": "Tag",
7
- "version": "0.13.0",
7
+ "version": "0.13.1-preview-ef227a87.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -39,9 +39,9 @@
39
39
  "@snack-uikit/dropdown": "0.4.7",
40
40
  "@snack-uikit/icons": "0.26.2",
41
41
  "@snack-uikit/scroll": "0.9.5",
42
- "@snack-uikit/tooltip": "0.17.1",
42
+ "@snack-uikit/tooltip": "0.17.2-preview-ef227a87.0",
43
43
  "@snack-uikit/utils": "3.8.1",
44
44
  "classnames": "2.5.1"
45
45
  },
46
- "gitHead": "f429c3e85872bce0e7a9b06054840b6f761a546c"
46
+ "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
47
47
  }
package/src/components/TagLink/styles.module.scss CHANGED
@@ -112,6 +112,7 @@ $appearances: (
112
112
  white-space: nowrap;
113
113
  }
114
114
 
115
+ &:focus,
115
116
  &:focus-visible,
116
117
  &:hover {
117
118
  background-color: styles-tokens-tag.simple-var($appearance, 'hovered');
package/src/helperComponents/TagMore/styles.module.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  $sizes: 'xs', 's';
5
5
  $label-typography: (
6
6
  'xs': styles-tokens-tag.$sans-label-s,
7
- 's': styles-tokens-tag.$sans-label-m
7
+ 's': styles-tokens-tag.$sans-label-m,
8
8
  );
9
9
 
10
10
  .button {
@@ -22,6 +22,7 @@ $label-typography: (
22
22
  border-color: styles-tokens-tag.$sys-neutral-decor-disabled;
23
23
  border-style: solid;
24
24
 
25
+ &:focus,
25
26
  &:focus-visible {
26
27
  @include styles-tokens-tag.outline-var(styles-tokens-element.$container-focused-s);
27
28
 
@@ -31,7 +32,7 @@ $label-typography: (
31
32
  @each $size in $sizes {
32
33
  @include styles-tokens-tag.composite-var($label-typography, $size);
33
34
 
34
- &[data-size=#{$size}] {
35
+ &[data-size='#{$size}'] {
35
36
  @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-more, 'container', $size, 'label-only');
36
37
  }
37
38
  }
@@ -39,7 +40,7 @@ $label-typography: (
39
40
 
40
41
  .tagRowDroplistContainer {
41
42
  @each $size in $sizes {
42
- &[data-size=#{$size}] {
43
+ &[data-size='#{$size}'] {
43
44
  @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-list, $size);
44
45
  }
45
46
  }
@@ -50,5 +51,5 @@ $label-typography: (
50
51
  }
51
52
 
52
53
  .triggerClassName {
53
- --offset: #{styles-tokens-tag.$space-drop-list-drop-offset};
54
- }
54
+ --offset: #{styles-tokens-tag.$space-drop-list-drop-offset};
55
+ }