@snack-uikit/breadcrumbs 0.10.37 → 0.10.38-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/Collapse/styles.module.css +2 -2
  2. package/dist/cjs/components/Crumb/styles.module.css +21 -9
  3. package/dist/esm/components/Collapse/styles.module.css +2 -2
  4. package/dist/esm/components/Crumb/styles.module.css +21 -9
  5. package/package.json +3 -3
  6. package/src/components/Collapse/styles.module.scss +2 -0
  7. package/src/components/Crumb/styles.module.scss +30 -6
package/dist/cjs/components/Collapse/styles.module.css CHANGED
@@ -3,10 +3,10 @@
3
3
  background:none;
4
4
  border:none;
5
5
  }
6
- .collapse:focus-visible, .collapse:hover{
6
+ .collapse:focus, .collapse:focus-visible, .collapse:hover{
7
7
  color:var(--sys-neutral-text-support, #6d707f);
8
8
  }
9
- .collapse:focus-visible{
9
+ .collapse:focus, .collapse:focus-visible{
10
10
  outline-width:var(--border-state-focus-s-border-width, 2px);
11
11
  outline-style:var(--border-state-focus-s-border-style, solid);
12
12
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/Crumb/styles.module.css CHANGED
@@ -6,7 +6,8 @@
6
6
  flex-shrink:1;
7
7
  }
8
8
 
9
- .crumb, a.crumb{
9
+ .crumb,
10
+ a.crumb{
10
11
  display:flex;
11
12
  align-items:center;
12
13
  width:100%;
@@ -17,36 +18,47 @@
17
18
  background:none;
18
19
  border:none;
19
20
  }
20
- .crumb[data-clickable], a.crumb[data-clickable]{
21
+ .crumb[data-clickable],
22
+ a.crumb[data-clickable]{
21
23
  cursor:pointer;
22
24
  }
23
- .crumb[data-clickable]:focus-visible, .crumb[data-clickable]:hover, a.crumb[data-clickable]:focus-visible, a.crumb[data-clickable]:hover{
25
+ .crumb[data-clickable]:focus, .crumb[data-clickable]:focus-visible, .crumb[data-clickable]:hover,
26
+ a.crumb[data-clickable]:focus,
27
+ a.crumb[data-clickable]:focus-visible,
28
+ a.crumb[data-clickable]:hover{
24
29
  color:var(--sys-neutral-text-support, #6d707f);
25
30
  }
26
- .crumb[data-current=true], a.crumb[data-current=true]{
31
+ .crumb[data-current=true],
32
+ a.crumb[data-current=true]{
27
33
  color:var(--sys-neutral-text-support, #6d707f);
28
34
  }
29
- .crumb:focus-visible, a.crumb:focus-visible{
35
+ .crumb:focus, .crumb:focus-visible,
36
+ a.crumb:focus,
37
+ a.crumb:focus-visible{
30
38
  outline-width:var(--border-state-focus-s-border-width, 2px);
31
39
  outline-style:var(--border-state-focus-s-border-style, solid);
32
40
  outline-color:var(--border-state-focus-s-border-color, );
33
41
  outline-color:var(--sys-available-complementary, #1c1c24);
34
42
  }
35
- .crumb[data-size=xs], a.crumb[data-size=xs]{
43
+ .crumb[data-size=xs],
44
+ a.crumb[data-size=xs]{
36
45
  height:var(--size-breadcrumbs-xs, 16px);
37
46
  gap:var(--space-breadcrumbs-crumb-xs-gap, 2px);
38
47
  }
39
- .crumb[data-size=s], a.crumb[data-size=s]{
48
+ .crumb[data-size=s],
49
+ a.crumb[data-size=s]{
40
50
  height:var(--size-breadcrumbs-s, 24px);
41
51
  gap:var(--space-breadcrumbs-crumb-s-gap, 2px);
42
52
  }
43
- .crumb .label, a.crumb .label{
53
+ .crumb .label,
54
+ a.crumb .label{
44
55
  overflow:hidden;
45
56
  width:100%;
46
57
  text-overflow:ellipsis;
47
58
  white-space:nowrap;
48
59
  }
49
- .crumb .icon, a.crumb .icon{
60
+ .crumb .icon,
61
+ a.crumb .icon{
50
62
  display:flex;
51
63
  flex-shrink:0;
52
64
  align-items:center;
package/dist/esm/components/Collapse/styles.module.css CHANGED
@@ -3,10 +3,10 @@
3
3
  background:none;
4
4
  border:none;
5
5
  }
6
- .collapse:focus-visible, .collapse:hover{
6
+ .collapse:focus, .collapse:focus-visible, .collapse:hover{
7
7
  color:var(--sys-neutral-text-support, #6d707f);
8
8
  }
9
- .collapse:focus-visible{
9
+ .collapse:focus, .collapse:focus-visible{
10
10
  outline-width:var(--border-state-focus-s-border-width, 2px);
11
11
  outline-style:var(--border-state-focus-s-border-style, solid);
12
12
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/Crumb/styles.module.css CHANGED
@@ -6,7 +6,8 @@
6
6
  flex-shrink:1;
7
7
  }
8
8
 
9
- .crumb, a.crumb{
9
+ .crumb,
10
+ a.crumb{
10
11
  display:flex;
11
12
  align-items:center;
12
13
  width:100%;
@@ -17,36 +18,47 @@
17
18
  background:none;
18
19
  border:none;
19
20
  }
20
- .crumb[data-clickable], a.crumb[data-clickable]{
21
+ .crumb[data-clickable],
22
+ a.crumb[data-clickable]{
21
23
  cursor:pointer;
22
24
  }
23
- .crumb[data-clickable]:focus-visible, .crumb[data-clickable]:hover, a.crumb[data-clickable]:focus-visible, a.crumb[data-clickable]:hover{
25
+ .crumb[data-clickable]:focus, .crumb[data-clickable]:focus-visible, .crumb[data-clickable]:hover,
26
+ a.crumb[data-clickable]:focus,
27
+ a.crumb[data-clickable]:focus-visible,
28
+ a.crumb[data-clickable]:hover{
24
29
  color:var(--sys-neutral-text-support, #6d707f);
25
30
  }
26
- .crumb[data-current=true], a.crumb[data-current=true]{
31
+ .crumb[data-current=true],
32
+ a.crumb[data-current=true]{
27
33
  color:var(--sys-neutral-text-support, #6d707f);
28
34
  }
29
- .crumb:focus-visible, a.crumb:focus-visible{
35
+ .crumb:focus, .crumb:focus-visible,
36
+ a.crumb:focus,
37
+ a.crumb:focus-visible{
30
38
  outline-width:var(--border-state-focus-s-border-width, 2px);
31
39
  outline-style:var(--border-state-focus-s-border-style, solid);
32
40
  outline-color:var(--border-state-focus-s-border-color, );
33
41
  outline-color:var(--sys-available-complementary, #1c1c24);
34
42
  }
35
- .crumb[data-size=xs], a.crumb[data-size=xs]{
43
+ .crumb[data-size=xs],
44
+ a.crumb[data-size=xs]{
36
45
  height:var(--size-breadcrumbs-xs, 16px);
37
46
  gap:var(--space-breadcrumbs-crumb-xs-gap, 2px);
38
47
  }
39
- .crumb[data-size=s], a.crumb[data-size=s]{
48
+ .crumb[data-size=s],
49
+ a.crumb[data-size=s]{
40
50
  height:var(--size-breadcrumbs-s, 24px);
41
51
  gap:var(--space-breadcrumbs-crumb-s-gap, 2px);
42
52
  }
43
- .crumb .label, a.crumb .label{
53
+ .crumb .label,
54
+ a.crumb .label{
44
55
  overflow:hidden;
45
56
  width:100%;
46
57
  text-overflow:ellipsis;
47
58
  white-space:nowrap;
48
59
  }
49
- .crumb .icon, a.crumb .icon{
60
+ .crumb .icon,
61
+ a.crumb .icon{
50
62
  display:flex;
51
63
  flex-shrink:0;
52
64
  align-items:center;
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Breadcrumbs",
7
- "version": "0.10.37",
7
+ "version": "0.10.38-preview-ef227a87.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,11 +36,11 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/list": "0.27.7",
39
+ "@snack-uikit/list": "0.27.8-preview-ef227a87.0",
40
40
  "@snack-uikit/typography": "0.8.6",
41
41
  "@snack-uikit/utils": "3.8.1",
42
42
  "classnames": "2.5.1",
43
43
  "lodash.debounce": "4.0.8"
44
44
  },
45
- "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
45
+ "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
46
46
  }
package/src/components/Collapse/styles.module.scss CHANGED
@@ -5,11 +5,13 @@
5
5
  background: none;
6
6
  border: none;
7
7
 
8
+ &:focus,
8
9
  &:focus-visible,
9
10
  &:hover {
10
11
  color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', 'neutral', 'text-support');
11
12
  }
12
13
 
14
+ &:focus,
13
15
  &:focus-visible {
14
16
  @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
15
17
 
package/src/components/Crumb/styles.module.scss CHANGED
@@ -7,12 +7,13 @@ $sizes: 'xs', 's';
7
7
  flex-shrink: 0;
8
8
  list-style: none;
9
9
 
10
- &[data-render-mode=ellipsis] {
10
+ &[data-render-mode='ellipsis'] {
11
11
  flex-shrink: 1;
12
12
  }
13
13
  }
14
14
 
15
- .crumb, a.crumb {
15
+ .crumb,
16
+ a.crumb {
16
17
  display: flex;
17
18
  align-items: center;
18
19
 
@@ -20,7 +21,12 @@ $sizes: 'xs', 's';
20
21
  margin: 0;
21
22
  padding: 0;
22
23
 
23
- color: styles-tokens-breadcrumbs.simple-var(styles-tokens-breadcrumbs.$theme-variables, 'sys', 'neutral', 'text-light');
24
+ color: styles-tokens-breadcrumbs.simple-var(
25
+ styles-tokens-breadcrumbs.$theme-variables,
26
+ 'sys',
27
+ 'neutral',
28
+ 'text-light'
29
+ );
24
30
  text-decoration: none;
25
31
 
26
32
  background: none;
@@ -28,20 +34,38 @@ $sizes: 'xs', 's';
28
34
 
29
35
  &[data-clickable] {
30
36
  cursor: pointer;
37
+
38
+ &:focus,
31
39
  &:focus-visible,
32
40
  &:hover {
33
- color: styles-tokens-breadcrumbs.simple-var(styles-tokens-breadcrumbs.$theme-variables, 'sys', 'neutral', 'text-support');
41
+ color: styles-tokens-breadcrumbs.simple-var(
42
+ styles-tokens-breadcrumbs.$theme-variables,
43
+ 'sys',
44
+ 'neutral',
45
+ 'text-support'
46
+ );
34
47
  }
35
48
  }
36
49
 
37
50
  &[data-current='true'] {
38
- color: styles-tokens-breadcrumbs.simple-var(styles-tokens-breadcrumbs.$theme-variables, 'sys', 'neutral', 'text-support');
51
+ color: styles-tokens-breadcrumbs.simple-var(
52
+ styles-tokens-breadcrumbs.$theme-variables,
53
+ 'sys',
54
+ 'neutral',
55
+ 'text-support'
56
+ );
39
57
  }
40
58
 
59
+ &:focus,
41
60
  &:focus-visible {
42
61
  @include styles-tokens-breadcrumbs.outline-var(styles-tokens-element.$container-focused-s);
43
62
 
44
- outline-color: styles-tokens-breadcrumbs.simple-var(styles-tokens-breadcrumbs.$theme-variables, 'sys', 'available', 'complementary');
63
+ outline-color: styles-tokens-breadcrumbs.simple-var(
64
+ styles-tokens-breadcrumbs.$theme-variables,
65
+ 'sys',
66
+ 'available',
67
+ 'complementary'
68
+ );
45
69
  }
46
70
 
47
71
  @each $size in $sizes {