@primer/css 0.0.0-20220112200420 → 0.0.0-20220113152035

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 (85) hide show
  1. package/CHANGELOG.md +6 -6
  2. package/actionlist/action-list-item.scss +85 -32
  3. package/base/base.scss +2 -55
  4. package/base/normalize.scss +52 -12
  5. package/buttons/button.scss +25 -0
  6. package/buttons/misc.scss +19 -12
  7. package/dist/actionlist.css +1 -1
  8. package/dist/actionlist.css.map +1 -1
  9. package/dist/alerts.css.map +1 -1
  10. package/dist/autocomplete.css.map +1 -1
  11. package/dist/avatars.css.map +1 -1
  12. package/dist/base.css +1 -1
  13. package/dist/base.css.map +1 -1
  14. package/dist/blankslate.css.map +1 -1
  15. package/dist/box.css.map +1 -1
  16. package/dist/branch-name.css.map +1 -1
  17. package/dist/breadcrumb.css.map +1 -1
  18. package/dist/buttons.css +1 -1
  19. package/dist/buttons.css.map +1 -1
  20. package/dist/core.css +1 -1
  21. package/dist/core.css.map +1 -1
  22. package/dist/dropdown.css +1 -1
  23. package/dist/dropdown.css.map +1 -1
  24. package/dist/forms.css +1 -1
  25. package/dist/forms.css.map +1 -1
  26. package/dist/header.css.map +1 -1
  27. package/dist/labels.css.map +1 -1
  28. package/dist/layout.css.map +1 -1
  29. package/dist/links.css.map +1 -1
  30. package/dist/loaders.css.map +1 -1
  31. package/dist/markdown.css.map +1 -1
  32. package/dist/marketing-buttons.css +1 -1
  33. package/dist/marketing-buttons.css.map +1 -1
  34. package/dist/marketing-links.css +1 -1
  35. package/dist/marketing-links.css.map +1 -1
  36. package/dist/marketing-type.css.map +1 -1
  37. package/dist/marketing-utilities.css.map +1 -1
  38. package/dist/marketing.css +1 -1
  39. package/dist/marketing.css.map +1 -1
  40. package/dist/meta.json +22 -22
  41. package/dist/navigation.css +1 -1
  42. package/dist/navigation.css.map +1 -1
  43. package/dist/pagination.css.map +1 -1
  44. package/dist/popover.css.map +1 -1
  45. package/dist/primer.css +3 -3
  46. package/dist/primer.css.map +1 -1
  47. package/dist/product.css +1 -1
  48. package/dist/product.css.map +1 -1
  49. package/dist/progress.css.map +1 -1
  50. package/dist/select-menu.css.map +1 -1
  51. package/dist/stats/actionlist.json +1 -1
  52. package/dist/stats/base.json +1 -1
  53. package/dist/stats/buttons.json +1 -1
  54. package/dist/stats/core.json +1 -1
  55. package/dist/stats/dropdown.json +1 -1
  56. package/dist/stats/forms.json +1 -1
  57. package/dist/stats/marketing-buttons.json +1 -1
  58. package/dist/stats/marketing-links.json +1 -1
  59. package/dist/stats/marketing.json +1 -1
  60. package/dist/stats/navigation.json +1 -1
  61. package/dist/stats/primer.json +1 -1
  62. package/dist/stats/product.json +1 -1
  63. package/dist/stats/toasts.json +1 -1
  64. package/dist/stats/utilities.json +1 -1
  65. package/dist/subhead.css.map +1 -1
  66. package/dist/timeline.css.map +1 -1
  67. package/dist/toasts.css +1 -1
  68. package/dist/toasts.css.map +1 -1
  69. package/dist/tooltips.css.map +1 -1
  70. package/dist/truncate.css.map +1 -1
  71. package/dist/utilities.css +1 -1
  72. package/dist/utilities.css.map +1 -1
  73. package/dropdown/dropdown.scss +2 -0
  74. package/forms/form-control.scss +8 -0
  75. package/forms/form-group.scss +13 -38
  76. package/forms/input-group.scss +0 -8
  77. package/marketing/buttons/button.scss +30 -4
  78. package/marketing/links/link.scss +4 -1
  79. package/navigation/menu.scss +8 -6
  80. package/navigation/sidenav.scss +10 -1
  81. package/navigation/tabnav.scss +2 -6
  82. package/package.json +1 -1
  83. package/support/mixins/misc.scss +0 -9
  84. package/toasts/toasts.scss +4 -7
  85. package/utilities/details.scss +3 -19
package/CHANGELOG.md CHANGED
@@ -1,10 +1,6 @@
1
1
  # @primer/css
2
2
 
3
- ## 0.0.0-20220112200420
4
-
5
- ### Major Changes
6
-
7
- - [#1744](https://github.com/primer/css/pull/1744) [`d0425dcd`](https://github.com/primer/css/commit/d0425dcddb801260aaae7dbcc75acaeecdfbeb6a) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles
3
+ ## 0.0.0-20220113152035
8
4
 
9
5
  ### Minor Changes
10
6
 
@@ -16,7 +12,11 @@
16
12
 
17
13
  * [#1869](https://github.com/primer/css/pull/1869) [`868f61a1`](https://github.com/primer/css/commit/868f61a199df14862922d52905de66cdb1e1c192) Thanks [@jdanyow](https://github.com/jdanyow)! - Minor bugfix for AvatarStack. Removing the box-shadow from the AvatarStack-body on hover.
18
14
 
19
- - Fake entry to force publishing
15
+ - [#1856](https://github.com/primer/css/pull/1856) [`69e0153c`](https://github.com/primer/css/commit/69e0153cdeb8bc72ce0619eddb7879b6e9db196c) Thanks [@langermank](https://github.com/langermank)! - ActionList item outlines for high contrast theme
16
+
17
+ * Fake entry to force publishing
18
+
19
+ - [#1870](https://github.com/primer/css/pull/1870) [`815daff9`](https://github.com/primer/css/commit/815daff9f07d8096d572cf75bee17284f36492f6) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [ActionList] Add hover to `aria-current` elements and other micro interactions
20
20
 
21
21
  ## 19.1.1
22
22
 
@@ -1,3 +1,12 @@
1
+ // stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
2
+
3
+ @mixin focusOutline {
4
+ position: relative;
5
+ z-index: 1;
6
+ outline: none;
7
+ box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
8
+ }
9
+
1
10
  @mixin activeIndicatorLine {
2
11
  position: absolute;
3
12
  top: calc(50% - 12px);
@@ -15,6 +24,8 @@
15
24
  list-style: none;
16
25
  background-color: transparent;
17
26
  border-radius: $border-radius;
27
+ touch-action: manipulation;
28
+ -webkit-tap-highlight-color: transparent;
18
29
 
19
30
  &:hover,
20
31
  &:active {
@@ -26,47 +37,65 @@
26
37
  }
27
38
  }
28
39
 
29
- // li only: focus, a href: focus-within on li
30
- &:focus,
31
- &:focus-within {
32
- @include focusOutline;
33
- }
34
-
35
40
  // only hover li without list as children
36
- &:not(.ActionList-item--hasSubItem) {
37
- &:hover {
38
- cursor: pointer;
39
- background-color: var(--color-action-list-item-default-hover-bg);
41
+ &:not(.ActionList-item--hasSubItem),
42
+ // target contents of first child li if sub-item (li wraps item label + nested ul)
43
+ &.ActionList-item--hasSubItem > .ActionList-content {
44
+ @media (hover: hover) {
45
+ &:hover {
46
+ cursor: pointer;
47
+ background-color: var(--color-action-list-item-default-hover-bg);
48
+
49
+ &:not(.ActionList-item--navActive) {
50
+ // Support for "Windows high contrast mode"
51
+ outline: $border-style $border-width transparent;
52
+ outline-offset: -$border-width;
53
+ // stylelint-disable-next-line primer/box-shadow
54
+ box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
55
+ }
56
+ }
40
57
  }
41
58
 
42
59
  &:active {
43
60
  background: var(--color-action-list-item-default-active-bg);
44
61
 
62
+ &:not(.ActionList-item--navActive) {
63
+ // Support for "Windows high contrast mode" https://sarahmhigley.com/writing/whcm-quick-tips/
64
+ outline: $border-style $border-width transparent;
65
+ outline-offset: -$border-width;
66
+ // stylelint-disable-next-line primer/box-shadow
67
+ box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
68
+ }
69
+
45
70
  @media screen and (prefers-reduced-motion: no-preference) {
46
71
  animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
47
72
  }
48
73
 
49
- // stylelint-disable primer/box-shadow
50
74
  @keyframes ActionList-item-active-bg {
51
- // stylelint-disable-next-line max-nesting-depth
52
75
  50% {
53
- box-shadow: inset 0 0 0 rgba(#000, 0.04);
76
+ // this could work if primitive supported rgb (not valid right now)
77
+ // box-shadow: inset 0px 2px 12px 6px rgba(var(--color-canvas-default), 0.4), inset 0px 0px 0px 2px var(--color-action-list-item-default-active-border)
54
78
  transform: scale(1);
55
79
  }
56
80
 
57
- // stylelint-disable-next-line max-nesting-depth
58
81
  100% {
59
- box-shadow: inset 0 3px 9px rgba(#000, 0.04);
60
82
  transform: scale(0.97);
61
83
  }
62
84
  }
63
- // stylelint-enable primer/box-shadow
64
85
  }
65
86
 
66
- &:hover,
87
+ // hide dividers
88
+
89
+ @media (hover: hover) {
90
+ &:hover {
91
+ .ActionList-item-label::before,
92
+ + .ActionList-item .ActionList-item-label::before {
93
+ visibility: hidden;
94
+ }
95
+ }
96
+ }
97
+ // stylelint-disable-next-line no-duplicate-selectors
67
98
  &:active {
68
- // hide dividers
69
- // stylelint-disable-next-line selector-max-specificity
70
99
  .ActionList-item-label::before,
71
100
  + .ActionList-item .ActionList-item-label::before {
72
101
  visibility: hidden;
@@ -79,8 +108,16 @@
79
108
  &.ActionList-item--hasSubItem {
80
109
  // first child
81
110
  > .ActionList-content {
82
- &:hover {
83
- background-color: var(--color-action-list-item-default-hover-bg);
111
+ z-index: 1;
112
+
113
+ @media (hover: hover) {
114
+ &:hover {
115
+ background-color: var(--color-action-list-item-default-hover-bg);
116
+ }
117
+ }
118
+
119
+ &:active {
120
+ background-color: var(--color-action-list-item-default-active-bg);
84
121
  }
85
122
  }
86
123
  }
@@ -97,7 +134,12 @@
97
134
  &:not(.ActionList-item--danger) {
98
135
  background: var(--color-action-list-item-default-selected-bg);
99
136
 
100
- // stylelint-disable-next-line selector-max-specificity
137
+ @media (hover: hover) {
138
+ &:hover {
139
+ background-color: var(--color-action-list-item-default-hover-bg);
140
+ }
141
+ }
142
+
101
143
  &::before,
102
144
  + .ActionList-item::before {
103
145
  visibility: hidden;
@@ -116,6 +158,10 @@
116
158
  // target items inside expanded subgroups
117
159
  &[aria-expanded] {
118
160
  .ActionList--subGroup {
161
+ @media screen and (prefers-reduced-motion: no-preference) {
162
+ transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
163
+ }
164
+
119
165
  .ActionList-content {
120
166
  padding-left: $spacer-4;
121
167
  }
@@ -123,7 +169,6 @@
123
169
 
124
170
  // has 16px leading visual
125
171
  .ActionList-content--visual16 + .ActionList--subGroup {
126
- // stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
127
172
  .ActionList-content {
128
173
  padding-left: $spacer-5;
129
174
  }
@@ -131,7 +176,6 @@
131
176
 
132
177
  // has 20px leading visual
133
178
  .ActionList-content--visual20 + .ActionList--subGroup {
134
- // stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
135
179
  .ActionList-content {
136
180
  padding-left: $spacer-2 * 4.5; // 36px
137
181
  }
@@ -139,7 +183,6 @@
139
183
 
140
184
  // has 24px leading visual
141
185
  .ActionList-content--visual24 + .ActionList--subGroup {
142
- // stylelint-disable-next-line selector-max-compound-selectors, selector-max-specificity
143
186
  .ActionList-content {
144
187
  padding-left: $spacer-6;
145
188
  }
@@ -153,11 +196,14 @@
153
196
  }
154
197
 
155
198
  .ActionList--subGroup {
156
- display: block;
199
+ height: auto;
200
+ overflow: visible;
201
+ visibility: visible;
202
+ opacity: 1;
203
+ transform: translateY(0);
157
204
  }
158
205
 
159
206
  &.ActionList-item--hasActiveSubItem {
160
- // stylelint-disable-next-line selector-max-specificity
161
207
  > .ActionList-content > .ActionList-item-label {
162
208
  font-weight: $font-weight-bold;
163
209
  }
@@ -171,7 +217,11 @@
171
217
  }
172
218
 
173
219
  .ActionList--subGroup {
174
- display: none;
220
+ height: 0;
221
+ overflow: hidden;
222
+ visibility: hidden;
223
+ opacity: 0;
224
+ transform: translateY(-$spacer-3);
175
225
  }
176
226
 
177
227
  // show active indicator on parent collapse if child is active
@@ -182,7 +232,6 @@
182
232
  font-weight: $font-weight-bold;
183
233
  }
184
234
 
185
- // stylelint-disable-next-line selector-max-specificity
186
235
  &::before,
187
236
  + .ActionList-item::before {
188
237
  visibility: hidden;
@@ -299,11 +348,10 @@
299
348
  color: var(--color-danger-fg);
300
349
  }
301
350
 
302
- @media (hover: hover) and (pointer: fine) {
351
+ @media (hover: hover) {
303
352
  &:hover {
304
353
  background: var(--color-action-list-item-danger-hover-bg);
305
354
 
306
- // stylelint-disable-next-line max-nesting-depth
307
355
  .ActionList-item-label {
308
356
  color: var(--color-action-list-item-danger-hover-text);
309
357
  }
@@ -326,7 +374,7 @@
326
374
  fill: var(--color-primer-fg-disabled);
327
375
  }
328
376
 
329
- @media (hover: hover) and (pointer: fine) {
377
+ @media (hover: hover) {
330
378
  &:hover {
331
379
  cursor: not-allowed;
332
380
  background-color: transparent;
@@ -351,6 +399,7 @@
351
399
  font-weight: $font-weight-normal;
352
400
  color: var(--color-fg-default);
353
401
  user-select: none;
402
+ touch-action: manipulation;
354
403
  border-radius: $border-radius;
355
404
  transition: $actionList-item-bg-transition;
356
405
  grid-template-rows: min-content;
@@ -363,6 +412,10 @@
363
412
  margin-right: $spacer-2;
364
413
  }
365
414
 
415
+ &:focus-visible {
416
+ @include focusOutline;
417
+ }
418
+
366
419
  // sizes
367
420
 
368
421
  &.ActionList-content--sizeMedium {
package/base/base.scss CHANGED
@@ -77,63 +77,10 @@ button {
77
77
  }
78
78
 
79
79
  details {
80
- summary {
81
- cursor: pointer;
82
- }
80
+ summary { cursor: pointer; }
83
81
 
84
82
  &:not([open]) {
85
83
  // Set details content hidden by default for browsers that don't do this
86
- > *:not(summary) {
87
- display: none !important;
88
- }
89
- }
90
- }
91
-
92
- // global focus styles
93
-
94
- a,
95
- button,
96
- [role='button'],
97
- input,
98
- textarea,
99
- select {
100
- // fallback :focus state
101
- &:focus {
102
- @include focusOutline;
103
-
104
- // remove fallback :focus if :focus-visible is supported
105
- &:not(:focus-visible) {
106
- outline: solid 1px transparent;
107
- }
108
- }
109
-
110
- // default focus state
111
- &:focus-visible {
112
- @include focusOutline;
113
- }
114
- }
115
-
116
- input:not([type='radio'], [type='checkbox']),
117
- textarea,
118
- select {
119
- &:focus,
120
- &:focus-visible {
121
- outline-offset: 0;
122
- }
123
- }
124
-
125
- // for handling focus conditionally
126
- .focus {
127
- @include focusOutline;
128
-
129
- &:is(input, textarea, select) {
130
- outline-offset: 0;
131
- }
132
- }
133
-
134
- // Windows High Contrast mode
135
- @media (forced-colors: active) {
136
- *:focus {
137
- outline: solid 1px transparent;
84
+ > *:not(summary) { display: none !important; }
138
85
  }
139
86
  }
@@ -39,8 +39,7 @@ header,
39
39
  main, /* 2 */
40
40
  menu,
41
41
  nav,
42
- section {
43
- /* 1 */
42
+ section { /* 1 */
44
43
  display: block;
45
44
  }
46
45
 
@@ -97,6 +96,16 @@ a {
97
96
  background-color: transparent; /* 1 */
98
97
  }
99
98
 
99
+ /**
100
+ * Remove the outline on focused links when they are also active or hovered
101
+ * in all browsers (opinionated).
102
+ */
103
+
104
+ a:active,
105
+ a:hover {
106
+ outline-width: 0;
107
+ }
108
+
100
109
  /* Text-level semantics
101
110
  ========================================================================== */
102
111
 
@@ -269,8 +278,7 @@ optgroup {
269
278
  */
270
279
 
271
280
  button,
272
- input {
273
- /* 1 */
281
+ input { /* 1 */
274
282
  overflow: visible;
275
283
  }
276
284
 
@@ -280,8 +288,7 @@ input {
280
288
  */
281
289
 
282
290
  button,
283
- select {
284
- /* 1 */
291
+ select { /* 1 */
285
292
  text-transform: none;
286
293
  }
287
294
 
@@ -298,6 +305,29 @@ html [type="button"], /* 1 */
298
305
  -webkit-appearance: button; /* 2 */
299
306
  }
300
307
 
308
+ /**
309
+ * Remove the inner border and padding in Firefox.
310
+ */
311
+
312
+ button::-moz-focus-inner,
313
+ [type="button"]::-moz-focus-inner,
314
+ [type="reset"]::-moz-focus-inner,
315
+ [type="submit"]::-moz-focus-inner {
316
+ border-style: none;
317
+ padding: 0;
318
+ }
319
+
320
+ /**
321
+ * Restore the focus styles unset by the previous rule.
322
+ */
323
+
324
+ button:-moz-focusring,
325
+ [type="button"]:-moz-focusring,
326
+ [type="reset"]:-moz-focusring,
327
+ [type="submit"]:-moz-focusring {
328
+ outline: 1px dotted ButtonText;
329
+ }
330
+
301
331
  /**
302
332
  * Change the border, margin, and padding in all browsers (opinionated).
303
333
  */
@@ -337,8 +367,8 @@ textarea {
337
367
  * 2. Remove the padding in IE 10-.
338
368
  */
339
369
 
340
- [type='checkbox'],
341
- [type='radio'] {
370
+ [type="checkbox"],
371
+ [type="radio"] {
342
372
  box-sizing: border-box; /* 1 */
343
373
  padding: 0; /* 2 */
344
374
  }
@@ -347,17 +377,27 @@ textarea {
347
377
  * Correct the cursor style of increment and decrement buttons in Chrome.
348
378
  */
349
379
 
350
- [type='number']::-webkit-inner-spin-button,
351
- [type='number']::-webkit-outer-spin-button {
380
+ [type="number"]::-webkit-inner-spin-button,
381
+ [type="number"]::-webkit-outer-spin-button {
352
382
  height: auto;
353
383
  }
354
384
 
385
+ /**
386
+ * 1. Correct the odd appearance in Chrome and Safari.
387
+ * 2. Correct the outline style in Safari.
388
+ */
389
+
390
+ [type="search"] {
391
+ -webkit-appearance: textfield; /* 1 */
392
+ outline-offset: -2px; /* 2 */
393
+ }
394
+
355
395
  /**
356
396
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
357
397
  */
358
398
 
359
- [type='search']::-webkit-search-cancel-button,
360
- [type='search']::-webkit-search-decoration {
399
+ [type="search"]::-webkit-search-cancel-button,
400
+ [type="search"]::-webkit-search-decoration {
361
401
  -webkit-appearance: none;
362
402
  }
363
403
 
@@ -100,6 +100,14 @@
100
100
  color: var(--color-primer-fg-disabled);
101
101
  }
102
102
  }
103
+
104
+ // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
105
+ &:focus,
106
+ &.focus {
107
+ border-color: var(--color-btn-focus-border);
108
+ outline: none;
109
+ box-shadow: var(--color-btn-focus-shadow);
110
+ }
103
111
  }
104
112
 
105
113
  // Primary button
@@ -136,6 +144,13 @@
136
144
  }
137
145
  }
138
146
 
147
+ &:focus,
148
+ &.focus {
149
+ background-color: var(--color-btn-primary-focus-bg);
150
+ border-color: var(--color-btn-primary-focus-border);
151
+ box-shadow: var(--color-btn-primary-focus-shadow);
152
+ }
153
+
139
154
  .Counter {
140
155
  color: inherit;
141
156
  background-color: var(--color-btn-primary-counter-bg);
@@ -189,6 +204,11 @@
189
204
  }
190
205
  }
191
206
 
207
+ &:focus {
208
+ border-color: var(--color-btn-outline-focus-border);
209
+ box-shadow: var(--color-btn-outline-focus-shadow);
210
+ }
211
+
192
212
  .Counter {
193
213
  color: inherit;
194
214
  background-color: var(--color-btn-outline-counter-bg);
@@ -246,6 +266,11 @@
246
266
  }
247
267
  }
248
268
 
269
+ &:focus {
270
+ border-color: var(--color-btn-danger-focus-border);
271
+ box-shadow: var(--color-btn-danger-focus-shadow);
272
+ }
273
+
249
274
  .Counter {
250
275
  color: inherit;
251
276
  background-color: var(--color-btn-danger-counter-bg);
package/buttons/misc.scss CHANGED
@@ -37,7 +37,6 @@
37
37
  color: var(--color-accent-fg);
38
38
  background-color: transparent; // Reset default gradient backgrounds and colors
39
39
  border: 0;
40
- border-radius: $border-radius;
41
40
  box-shadow: none;
42
41
 
43
42
  &:hover,
@@ -49,14 +48,15 @@
49
48
  }
50
49
 
51
50
  &:active,
51
+ &:focus,
52
52
  &.selected,
53
53
  &[aria-selected='true'],
54
54
  &.zeroclipboard-is-active {
55
55
  color: var(--color-accent-fg);
56
- background: none;
56
+ background-color: none;
57
57
  border-color: var(--color-btn-active-border);
58
-
59
- @include focusOutline;
58
+ outline: none;
59
+ box-shadow: var(--color-btn-focus-shadow);
60
60
  }
61
61
 
62
62
  &:active &.zeroclipboard-is-active {
@@ -89,18 +89,14 @@
89
89
  border: 0;
90
90
  box-shadow: none;
91
91
 
92
- &:hover {
93
- color: var(--color-accent-fg);
94
- }
92
+ &:hover { color: var(--color-accent-fg); }
95
93
 
96
94
  &.disabled,
97
95
  &[aria-disabled='true'] {
98
96
  color: var(--color-primer-fg-disabled);
99
97
  cursor: default;
100
98
 
101
- &:hover {
102
- color: var(--color-primer-fg-disabled);
103
- }
99
+ &:hover { color: var(--color-primer-fg-disabled); }
104
100
  }
105
101
  }
106
102
 
@@ -116,13 +112,18 @@
116
112
  color: var(--color-fg-muted);
117
113
  background: transparent;
118
114
  border: 0;
115
+ outline: none;
119
116
 
120
117
  &:hover {
121
118
  color: var(--color-fg-default);
122
119
  }
123
120
 
124
- &:active {
125
- @include focusOutline;
121
+ &:active,
122
+ &:focus {
123
+ color: var(--color-fg-muted);
124
+ border-color: var(--color-btn-active-border);
125
+ outline: none;
126
+ box-shadow: var(--color-btn-focus-shadow);
126
127
  }
127
128
  }
128
129
 
@@ -215,4 +216,10 @@
215
216
  color: var(--color-accent-fg);
216
217
  cursor: pointer;
217
218
  }
219
+
220
+ &:focus {
221
+ z-index: 1;
222
+ outline: 0;
223
+ box-shadow: var(--color-primer-shadow-focus);
224
+ }
218
225
  }
@@ -1,2 +1,2 @@
1
- .ActionList{padding:8px}.ActionList--full{padding:0}.ActionList--divided .ActionList-item-label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item--navActive .ActionList-item-label::before,.ActionList--divided .ActionList-item--navActive+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList--tree{--ActionList-tree-depth: 1}.ActionList--tree .ActionList-item--subItem>.ActionList-content{font-size:14px}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup{position:relative}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:calc(8px * var(--ActionList-tree-depth))}.ActionList--tree .ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(0deg)}.ActionList--tree .ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(-90deg)}.ActionList--tree .ActionList-item--hasSubItem .ActionList-item--subItem:not(.ActionList-item--hasSubItem) .ActionList-content>span:first-child{padding-left:24px}.ActionList--tree>[aria-level="1"].ActionList-item--hasSubItem>.ActionList--subGroup::before{position:absolute;left:16px;width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--tree .ActionList-item--hasSubItem:not([aria-level="1"])>.ActionList--subGroup::before{position:absolute;left:calc(8px * (var(--ActionList-tree-depth)) + 7px);width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList-item{position:relative;list-style:none;background-color:transparent;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-content,.ActionList-item:active .ActionList-content{text-decoration:none}.ActionList-item:focus,.ActionList-item:focus-within{position:relative;z-index:1;outline:2px solid var(--color-accent-fg);outline-offset:2px}.ActionList-item:not(.ActionList-item--hasSubItem):hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--hasSubItem):active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{box-shadow:inset 0 0 0 rgba(0,0,0,.04);transform:scale(1)}100%{box-shadow:inset 0 3px 9px rgba(0,0,0,.04);transform:scale(0.97)}}.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--subItem) .ActionList-item-label{font-weight:600}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:24px}.ActionList-item[aria-expanded] .ActionList-content--visual16+.ActionList--subGroup .ActionList-content{padding-left:32px}.ActionList-item[aria-expanded] .ActionList-content--visual20+.ActionList--subGroup .ActionList-content{padding-left:36px}.ActionList-item[aria-expanded] .ActionList-content--visual24+.ActionList--subGroup .ActionList-content{padding-left:40px}.ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-item[aria-expanded=true] .ActionList--subGroup{display:block}.ActionList-item[aria-expanded=true].ActionList-item--hasActiveSubItem>.ActionList-content>.ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-item[aria-expanded=false] .ActionList--subGroup{display:none}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::before,.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectCheckmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectCheckmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{visibility:hidden;transition:visibility 0s linear 200ms;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-label{color:var(--color-danger-fg)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{color:var(--color-danger-fg)}@media(hover: hover)and (pointer: fine){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item[aria-disabled=true] .ActionList-item-label,.ActionList-item[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-item[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover)and (pointer: fine){.ActionList-item[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}.ActionList-item .ActionList{padding:unset}.ActionList-content{position:relative;display:grid;padding:6px 8px;font-size:14px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;border-radius:6px;transition:background 33.333ms linear;grid-template-rows:min-content;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0, auto) min-content min-content;align-items:start}.ActionList-content>:not(:last-child){margin-right:8px}.ActionList-content.ActionList-content--sizeMedium{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}.ActionList-content.ActionList-content--fontSmall{font-size:12px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.ActionList-content.ActionList-content--blockDescription .ActionList-item-visual{place-self:start}.ActionList-item-action--leading{grid-area:leadingAction}.ActionList-item-visual--leading{grid-area:leadingVisual}.ActionList-item-label{grid-area:label}.ActionList-item-visual--trailing{grid-area:trailingVisual}.ActionList-item-action--trailing{grid-area:trailingAction}.ActionList-item-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-visual,.ActionList-item-action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-label{position:relative;font-weight:400;line-height:20px;color:var(--color-fg-default)}.ActionList-item-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionList-item--subItem>.ActionList-content{font-size:12px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
1
+ .ActionList{padding:8px}.ActionList--full{padding:0}.ActionList--divided .ActionList-item-label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item--navActive .ActionList-item-label::before,.ActionList--divided .ActionList-item--navActive+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList--tree{--ActionList-tree-depth: 1}.ActionList--tree .ActionList-item--subItem>.ActionList-content{font-size:14px}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup{position:relative}.ActionList--tree .ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:calc(8px * var(--ActionList-tree-depth))}.ActionList--tree .ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(0deg)}.ActionList--tree .ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(-90deg)}.ActionList--tree .ActionList-item--hasSubItem .ActionList-item--subItem:not(.ActionList-item--hasSubItem) .ActionList-content>span:first-child{padding-left:24px}.ActionList--tree>[aria-level="1"].ActionList-item--hasSubItem>.ActionList--subGroup::before{position:absolute;left:16px;width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--tree .ActionList-item--hasSubItem:not([aria-level="1"])>.ActionList--subGroup::before{position:absolute;left:calc(8px * (var(--ActionList-tree-depth)) + 7px);width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList-item{position:relative;list-style:none;background-color:transparent;border-radius:6px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-content,.ActionList-item:active .ActionList-content{text-decoration:none}@media(hover: hover){.ActionList-item:not(.ActionList-item--hasSubItem):hover,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):hover:not(.ActionList-item--navActive),.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover:not(.ActionList-item--navActive){outline:solid 1px transparent;outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--color-action-list-item-default-active-border)}}.ActionList-item:not(.ActionList-item--hasSubItem):active,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{background:var(--color-action-list-item-default-active-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):active:not(.ActionList-item--navActive),.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active:not(.ActionList-item--navActive){outline:solid 1px transparent;outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--color-action-list-item-default-active-border)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--hasSubItem):active,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{transform:scale(1)}100%{transform:scale(0.97)}}@media(hover: hover){.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover+.ActionList-item .ActionList-item-label::before{visibility:hidden}}.ActionList-item:not(.ActionList-item--hasSubItem):active .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active+.ActionList-item .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content{z-index:1}@media(hover: hover){.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{background-color:var(--color-action-list-item-default-active-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--subItem) .ActionList-item-label{font-weight:600}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}@media(hover: hover){.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-expanded] .ActionList--subGroup{transition:opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),transform 160ms cubic-bezier(0.25, 1, 0.5, 1)}}.ActionList-item[aria-expanded] .ActionList--subGroup .ActionList-content{padding-left:24px}.ActionList-item[aria-expanded] .ActionList-content--visual16+.ActionList--subGroup .ActionList-content{padding-left:32px}.ActionList-item[aria-expanded] .ActionList-content--visual20+.ActionList--subGroup .ActionList-content{padding-left:36px}.ActionList-item[aria-expanded] .ActionList-content--visual24+.ActionList--subGroup .ActionList-content{padding-left:40px}.ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-item[aria-expanded=true] .ActionList--subGroup{height:auto;overflow:visible;visibility:visible;opacity:1;transform:translateY(0)}.ActionList-item[aria-expanded=true].ActionList-item--hasActiveSubItem>.ActionList-content>.ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-item[aria-expanded=false] .ActionList--subGroup{height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-16px)}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::before,.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectCheckmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectCheckmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{visibility:hidden;transition:visibility 0s linear 200ms;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-label{color:var(--color-danger-fg)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{color:var(--color-danger-fg)}@media(hover: hover){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item[aria-disabled=true] .ActionList-item-label,.ActionList-item[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-item[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover){.ActionList-item[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}.ActionList-item .ActionList{padding:unset}.ActionList-content{position:relative;display:grid;padding:6px 8px;font-size:14px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:6px;transition:background 33.333ms linear;grid-template-rows:min-content;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0, auto) min-content min-content;align-items:start}.ActionList-content>:not(:last-child){margin-right:8px}.ActionList-content:focus-visible{position:relative;z-index:1;outline:none;box-shadow:0 0 0 2px var(--color-accent-fg)}.ActionList-content.ActionList-content--sizeMedium{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}.ActionList-content.ActionList-content--fontSmall{font-size:12px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.ActionList-content.ActionList-content--blockDescription .ActionList-item-visual{place-self:start}.ActionList-item-action--leading{grid-area:leadingAction}.ActionList-item-visual--leading{grid-area:leadingVisual}.ActionList-item-label{grid-area:label}.ActionList-item-visual--trailing{grid-area:trailingVisual}.ActionList-item-action--trailing{grid-area:trailingAction}.ActionList-item-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-visual,.ActionList-item-action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-label{position:relative;font-weight:400;line-height:20px;color:var(--color-fg-default)}.ActionList-item-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionList-item--subItem>.ActionList-content{font-size:12px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
2
2
  /*# sourceMappingURL=actionlist.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}
1
+ {"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}
@@ -1 +1 @@
1
- {"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AA4gBA,OAAA,iBACE,CAAA,iBAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA","file":"alerts.css"}
1
+ {"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AAqgBA,OAAA,iBACE,CAAA,iBAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA","file":"alerts.css"}