@snack-uikit/alert 0.16.7-preview-ef227a87.0 → 0.16.7

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 (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/helperComponents/styles.module.css +8 -8
  3. package/dist/esm/helperComponents/styles.module.css +8 -8
  4. package/package.json +5 -5
  5. package/src/helperComponents/styles.module.scss +3 -8
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.16.7 (2025-05-12)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/loaders@0.9.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/loaders/CHANGELOG.md)
10
+
11
+
12
+
13
+
14
+
6
15
  ## 0.16.6 (2025-03-27)
7
16
 
8
17
  ### Only dependencies have been changed
package/dist/cjs/helperComponents/styles.module.css CHANGED
@@ -64,14 +64,14 @@
64
64
  width:var(--size-alert-button-m, 24px);
65
65
  border-radius:var(--radius-alert-button, 8px);
66
66
  }
67
- .alertButton[data-variant=simple]:focus, .alertButton[data-variant=simple]:focus-visible{
67
+ .alertButton[data-variant=simple]:focus-visible{
68
68
  outline-color:var(--sys-available-complementary, #1c1c24);
69
69
  outline-offset:var(--spacing-state-focus-offset, 2px);
70
70
  }
71
71
  .alertButton[data-variant=simple][data-appearance=neutral]{
72
72
  color:var(--sys-neutral-text-support, #6d707f);
73
73
  }
74
- .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
74
+ .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
75
75
  color:var(--sys-neutral-text-main, #41424e);
76
76
  }
77
77
  .alertButton[data-variant=simple][data-appearance=neutral]:active{
@@ -80,7 +80,7 @@
80
80
  .alertButton[data-variant=simple][data-appearance=primary]{
81
81
  color:var(--sys-primary-text-support, #5b4796);
82
82
  }
83
- .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
83
+ .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
84
84
  color:var(--sys-primary-text-main, #382a62);
85
85
  }
86
86
  .alertButton[data-variant=simple][data-appearance=primary]:active{
@@ -89,7 +89,7 @@
89
89
  .alertButton[data-variant=simple][data-appearance=red]{
90
90
  color:var(--sys-red-text-support, #ae514c);
91
91
  }
92
- .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
92
+ .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
93
93
  color:var(--sys-red-text-main, #7a2d2d);
94
94
  }
95
95
  .alertButton[data-variant=simple][data-appearance=red]:active{
@@ -98,7 +98,7 @@
98
98
  .alertButton[data-variant=simple][data-appearance=yellow]{
99
99
  color:var(--sys-yellow-text-support, #b78c32);
100
100
  }
101
- .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
101
+ .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
102
102
  color:var(--sys-yellow-text-main, #815f19);
103
103
  }
104
104
  .alertButton[data-variant=simple][data-appearance=yellow]:active{
@@ -107,7 +107,7 @@
107
107
  .alertButton[data-variant=simple][data-appearance=green]{
108
108
  color:var(--sys-green-text-support, #55915a);
109
109
  }
110
- .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
110
+ .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
111
111
  color:var(--sys-green-text-main, #3d6035);
112
112
  }
113
113
  .alertButton[data-variant=simple][data-appearance=green]:active{
@@ -116,7 +116,7 @@
116
116
  .alertButton[data-variant=simple][data-appearance=blue]{
117
117
  color:var(--sys-blue-text-support, #4877b0);
118
118
  }
119
- .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
119
+ .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
120
120
  color:var(--sys-blue-text-main, #2b537e);
121
121
  }
122
122
  .alertButton[data-variant=simple][data-appearance=blue]:active{
@@ -141,7 +141,7 @@
141
141
  opacity:unset;
142
142
  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
143
143
  }
144
- .alertButton[data-variant=tonal]:focus, .alertButton[data-variant=tonal]:focus-visible{
144
+ .alertButton[data-variant=tonal]:focus-visible{
145
145
  outline-width:var(--border-state-focus-s-border-width, 2px);
146
146
  outline-style:var(--border-state-focus-s-border-style, solid);
147
147
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/helperComponents/styles.module.css CHANGED
@@ -64,14 +64,14 @@
64
64
  width:var(--size-alert-button-m, 24px);
65
65
  border-radius:var(--radius-alert-button, 8px);
66
66
  }
67
- .alertButton[data-variant=simple]:focus, .alertButton[data-variant=simple]:focus-visible{
67
+ .alertButton[data-variant=simple]:focus-visible{
68
68
  outline-color:var(--sys-available-complementary, #1c1c24);
69
69
  outline-offset:var(--spacing-state-focus-offset, 2px);
70
70
  }
71
71
  .alertButton[data-variant=simple][data-appearance=neutral]{
72
72
  color:var(--sys-neutral-text-support, #6d707f);
73
73
  }
74
- .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
74
+ .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
75
75
  color:var(--sys-neutral-text-main, #41424e);
76
76
  }
77
77
  .alertButton[data-variant=simple][data-appearance=neutral]:active{
@@ -80,7 +80,7 @@
80
80
  .alertButton[data-variant=simple][data-appearance=primary]{
81
81
  color:var(--sys-primary-text-support, #5b4796);
82
82
  }
83
- .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
83
+ .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
84
84
  color:var(--sys-primary-text-main, #382a62);
85
85
  }
86
86
  .alertButton[data-variant=simple][data-appearance=primary]:active{
@@ -89,7 +89,7 @@
89
89
  .alertButton[data-variant=simple][data-appearance=red]{
90
90
  color:var(--sys-red-text-support, #ae514c);
91
91
  }
92
- .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
92
+ .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
93
93
  color:var(--sys-red-text-main, #7a2d2d);
94
94
  }
95
95
  .alertButton[data-variant=simple][data-appearance=red]:active{
@@ -98,7 +98,7 @@
98
98
  .alertButton[data-variant=simple][data-appearance=yellow]{
99
99
  color:var(--sys-yellow-text-support, #b78c32);
100
100
  }
101
- .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
101
+ .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
102
102
  color:var(--sys-yellow-text-main, #815f19);
103
103
  }
104
104
  .alertButton[data-variant=simple][data-appearance=yellow]:active{
@@ -107,7 +107,7 @@
107
107
  .alertButton[data-variant=simple][data-appearance=green]{
108
108
  color:var(--sys-green-text-support, #55915a);
109
109
  }
110
- .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
110
+ .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
111
111
  color:var(--sys-green-text-main, #3d6035);
112
112
  }
113
113
  .alertButton[data-variant=simple][data-appearance=green]:active{
@@ -116,7 +116,7 @@
116
116
  .alertButton[data-variant=simple][data-appearance=blue]{
117
117
  color:var(--sys-blue-text-support, #4877b0);
118
118
  }
119
- .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
119
+ .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
120
120
  color:var(--sys-blue-text-main, #2b537e);
121
121
  }
122
122
  .alertButton[data-variant=simple][data-appearance=blue]:active{
@@ -141,7 +141,7 @@
141
141
  opacity:unset;
142
142
  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
143
143
  }
144
- .alertButton[data-variant=tonal]:focus, .alertButton[data-variant=tonal]:focus-visible{
144
+ .alertButton[data-variant=tonal]:focus-visible{
145
145
  outline-width:var(--border-state-focus-s-border-width, 2px);
146
146
  outline-style:var(--border-state-focus-s-border-style, solid);
147
147
  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": "Alert",
7
- "version": "0.16.7-preview-ef227a87.0",
7
+ "version": "0.16.7",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,11 +37,11 @@
37
37
  "scripts": {},
38
38
  "dependencies": {
39
39
  "@snack-uikit/icons": "0.26.2",
40
- "@snack-uikit/link": "0.17.1-preview-ef227a87.0",
41
- "@snack-uikit/loaders": "0.9.3",
42
- "@snack-uikit/truncate-string": "0.6.19-preview-ef227a87.0",
40
+ "@snack-uikit/link": "0.17.0",
41
+ "@snack-uikit/loaders": "0.9.4",
42
+ "@snack-uikit/truncate-string": "0.6.18",
43
43
  "@snack-uikit/utils": "3.8.1",
44
44
  "classnames": "2.5.1"
45
45
  },
46
- "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
46
+ "gitHead": "82c6f5f9fd1845d6752a3cb38e8b2e0fc3cc5c98"
47
47
  }
package/src/helperComponents/styles.module.scss CHANGED
@@ -5,10 +5,7 @@
5
5
  $simpleAppearances: 'neutral', 'primary', 'red', 'yellow', 'green', 'blue';
6
6
  $tonalAppearances: 'invert-neutral', 'primary', 'red', 'yellow', 'green', 'blue';
7
7
  $sizes: 's', 'm';
8
- $text: (
9
- 's': 'm',
10
- 'm': 'l',
11
- );
8
+ $text: ('s': 'm', 'm': 'l');
12
9
 
13
10
  .alertButton {
14
11
  cursor: pointer;
@@ -29,7 +26,7 @@ $text: (
29
26
  .text {
30
27
  @each $name, $glyph in $text {
31
28
  &[data-size='#{$name}'] {
32
- @include styles-tokens-alert.composite-var(styles-tokens-alert.$theme-variables, 'sans', 'label', $glyph);
29
+ @include styles-tokens-alert.composite-var(styles-tokens-alert.$theme-variables, 'sans', 'label', $glyph)
33
30
  }
34
31
  }
35
32
  }
@@ -63,11 +60,11 @@ $text: (
63
60
 
64
61
  &[data-icon-only] {
65
62
  @include styles-tokens-alert.composite-var(styles-tokens-alert.$alert, $size, 'button', 'button-close');
63
+
66
64
  }
67
65
  }
68
66
  }
69
67
 
70
- &:focus,
71
68
  &:focus-visible {
72
69
  outline-color: styles-tokens-alert.$sys-available-complementary;
73
70
  outline-offset: styles-tokens-alert.$spacing-state-focus-offset;
@@ -78,7 +75,6 @@ $text: (
78
75
  color: styles-tokens-alert.simple-var(styles-tokens-alert.$theme-variables, 'sys', $appearance, 'text-support');
79
76
 
80
77
  &:hover,
81
- &:focus,
82
78
  &:focus-visible {
83
79
  color: styles-tokens-alert.simple-var(styles-tokens-alert.$theme-variables, 'sys', $appearance, 'text-main');
84
80
  }
@@ -106,7 +102,6 @@ $text: (
106
102
  background-color: styles-tokens-alert.$sys-opacity-hovered;
107
103
  }
108
104
 
109
- &:focus,
110
105
  &:focus-visible {
111
106
  @include styles-tokens-alert.outline-var(styles-tokens-element.$container-focused-s);
112
107