@snack-uikit/list 0.27.7 → 0.27.8-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/Items/BaseItem/styles.module.css +3 -1
  2. package/dist/cjs/components/Items/SearchItem/styles.module.css +1 -1
  3. package/dist/cjs/components/Items/styles.module.css +2 -2
  4. package/dist/cjs/components/Lists/ListPrivate/styles.module.css +1 -1
  5. package/dist/cjs/components/Lists/styles.module.css +4 -4
  6. package/dist/esm/components/Items/BaseItem/styles.module.css +3 -1
  7. package/dist/esm/components/Items/SearchItem/styles.module.css +1 -1
  8. package/dist/esm/components/Items/styles.module.css +2 -2
  9. package/dist/esm/components/Lists/ListPrivate/styles.module.css +1 -1
  10. package/dist/esm/components/Lists/styles.module.css +4 -4
  11. package/package.json +7 -7
  12. package/src/components/Items/BaseItem/styles.module.scss +2 -1
  13. package/src/components/Items/SearchItem/styles.module.scss +1 -0
  14. package/src/components/Items/styles.module.scss +2 -0
  15. package/src/components/Lists/ListPrivate/styles.module.scss +1 -0
  16. package/src/components/Lists/styles.module.scss +3 -1
package/dist/cjs/components/Items/BaseItem/styles.module.css CHANGED
@@ -106,7 +106,9 @@
106
106
  .innerWrapper[data-has-checked] .markerContainer:before, .innerWrapper[data-checked] .markerContainer:before{
107
107
  background-color:var(--sys-primary-accent-default, #794ed3);
108
108
  }
109
- .innerWrapper[data-has-checked] .droplistItem:focus-visible[data-variant=single], .innerWrapper[data-checked] .droplistItem:focus-visible[data-variant=single]{
109
+ .innerWrapper[data-has-checked] .droplistItem:focus-visible[data-variant=single],
110
+ .innerWrapper[data-has-checked] .droplistItem:focus[data-variant=single], .innerWrapper[data-checked] .droplistItem:focus-visible[data-variant=single],
111
+ .innerWrapper[data-checked] .droplistItem:focus[data-variant=single]{
110
112
  outline-color:var(--sys-primary-accent-default, #794ed3);
111
113
  }
112
114
  .innerWrapper[data-has-checked][data-disabled] .markerContainer:before, .innerWrapper[data-checked][data-disabled] .markerContainer:before{
package/dist/cjs/components/Items/SearchItem/styles.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .searchItem{
2
2
  width:100%;
3
3
  }
4
- .searchItem:focus-within, .searchItem:focus-visible{
4
+ .searchItem:focus-within, .searchItem:focus, .searchItem:focus-visible{
5
5
  outline-width:var(--border-state-focus-s-border-width, 2px);
6
6
  outline-style:var(--border-state-focus-s-border-style, solid);
7
7
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/Items/styles.module.css CHANGED
@@ -26,7 +26,7 @@
26
26
  cursor:not-allowed;
27
27
  background-color:transparent;
28
28
  }
29
- .itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
29
+ .itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):focus::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
30
30
  opacity:var(--opacity-a008, 0.08);
31
31
  background-color:var(--sys-neutral-accent-default, #787b8a);
32
32
  }
@@ -79,7 +79,7 @@
79
79
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
80
80
  gap:var(--space-drop-list-item-l-container-gap, 8px);
81
81
  }
82
- .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
82
+ .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus, .listItem:not([data-inactive], [data-disabled]):focus-visible{
83
83
  outline-width:var(--border-state-focus-s-border-width, 2px);
84
84
  outline-style:var(--border-state-focus-s-border-style, solid);
85
85
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/Lists/ListPrivate/styles.module.css CHANGED
@@ -24,7 +24,7 @@
24
24
  min-width:calc(2 * 3 * var(--dimension-5m, 40px));
25
25
  height:calc(3 * var(--dimension-5m, 40px));
26
26
  }
27
- .loader:focus-visible{
27
+ .loader:focus, .loader:focus-visible{
28
28
  outline-width:var(--border-state-focus-s-border-width, 2px);
29
29
  outline-style:var(--border-state-focus-s-border-style, solid);
30
30
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/Lists/styles.module.css CHANGED
@@ -5,18 +5,18 @@
5
5
  margin:0;
6
6
  padding:0;
7
7
  }
8
- .listContainer:focus-visible{
8
+ .listContainer:focus, .listContainer:focus-visible{
9
9
  border:none;
10
10
  outline:none;
11
11
  }
12
- .listContainer:focus-visible[data-active]{
12
+ .listContainer:focus[data-active], .listContainer:focus-visible[data-active]{
13
13
  outline-width:var(--border-state-focus-s-border-width, 2px);
14
14
  outline-style:var(--border-state-focus-s-border-style, solid);
15
15
  outline-color:var(--border-state-focus-s-border-color, );
16
16
  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
17
17
  outline-color:var(--sys-available-complementary, #1c1c24);
18
18
  }
19
- .listContainer:focus-visible[data-active] *{
19
+ .listContainer:focus[data-active] *, .listContainer:focus-visible[data-active] *{
20
20
  cursor:inherit;
21
21
  }
22
22
  .listContainer li,
@@ -31,7 +31,7 @@
31
31
  box-sizing:border-box;
32
32
  height:100%;
33
33
  }
34
- .wrapper:has(.listContainer:focus-visible){
34
+ .wrapper:has(.listContainer:focus-visible), .wrapper:has(.listContainer:focus){
35
35
  outline-width:var(--border-state-focus-s-border-width, 2px);
36
36
  outline-style:var(--border-state-focus-s-border-style, solid);
37
37
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/Items/BaseItem/styles.module.css CHANGED
@@ -106,7 +106,9 @@
106
106
  .innerWrapper[data-has-checked] .markerContainer:before, .innerWrapper[data-checked] .markerContainer:before{
107
107
  background-color:var(--sys-primary-accent-default, #794ed3);
108
108
  }
109
- .innerWrapper[data-has-checked] .droplistItem:focus-visible[data-variant=single], .innerWrapper[data-checked] .droplistItem:focus-visible[data-variant=single]{
109
+ .innerWrapper[data-has-checked] .droplistItem:focus-visible[data-variant=single],
110
+ .innerWrapper[data-has-checked] .droplistItem:focus[data-variant=single], .innerWrapper[data-checked] .droplistItem:focus-visible[data-variant=single],
111
+ .innerWrapper[data-checked] .droplistItem:focus[data-variant=single]{
110
112
  outline-color:var(--sys-primary-accent-default, #794ed3);
111
113
  }
112
114
  .innerWrapper[data-has-checked][data-disabled] .markerContainer:before, .innerWrapper[data-checked][data-disabled] .markerContainer:before{
package/dist/esm/components/Items/SearchItem/styles.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .searchItem{
2
2
  width:100%;
3
3
  }
4
- .searchItem:focus-within, .searchItem:focus-visible{
4
+ .searchItem:focus-within, .searchItem:focus, .searchItem:focus-visible{
5
5
  outline-width:var(--border-state-focus-s-border-width, 2px);
6
6
  outline-style:var(--border-state-focus-s-border-style, solid);
7
7
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/Items/styles.module.css CHANGED
@@ -26,7 +26,7 @@
26
26
  cursor:not-allowed;
27
27
  background-color:transparent;
28
28
  }
29
- .itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
29
+ .itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):focus::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
30
30
  opacity:var(--opacity-a008, 0.08);
31
31
  background-color:var(--sys-neutral-accent-default, #787b8a);
32
32
  }
@@ -79,7 +79,7 @@
79
79
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
80
80
  gap:var(--space-drop-list-item-l-container-gap, 8px);
81
81
  }
82
- .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
82
+ .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus, .listItem:not([data-inactive], [data-disabled]):focus-visible{
83
83
  outline-width:var(--border-state-focus-s-border-width, 2px);
84
84
  outline-style:var(--border-state-focus-s-border-style, solid);
85
85
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/Lists/ListPrivate/styles.module.css CHANGED
@@ -24,7 +24,7 @@
24
24
  min-width:calc(2 * 3 * var(--dimension-5m, 40px));
25
25
  height:calc(3 * var(--dimension-5m, 40px));
26
26
  }
27
- .loader:focus-visible{
27
+ .loader:focus, .loader:focus-visible{
28
28
  outline-width:var(--border-state-focus-s-border-width, 2px);
29
29
  outline-style:var(--border-state-focus-s-border-style, solid);
30
30
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/Lists/styles.module.css CHANGED
@@ -5,18 +5,18 @@
5
5
  margin:0;
6
6
  padding:0;
7
7
  }
8
- .listContainer:focus-visible{
8
+ .listContainer:focus, .listContainer:focus-visible{
9
9
  border:none;
10
10
  outline:none;
11
11
  }
12
- .listContainer:focus-visible[data-active]{
12
+ .listContainer:focus[data-active], .listContainer:focus-visible[data-active]{
13
13
  outline-width:var(--border-state-focus-s-border-width, 2px);
14
14
  outline-style:var(--border-state-focus-s-border-style, solid);
15
15
  outline-color:var(--border-state-focus-s-border-color, );
16
16
  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
17
17
  outline-color:var(--sys-available-complementary, #1c1c24);
18
18
  }
19
- .listContainer:focus-visible[data-active] *{
19
+ .listContainer:focus[data-active] *, .listContainer:focus-visible[data-active] *{
20
20
  cursor:inherit;
21
21
  }
22
22
  .listContainer li,
@@ -31,7 +31,7 @@
31
31
  box-sizing:border-box;
32
32
  height:100%;
33
33
  }
34
- .wrapper:has(.listContainer:focus-visible){
34
+ .wrapper:has(.listContainer:focus-visible), .wrapper:has(.listContainer:focus){
35
35
  outline-width:var(--border-state-focus-s-border-width, 2px);
36
36
  outline-style:var(--border-state-focus-s-border-style, solid);
37
37
  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": "List",
7
- "version": "0.27.7",
7
+ "version": "0.27.8-preview-ef227a87.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,16 +36,16 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.19.9",
39
+ "@snack-uikit/button": "0.19.10-preview-ef227a87.0",
40
40
  "@snack-uikit/divider": "3.2.5",
41
41
  "@snack-uikit/dropdown": "0.4.7",
42
42
  "@snack-uikit/icons": "0.26.2",
43
- "@snack-uikit/info-block": "0.6.21",
43
+ "@snack-uikit/info-block": "0.6.22-preview-ef227a87.0",
44
44
  "@snack-uikit/loaders": "0.9.3",
45
45
  "@snack-uikit/scroll": "0.9.5",
46
- "@snack-uikit/search-private": "0.4.16",
47
- "@snack-uikit/toggles": "0.13.13",
48
- "@snack-uikit/truncate-string": "0.6.18",
46
+ "@snack-uikit/search-private": "0.4.17-preview-ef227a87.0",
47
+ "@snack-uikit/toggles": "0.13.14-preview-ef227a87.0",
48
+ "@snack-uikit/truncate-string": "0.6.19-preview-ef227a87.0",
49
49
  "@snack-uikit/utils": "3.8.1",
50
50
  "@tanstack/react-virtual": "3.11.2",
51
51
  "classnames": "2.5.1",
@@ -54,5 +54,5 @@
54
54
  "peerDependencies": {
55
55
  "@snack-uikit/locale": "*"
56
56
  },
57
- "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
57
+ "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
58
58
  }
package/src/components/Items/BaseItem/styles.module.scss CHANGED
@@ -152,7 +152,8 @@ $level: var(--level, 0);
152
152
  background-color: styles-tokens-dropList.$sys-primary-accent-default;
153
153
  }
154
154
 
155
- .droplistItem:focus-visible {
155
+ .droplistItem:focus-visible,
156
+ .droplistItem:focus {
156
157
  &[data-variant='single'] {
157
158
  outline-color: styles-tokens-dropList.$sys-primary-accent-default;
158
159
  }
package/src/components/Items/SearchItem/styles.module.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  width: 100%;
5
5
 
6
6
  &:focus-within,
7
+ &:focus,
7
8
  &:focus-visible {
8
9
  @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
9
10
 
package/src/components/Items/styles.module.scss CHANGED
@@ -43,6 +43,7 @@ $sizes: 's', 'm', 'l';
43
43
  &:not([data-inactive], [data-disabled]) {
44
44
  &[data-open],
45
45
  &[data-focused],
46
+ &:focus,
46
47
  &:focus-visible {
47
48
  &::before {
48
49
  opacity: styles-tokens-dropList.$opacity-a008;
@@ -92,6 +93,7 @@ $sizes: 's', 'm', 'l';
92
93
 
93
94
  &:not([data-inactive], [data-disabled]) {
94
95
  &[data-focused],
96
+ &:focus,
95
97
  &:focus-visible {
96
98
  @include styles-tokens-dropList.outline-inside-var(styles-tokens-element.$container-focused-s);
97
99
  }
package/src/components/Lists/ListPrivate/styles.module.scss CHANGED
@@ -26,6 +26,7 @@ $loader-height: (
26
26
  }
27
27
  }
28
28
 
29
+ &:focus,
29
30
  &:focus-visible {
30
31
  @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
31
32
 
package/src/components/Lists/styles.module.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  margin: 0;
9
9
  padding: 0;
10
10
 
11
+ &:focus,
11
12
  &:focus-visible {
12
13
  border: none;
13
14
  outline: none;
@@ -38,7 +39,8 @@
38
39
  box-sizing: border-box;
39
40
  height: 100%;
40
41
 
41
- &:has(.listContainer:focus-visible) {
42
+ &:has(.listContainer:focus-visible),
43
+ &:has(.listContainer:focus) {
42
44
  @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);
43
45
 
44
46
  outline-color: styles-tokens-element.$sys-available-complementary;