@primer/css 0.0.0-20220118010009 → 0.0.0-20220118041832

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 (20) hide show
  1. package/CHANGELOG.md +2 -8
  2. package/actionlist/action-list-item.scss +11 -28
  3. package/button-refactor/ButtonsLinksAPI.md +127 -0
  4. package/button-refactor/button-styled-as-link.scss +0 -0
  5. package/button-refactor/button.scss +204 -0
  6. package/button-refactor/icon-button.scss +10 -0
  7. package/button-refactor/link-styled-as-button.scss +0 -0
  8. package/button-refactor/link.scss +61 -0
  9. package/core/index.scss +5 -1
  10. package/dist/actionlist.css +1 -1
  11. package/dist/actionlist.css.map +1 -1
  12. package/dist/core.css +1 -1
  13. package/dist/core.css.map +1 -1
  14. package/dist/meta.json +22 -22
  15. package/dist/primer.css +1 -1
  16. package/dist/primer.css.map +1 -1
  17. package/dist/stats/actionlist.json +1 -1
  18. package/dist/stats/core.json +1 -1
  19. package/dist/stats/primer.json +1 -1
  20. package/package.json +1 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,6 @@
1
1
  # @primer/css
2
2
 
3
- ## 0.0.0-20220118010009
4
-
5
- ### Patch Changes
6
-
7
- - Fake entry to force publishing
8
-
9
- ## 19.2.0
3
+ ## 0.0.0-20220118041832
10
4
 
11
5
  ### Minor Changes
12
6
 
@@ -18,7 +12,7 @@
18
12
 
19
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.
20
14
 
21
- - [#1856](https://github.com/primer/css/pull/1856) [`cbe3fb56`](https://github.com/primer/css/commit/cbe3fb56e4c7ee6bfe803eb0c15e15ab95d84157) Thanks [@langermank](https://github.com/langermank)! - ActionList item outlines for high contrast theme
15
+ - Fake entry to force publishing
22
16
 
23
17
  * [#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
24
18
 
package/actionlist/action-list-item.scss CHANGED
@@ -1,4 +1,4 @@
1
- // stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
1
+ // stylelint-disable max-nesting-depth, selector-max-specificity
2
2
 
3
3
  @mixin focusOutline {
4
4
  position: relative;
@@ -38,50 +38,34 @@
38
38
  }
39
39
 
40
40
  // only hover li without list as children
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 {
41
+ &:not(.ActionList-item--hasSubItem) {
44
42
  @media (hover: hover) {
45
43
  &:hover {
46
44
  cursor: pointer;
47
45
  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
46
  }
57
47
  }
58
48
 
59
49
  &:active {
60
50
  background: var(--color-action-list-item-default-active-bg);
61
51
 
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
-
70
52
  @media screen and (prefers-reduced-motion: no-preference) {
71
53
  animation: ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);
72
54
  }
73
55
 
56
+ // stylelint-disable primer/box-shadow
74
57
  @keyframes ActionList-item-active-bg {
75
58
  50% {
76
- // stylelint-disable-next-line primer/box-shadow
77
- box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);
59
+ box-shadow: inset 0 0 0 rgba(#000, 0.04);
78
60
  transform: scale(1);
79
61
  }
80
62
 
81
63
  100% {
64
+ box-shadow: inset 0 3px 9px rgba(#000, 0.04);
82
65
  transform: scale(0.97);
83
66
  }
84
67
  }
68
+ // stylelint-enable primer/box-shadow
85
69
  }
86
70
 
87
71
  // hide dividers
@@ -169,6 +153,7 @@
169
153
 
170
154
  // has 16px leading visual
171
155
  .ActionList-content--visual16 + .ActionList--subGroup {
156
+ // stylelint-disable-next-line selector-max-compound-selectors
172
157
  .ActionList-content {
173
158
  padding-left: $spacer-5;
174
159
  }
@@ -176,6 +161,7 @@
176
161
 
177
162
  // has 20px leading visual
178
163
  .ActionList-content--visual20 + .ActionList--subGroup {
164
+ // stylelint-disable-next-line selector-max-compound-selectors
179
165
  .ActionList-content {
180
166
  padding-left: $spacer-2 * 4.5; // 36px
181
167
  }
@@ -183,6 +169,7 @@
183
169
 
184
170
  // has 24px leading visual
185
171
  .ActionList-content--visual24 + .ActionList--subGroup {
172
+ // stylelint-disable-next-line selector-max-compound-selectors
186
173
  .ActionList-content {
187
174
  padding-left: $spacer-6;
188
175
  }
@@ -285,7 +272,8 @@
285
272
  .ActionList-item-multiSelectCheckmark {
286
273
  visibility: hidden;
287
274
  opacity: 0;
288
- transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
275
+ transition:
276
+ visibility 0 linear $actionList-item-checkmark-transition-timing,
289
277
  opacity $actionList-item-checkmark-transition-timing;
290
278
  }
291
279
 
@@ -494,11 +482,6 @@
494
482
  // stylelint-disable-next-line primer/spacing
495
483
  margin-left: $actionList-item-padding-horizontal;
496
484
  }
497
-
498
- // label wraps description to handle list dividers
499
- .ActionList-item-label {
500
- flex: 1 0 auto;
501
- }
502
485
  }
503
486
 
504
487
  // description
package/button-refactor/ButtonsLinksAPI.md ADDED
@@ -0,0 +1,127 @@
1
+ # Button and Link component APIs
2
+ Button and Link has been discussed in a number of issues and discussions over past few years. I went through the list below, took note of their purpose and started compiling a new API spec. This doc is is meant to be collaborative and accompany Storybook docs while we work through a final API recommendation. Once we have a solid plan, this can move into an issue and be delegated across frameworks.
3
+
4
+ Existing issues
5
+ [x] https://github.com/github/primer/issues/141
6
+ - Accessory button component, should reconcile with reaction button (sister component to Button)
7
+ [x] https://github.com/github/primer/issues/220
8
+ - Tracking issue, mentions Button in the context of API consistency
9
+ [x] https://github.com/github/primer/issues/253
10
+ - Button audit, anatomy spec, design considerations, some button link discussion, icon buttons (this issue is very informative!)
11
+ [x] https://github.com/github/primer/issues/263
12
+ - More design discussion, particularly focused on outline button
13
+ [x] https://github.com/github/primer/issues/272
14
+ - Make icon only buttons square
15
+ [x] https://github.com/github/primer/issues/321
16
+ - Super specific button use case?
17
+ [x] https://github.com/github/primer/issues/350
18
+ - a11y audit with task list for PVC
19
+ [x] https://github.com/github/primer/issues/382
20
+ - React button refactor
21
+ [x] https://github.com/github/primer/issues/468
22
+ - Visual bugs (colors, state)
23
+ [x] https://github.com/github/primer/discussions/87
24
+ - Discussion about accessory buttons
25
+ [x] https://github.com/github/primer/discussions/211
26
+ - Open ended discussion about primary button as dropdown
27
+ [x] https://github.com/github/primer/discussions/459
28
+ - Allie's thoughts on limiting icon only buttons and working towards encouraging visual labels
29
+ [x] https://github.com/github/primer/discussions/477
30
+ - Buttons styled as links, links styled as buttons
31
+
32
+ ## Specific notes from previous bugs to keep in mind
33
+ [] Check all button variants have shadow present
34
+ [] Ensure icon colors are consistent in hover states
35
+ [] Ensure icon colors are consistent with variants in all states
36
+ [] Ensure disabled colors are consistent across frameworks
37
+
38
+ ## Component list
39
+ A few discussions were about naming and prop drilling (source here). We found that for Button to handle all of its use cases, we would need a large number of props– some conditional and dependent on one another. When that happens, it's typically a sign that the logic should be separated into another component.
40
+
41
+ | Component | Description |
42
+ | -- | -- |
43
+ | Button | standard `button` with variants, size, visual slots |
44
+ | IconButton | `button` with icon only (square) and required `aria-label` |
45
+ | ButtonStyledAsLink | `button` that visually looks like a link |
46
+ | ReactionButton | `button` snowflake with specific styles/interaction design |
47
+ | ButtonGroup | wrapper to handle grouping buttons |
48
+ | Link | `a` with variants, optional trailing visuals |
49
+ | LinkStyledAsButton | `a` with button variants, required trailing visuals |
50
+
51
+ ## Component API breakdown
52
+
53
+ ### Button
54
+
55
+ | prop | type | options | default | notes |
56
+ | -- | -- | -- | -- | -- |
57
+ | `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
58
+ | `size` | one-of string | `small` `default` `large` | `default | |
59
+ | `label` | string | button description | null | |
60
+ | `aria-label` | string | button description for screen readers | null | |
61
+ | `aria-pressed` | boolean | `true/false` | `false` | |
62
+ | `leadingVisual` | children (slot) | octicon | null | |
63
+ | `trailingVisual` | children (slot) | octicon | null | |
64
+ | `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
65
+ | `fullWidth` | boolean | `true/false` | `false` | |
66
+ | `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
67
+
68
+
69
+ ### LinkStyledAsButton
70
+
71
+ | prop | type | options | default | notes |
72
+ | -- | -- | -- | -- | -- |
73
+ | `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
74
+ | `size` | one-of string | `small` `default` `large` | `default | |
75
+ | `label` | string | button description | null | |
76
+ | `leadingVisual` | children (slot) | octicon | null | |
77
+ | `trailingVisual` | children (slot) | octicon | null | |
78
+ | `trailingAction` | children (slot) | octicon | null | slot for caret to maintain leading/trailing visuals if they exist |
79
+ | `fullWidth` | boolean | `true/false` | `false` | |
80
+ | `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | lock icon to the text label or to the button container |
81
+
82
+ ### IconButton
83
+
84
+ | prop | type | options | default | notes |
85
+ | -- | -- | -- | -- | -- |
86
+ | `variant` | one-of string | `primary` `secondary` `danger` `outline`? | `secondary` | |
87
+ | `size` | one-of string | `small` `default` `large` | `default | |
88
+ | `aria-label` | string | button description for screen readers (required) | null | |
89
+ | `visual` | children (slot) | octicon | null | |
90
+ | `aria-pressed` | boolean | `true/false` | `false` | |
91
+
92
+ ### Link
93
+
94
+ | prop | type | options | default | notes |
95
+ | -- | -- | -- | -- | -- |
96
+ | `variant` | one-of string | ?? we need to work on this (subtle and or muted) | |
97
+ | `label` | string | button description | null | |
98
+ | `showTrailingVisual` | boolean | specific octicon for new tab or new page (or anchor?) | null | |
99
+
100
+ ### ButtonStyledAsLink
101
+
102
+ | prop | type | options | default | notes |
103
+ | -- | -- | -- | -- | -- |
104
+ | `variant` | one-of string | see above confusion | `secondary` | |
105
+ | `size` | one-of string | `small` `default` `large` | `default | |
106
+ | `label` | string | button description | null | |
107
+ | `aria-label` | string | button description for screen readers | null | |
108
+ | `aria-pressed` | boolean | `true/false` | `false` | |
109
+ | `leadingVisual` | children (slot) | octicon | null | |
110
+ | `trailingVisual` | children (slot) | octicon | null | |
111
+ | `fullWidth` | boolean | `true/false` | `false` | |
112
+ | `visualPosition` | one-of string | `fixed` `some-other-word` | `fixed` | I think this should be fixed for link styles (so maybe we dont need this prop) |
113
+
114
+ ### ButtonGroup
115
+
116
+ | prop | type | options | default | notes |
117
+ | -- | -- | -- | -- | -- |
118
+ | | | | |
119
+
120
+ ## Notes
121
+ [] Should Button have a `secondary` variant, or should it be the default with no additional class?
122
+ [] How granular should icon positioning be?
123
+ - If both trailingVisual and trailingAction exist, and visualPosition is `fixed`, the trailingVisual will "lock" to the trailingAction (unless we are more granular and specify different lock scenarios as props)
124
+ - One idea would be to always lock trailingAction (always affix it to the right of a button which will only be visible on full width) and maintain visualPosition prop _only_ for visuals
125
+ [] Thoughts on buttons with trailingAction having less margin-right?
126
+ [] Should we think about underlining links with this work, or is that scope creep?
127
+ [] Button styled as link is trickiest, and we need to decide how much logic that component can have compared to Button
package/button-refactor/button-styled-as-link.scss ADDED
File without changes
package/button-refactor/button.scss ADDED
@@ -0,0 +1,204 @@
1
+ .Button {
2
+ position: relative;
3
+ font-size: $body-font-size;
4
+ font-weight: $font-weight-semibold;
5
+ cursor: pointer;
6
+ user-select: none;
7
+ background-color: transparent;
8
+ border: $border-width $border-style;
9
+ border-color: transparent;
10
+ border-radius: $border-radius;
11
+ color: var(--color-btn-text);
12
+ transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
13
+ transition-property: color, background-color, border-color;
14
+ height: 32px;
15
+ padding: 0 16px;
16
+
17
+ &:not(.Button--iconOnly) {
18
+ display: grid;
19
+ grid-template-areas: 'leadingVisual text trailingVisual trailingAction';
20
+ grid-template-columns: min-content minmax(0, auto) min-content min-content;
21
+ align-items: center;
22
+ }
23
+
24
+ // column-gap persists with empty grid-areas, margin applies only when children exist
25
+ > :not(:last-child) {
26
+ margin-right: $spacer-2;
27
+ }
28
+
29
+ &:hover,
30
+ &.hover,
31
+ [open] > & {
32
+ background-color: var(--color-btn-hover-bg);
33
+ border-color: var(--color-btn-hover-border);
34
+ transition-duration: 0.1s;
35
+ }
36
+
37
+ &:active {
38
+ background-color: var(--color-btn-active-bg);
39
+ border-color: var(--color-btn-active-border);
40
+ transition: none;
41
+ }
42
+
43
+ &.Button--pressed,
44
+ &[aria-pressed='true'] {
45
+ background-color: var(--color-btn-selected-bg);
46
+ box-shadow: var(--color-primer-shadow-inset);
47
+ }
48
+
49
+ &:disabled,
50
+ &.disabled,
51
+ &[aria-disabled='true'] {
52
+ color: var(--color-primer-fg-disabled);
53
+ background-color: var(--color-btn-bg);
54
+ border-color: var(--color-btn-border);
55
+ fill: var(--color-primer-fg-disabled);
56
+ }
57
+
58
+ &.Button--small {
59
+ height: 28px;
60
+ font-size: $font-size-small;
61
+ }
62
+
63
+ &.Button--large {
64
+ }
65
+
66
+ &.Button--fullWidth {
67
+ width: 100%;
68
+
69
+ .Button-trailingVisual {
70
+ margin-left: auto;
71
+ }
72
+ }
73
+
74
+ &.Button--default {
75
+ color: var(--color-btn-text);
76
+ background-color: var(--color-btn-bg);
77
+ border: $border-width $border-style;
78
+ border-color: var(--color-btn-border);
79
+ box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
80
+ }
81
+
82
+ &.Button--primary {
83
+ color: var(--color-btn-primary-text);
84
+ background-color: var(--color-btn-primary-bg);
85
+ border-color: var(--color-btn-primary-border);
86
+ box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
87
+
88
+ &:hover,
89
+ &.hover,
90
+ [open] > & {
91
+ background-color: var(--color-btn-primary-hover-bg);
92
+ border-color: var(--color-btn-primary-hover-border);
93
+ }
94
+
95
+ &:active,
96
+ &.Button--pressed,
97
+ &[aria-pressed='true'] {
98
+ background-color: var(--color-btn-primary-selected-bg);
99
+ box-shadow: var(--color-btn-primary-selected-shadow);
100
+ }
101
+
102
+ &:disabled,
103
+ &.disabled,
104
+ &[aria-disabled='true'] {
105
+ color: var(--color-btn-primary-disabled-text);
106
+ background-color: var(--color-btn-primary-disabled-bg);
107
+ border-color: var(--color-btn-primary-disabled-border);
108
+ fill: var(--color-btn-primary-disabled-text);
109
+ }
110
+ }
111
+
112
+ &.Button--secondary {
113
+ }
114
+
115
+ &.Button--outline {
116
+ color: var(--color-btn-outline-text);
117
+
118
+ &:hover,
119
+ [open] > & {
120
+ color: var(--color-btn-outline-hover-text);
121
+ background-color: var(--color-btn-outline-hover-bg);
122
+ border-color: var(--color-btn-outline-hover-border);
123
+ box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
124
+ }
125
+
126
+ &:active,
127
+ &.Button--pressed,
128
+ &[aria-pressed='true'] {
129
+ color: var(--color-btn-outline-selected-text);
130
+ background-color: var(--color-btn-outline-selected-bg);
131
+ border-color: var(--color-btn-outline-selected-border);
132
+ box-shadow: var(--color-btn-outline-selected-shadow);
133
+ }
134
+
135
+ &:disabled,
136
+ &.disabled,
137
+ &[aria-disabled='true'] {
138
+ color: var(--color-btn-outline-disabled-text);
139
+ background-color: var(--color-btn-outline-disabled-bg);
140
+ border-color: var(--color-btn-border);
141
+ box-shadow: none;
142
+ }
143
+ }
144
+
145
+ &.Button--danger {
146
+ color: var(--color-btn-danger-text);
147
+
148
+ .octicon {
149
+ color: var(--color-btn-danger-icon);
150
+ }
151
+
152
+ &:hover,
153
+ [open] > & {
154
+ color: var(--color-btn-danger-hover-text);
155
+ background-color: var(--color-btn-danger-hover-bg);
156
+ border-color: var(--color-btn-danger-hover-border);
157
+ box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
158
+ }
159
+
160
+ &:active,
161
+ &.Button--pressed,
162
+ &[aria-pressed='true'] {
163
+ color: var(--color-btn-danger-selected-text);
164
+ background-color: var(--color-btn-danger-selected-bg);
165
+ border-color: var(--color-btn-danger-selected-border);
166
+ box-shadow: var(--color-btn-danger-selected-shadow);
167
+ }
168
+
169
+ &:disabled,
170
+ &.disabled,
171
+ &[aria-disabled='true'] {
172
+ color: var(--color-btn-danger-disabled-text);
173
+ background-color: var(--color-btn-danger-disabled-bg);
174
+ border-color: var(--color-btn-border);
175
+ box-shadow: none;
176
+ }
177
+ }
178
+ }
179
+
180
+ .Button-label {
181
+ grid-area: text;
182
+ white-space: nowrap;
183
+ }
184
+
185
+ .Button-visual {
186
+ display: flex;
187
+ }
188
+
189
+ .Button-visual--fixed {
190
+ grid-template-columns: min-content min-content min-content min-content;
191
+ place-content: center;
192
+ }
193
+
194
+ .Button-leadingVisual {
195
+ grid-area: leadingVisual;
196
+ }
197
+
198
+ .Button-trailingVisual {
199
+ grid-area: trailingVisual;
200
+ }
201
+
202
+ .Button-trailingAction {
203
+ grid-area: trailingAction;
204
+ }
package/button-refactor/icon-button.scss ADDED
@@ -0,0 +1,10 @@
1
+ .Button--iconOnly {
2
+ display: grid;
3
+ place-content: center;
4
+ padding: unset;
5
+ width: 32px;
6
+
7
+ &.Button--small {
8
+ width: 28px;
9
+ }
10
+ }
package/button-refactor/link-styled-as-button.scss ADDED
File without changes
package/button-refactor/link.scss ADDED
@@ -0,0 +1,61 @@
1
+ // Links
2
+
3
+ .Link {
4
+ color: var(--color-accent-fg);
5
+
6
+ &:hover {
7
+ text-decoration: underline;
8
+ cursor: pointer;
9
+ }
10
+ }
11
+
12
+ .Link--trailingVisual {
13
+ display: flex;
14
+ flex-direction: row;
15
+ align-items: center;
16
+ gap: 4px;
17
+ }
18
+ // .Link--primary {
19
+ // color: var(--color-fg-default) !important;
20
+
21
+ // &:hover {
22
+ // color: var(--color-accent-fg) !important;
23
+ // }
24
+ // }
25
+
26
+ // .Link--secondary {
27
+ // color: var(--color-fg-muted) !important;
28
+
29
+ // &:hover {
30
+ // color: var(--color-accent-fg) !important;
31
+ // }
32
+ // }
33
+
34
+ // .Link--muted {
35
+ // color: var(--color-fg-muted) !important;
36
+
37
+ // &:hover {
38
+ // color: var(--color-accent-fg) !important;
39
+ // text-decoration: none;
40
+ // }
41
+ // }
42
+
43
+ // // Set the link color only on hover
44
+ // // Useful when you want only part of a link to turn blue on hover
45
+ // .Link--onHover {
46
+ // &:hover {
47
+ // color: var(--color-accent-fg) !important;
48
+ // text-decoration: underline;
49
+ // cursor: pointer;
50
+ // }
51
+ // }
52
+
53
+ // // When using a color utility class inside of a link class,
54
+ // // color should change with link on hover.
55
+ // .Link--secondary,
56
+ // .Link--primary,
57
+ // .Link--muted {
58
+ // &:hover [class*='color-text'] {
59
+ // color: inherit !important;
60
+ // }
61
+ // }
package/core/index.scss CHANGED
@@ -24,6 +24,10 @@
24
24
  @import '../pagination/index.scss';
25
25
  @import '../tooltips/index.scss';
26
26
  @import '../truncate/index.scss';
27
-
27
+ @import '../button-refactor/button.scss';
28
+ @import '../button-refactor/link.scss';
29
+ @import '../button-refactor/icon-button.scss';
30
+ @import '../button-refactor/button-styled-as-link.scss';
31
+ @import '../button-refactor/link-styled-as-button.scss';
28
32
  // Utilities always go last so that they can override components
29
33
  @import '../utilities/index.scss';
package/dist/actionlist.css CHANGED
@@ -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;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%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);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-descriptionWrap--inline .ActionList-item-label{flex:1 0 auto}.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{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)}}@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{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{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 */
package/dist/actionlist.css.map CHANGED
@@ -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"}