openproject-primer_view_components 0.19.0 → 0.20.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +30 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +3 -2
  4. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  5. data/app/assets/javascripts/app/components/primer/scrollable_region.d.ts +13 -0
  6. data/app/assets/javascripts/primer_view_components.js +1 -1
  7. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  8. data/app/assets/styles/primer_view_components.css +1 -1
  9. data/app/assets/styles/primer_view_components.css.map +1 -1
  10. data/app/components/primer/alpha/action_bar.css +1 -1
  11. data/app/components/primer/alpha/action_bar.css.map +1 -1
  12. data/app/components/primer/alpha/action_bar.pcss +8 -6
  13. data/app/components/primer/alpha/action_bar_element.d.ts +3 -2
  14. data/app/components/primer/alpha/action_bar_element.js +80 -97
  15. data/app/components/primer/alpha/action_bar_element.ts +84 -89
  16. data/app/components/primer/alpha/action_list.css +1 -1
  17. data/app/components/primer/alpha/action_list.css.map +1 -1
  18. data/app/components/primer/alpha/action_menu/action_menu_element.js +7 -4
  19. data/app/components/primer/alpha/action_menu/action_menu_element.ts +5 -1
  20. data/app/components/primer/alpha/banner.html.erb +1 -1
  21. data/app/components/primer/alpha/banner.rb +5 -1
  22. data/app/components/primer/alpha/dialog.html.erb +3 -1
  23. data/app/components/primer/alpha/dialog.rb +5 -1
  24. data/app/components/primer/alpha/layout.css +1 -1
  25. data/app/components/primer/alpha/layout.css.map +1 -1
  26. data/app/components/primer/alpha/modal_dialog.ts +1 -1
  27. data/app/components/primer/alpha/overlay.css +1 -1
  28. data/app/components/primer/alpha/overlay.css.json +2 -1
  29. data/app/components/primer/alpha/overlay.css.map +1 -1
  30. data/app/components/primer/alpha/overlay.pcss +6 -0
  31. data/app/components/primer/alpha/text_field.css +1 -1
  32. data/app/components/primer/alpha/text_field.css.map +1 -1
  33. data/app/components/primer/alpha/text_field.pcss +4 -3
  34. data/app/components/primer/alpha/tool_tip.js +14 -1
  35. data/app/components/primer/alpha/tool_tip.ts +15 -1
  36. data/app/components/primer/alpha/underline_nav.css +1 -1
  37. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  38. data/app/components/primer/base_component.rb +20 -18
  39. data/app/components/primer/beta/button.css +1 -1
  40. data/app/components/primer/beta/button.css.map +1 -1
  41. data/app/components/primer/primer.d.ts +1 -0
  42. data/app/components/primer/primer.js +1 -0
  43. data/app/components/primer/primer.ts +1 -0
  44. data/app/components/primer/scrollable_region.d.ts +13 -0
  45. data/app/components/primer/scrollable_region.js +52 -0
  46. data/app/components/primer/scrollable_region.ts +48 -0
  47. data/lib/primer/classify/utilities.rb +3 -4
  48. data/lib/primer/view_components/version.rb +1 -1
  49. data/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb +11 -0
  50. data/previews/primer/alpha/action_menu_preview.rb +7 -0
  51. data/previews/primer/alpha/banner_preview.rb +3 -2
  52. metadata +7 -2
@@ -1 +1 @@
1
- .ActionBar{display:flex!important;flex-grow:1;flex-shrink:1;justify-content:flex-end;min-width:calc(var(--control-medium-size,2rem)*3);overflow:hidden;position:relative}.ActionBar,.ActionBar-item-container{align-items:center;box-sizing:initial}.ActionBar-item-container{display:flex;flex-grow:0;flex-shrink:0}.ActionBar-item{flex-shrink:0;position:relative}.ActionBar-more-menu{flex-shrink:0}.ActionBar--small{min-width:calc(var(--control-small-size,1.75rem)*3)}.ActionBar--large{min-width:calc(var(--control-large-size,2.5rem)*3)}.ActionBar-divider{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));height:calc(var(--control-medium-size,2rem)/2);margin:0 var(--controlStack-medium-gap-condensed,.5rem)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed,.5rem)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed,.5rem)}
1
+ .ActionBar{align-items:center;box-sizing:initial;display:flex!important;flex-grow:1;flex-shrink:1;justify-content:flex-end;min-width:calc(var(--control-medium-size,2rem)*3);overflow:hidden;position:relative}.ActionBar-item-container{box-sizing:initial;height:var(--control-medium-size,2rem);overflow:hidden}.ActionBar-item{float:left;position:relative}.ActionBar-more-menu{float:left}.ActionBar--small{min-width:calc(var(--control-small-size,1.75rem)*3)}.ActionBar--large{min-width:calc(var(--control-large-size,2.5rem)*3)}.ActionBar-divider{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));bottom:50%;float:left;height:calc(var(--control-medium-size,2rem)/2);margin:0 var(--controlStack-medium-gap-condensed,.5rem);top:50%;transform:translateY(-50%)}.ActionBar--small .ActionBar-divider{margin:0 var(--controlStack-small-gap-condensed,.5rem)}.ActionBar--large .ActionBar-divider{margin:0 var(--controlStack-large-gap-condensed,.5rem)}
@@ -1 +1 @@
1
- {"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WAEE,sBAAwB,CAGxB,WAAY,CACZ,aAAc,CAGd,wBAAyB,CANzB,iDAA+C,CAK/C,eAAgB,CAPhB,iBASF,CAEA,qCARE,kBAAmB,CAGnB,kBAWF,CANA,0BACE,YAAa,CAIb,WAAY,CADZ,aAEF,CAEA,gBAEE,aAAc,CADd,iBAEF,CAEA,qBACE,aACF,CAEA,kBACE,mDACF,CAEA,kBACE,kDACF,CAIA,mBAGE,8GAAmE,CAFnE,8CAA4C,CAC5C,uDAEF,CAEA,qCACE,sDACF,CAEA,qCACE,sDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar */\n.ActionBar {\n position: relative;\n display: flex !important;\n min-width: calc(var(--control-medium-size) * 3);\n align-items: center;\n flex-grow: 1;\n flex-shrink: 1;\n box-sizing: content-box;\n overflow: hidden;\n justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n display: flex;\n box-sizing: content-box;\n align-items: center;\n flex-shrink: 0;\n flex-grow: 0;\n}\n\n.ActionBar-item {\n position: relative;\n flex-shrink: 0;\n}\n\n.ActionBar-more-menu {\n flex-shrink: 0;\n}\n\n.ActionBar--small {\n min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n height: calc(var(--control-medium-size) / 2);\n margin: 0 var(--controlStack-medium-gap-condensed);\n border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n}\n\n.ActionBar--small .ActionBar-divider {\n margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}
1
+ {"version":3,"sources":["action_bar.pcss"],"names":[],"mappings":"AACA,WAIE,kBAAmB,CAGnB,kBAAuB,CALvB,sBAAwB,CAGxB,WAAY,CACZ,aAAc,CAGd,wBAAyB,CANzB,iDAA+C,CAK/C,eAAgB,CAPhB,iBASF,CAEA,0BACE,kBAAuB,CAEvB,sCAAkC,CADlC,eAEF,CAEA,gBAEE,UAAW,CADX,iBAEF,CAEA,qBACE,UACF,CAEA,kBACE,mDACF,CAEA,kBACE,kDACF,CAIA,mBAGE,8GAAmE,CAGnE,UAAW,CAFX,UAAW,CAHX,8CAA4C,CAC5C,uDAAkD,CAGlD,OAAQ,CAER,0BACF,CAEA,qCACE,sDACF,CAEA,qCACE,sDACF","file":"action_bar.css","sourcesContent":["/* CSS for ActionBar */\n.ActionBar {\n position: relative;\n display: flex !important;\n min-width: calc(var(--control-medium-size) * 3);\n align-items: center;\n flex-grow: 1;\n flex-shrink: 1;\n box-sizing: content-box;\n overflow: hidden;\n justify-content: flex-end;\n}\n\n.ActionBar-item-container {\n box-sizing: content-box;\n overflow: hidden;\n height: var(--control-medium-size);\n}\n\n.ActionBar-item {\n position: relative;\n float: left;\n}\n\n.ActionBar-more-menu {\n float: left;\n}\n\n.ActionBar--small {\n min-width: calc(var(--control-small-size) * 3);\n}\n\n.ActionBar--large {\n min-width: calc(var(--control-large-size) * 3);\n}\n\n/* Divider */\n\n.ActionBar-divider {\n height: calc(var(--control-medium-size) / 2);\n margin: 0 var(--controlStack-medium-gap-condensed);\n border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n float: left;\n top: 50%;\n bottom: 50%;\n transform: translateY(-50%);\n}\n\n.ActionBar--small .ActionBar-divider {\n margin: 0 var(--controlStack-small-gap-condensed);\n}\n\n.ActionBar--large .ActionBar-divider {\n margin: 0 var(--controlStack-large-gap-condensed);\n}\n"]}
@@ -12,20 +12,18 @@
12
12
  }
13
13
 
14
14
  .ActionBar-item-container {
15
- display: flex;
16
15
  box-sizing: content-box;
17
- align-items: center;
18
- flex-shrink: 0;
19
- flex-grow: 0;
16
+ overflow: hidden;
17
+ height: var(--control-medium-size);
20
18
  }
21
19
 
22
20
  .ActionBar-item {
23
21
  position: relative;
24
- flex-shrink: 0;
22
+ float: left;
25
23
  }
26
24
 
27
25
  .ActionBar-more-menu {
28
- flex-shrink: 0;
26
+ float: left;
29
27
  }
30
28
 
31
29
  .ActionBar--small {
@@ -42,6 +40,10 @@
42
40
  height: calc(var(--control-medium-size) / 2);
43
41
  margin: 0 var(--controlStack-medium-gap-condensed);
44
42
  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
43
+ float: left;
44
+ top: 50%;
45
+ bottom: 50%;
46
+ transform: translateY(-50%);
45
47
  }
46
48
 
47
49
  .ActionBar--small .ActionBar-divider {
@@ -1,12 +1,13 @@
1
+ import { ActionMenuElement } from './action_menu/action_menu_element';
1
2
  declare class ActionBarElement extends HTMLElement {
2
3
  #private;
3
4
  items: HTMLElement[];
4
5
  itemContainer: HTMLElement;
5
- moreMenu: HTMLElement;
6
+ moreMenu: ActionMenuElement;
6
7
  connectedCallback(): void;
7
8
  disconnectedCallback(): void;
8
9
  menuItemClick(event: Event): void;
9
- update(rect?: DOMRect): void;
10
+ update(): void;
10
11
  }
11
12
  declare global {
12
13
  interface Window {
@@ -4,18 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
+ };
7
12
  var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
8
13
  if (kind === "m") throw new TypeError("Private method is not writable");
9
14
  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
10
15
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
11
16
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
12
17
  };
13
- var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
14
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
15
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
16
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
17
- };
18
- var _ActionBarElement_instances, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_focusZoneAbortController, _ActionBarElement_isVisible, _ActionBarElement_itemGap, _ActionBarElement_availableSpace, _ActionBarElement_menuSpace, _ActionBarElement_shrink, _ActionBarElement_grow, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
18
+ var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get, _ActionBarElement_eachItem;
19
19
  import { controller, targets, target } from '@github/catalyst';
20
20
  import { focusZone, FocusKeys } from '@primer/behaviors';
21
21
  const instersectionObserver = new IntersectionObserver(entries => {
@@ -30,35 +30,43 @@ const resizeObserver = new ResizeObserver(entries => {
30
30
  for (const entry of entries) {
31
31
  const action = entry.target;
32
32
  if (action instanceof ActionBarElement) {
33
- action.update(entry.contentRect);
33
+ action.update();
34
34
  }
35
35
  }
36
36
  });
37
+ // These are definitely used, but eslint is dumb apparently
38
+ // eslint-disable-next-line no-unused-vars
39
+ var ItemType;
40
+ (function (ItemType) {
41
+ // eslint-disable-next-line no-unused-vars
42
+ ItemType[ItemType["Item"] = 0] = "Item";
43
+ // eslint-disable-next-line no-unused-vars
44
+ ItemType[ItemType["Divider"] = 1] = "Divider";
45
+ })(ItemType || (ItemType = {}));
37
46
  let ActionBarElement = class ActionBarElement extends HTMLElement {
38
47
  constructor() {
39
48
  super(...arguments);
40
49
  _ActionBarElement_instances.add(this);
41
- _ActionBarElement_initialBarWidth.set(this, void 0);
42
- _ActionBarElement_previousBarWidth.set(this, void 0);
43
50
  _ActionBarElement_focusZoneAbortController.set(this, null);
44
51
  }
45
52
  connectedCallback() {
46
- var _a, _b, _c, _d;
47
- __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, (_a = this.offsetWidth) !== null && _a !== void 0 ? _a : Infinity, "f");
48
- __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, (_b = this.itemContainer.offsetWidth) !== null && _b !== void 0 ? _b : Infinity, "f");
53
+ var _a, _b;
49
54
  // Calculate the width of all the items before hiding anything
50
55
  for (const item of this.items) {
51
56
  const width = item.getBoundingClientRect().width;
52
- const marginLeft = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginLeft, 10);
53
- const marginRight = parseInt((_d = window.getComputedStyle(item)) === null || _d === void 0 ? void 0 : _d.marginRight, 10);
57
+ const marginLeft = parseInt((_a = window.getComputedStyle(item)) === null || _a === void 0 ? void 0 : _a.marginLeft, 10);
58
+ const marginRight = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginRight, 10);
54
59
  item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
55
60
  }
56
61
  resizeObserver.observe(this);
57
62
  instersectionObserver.observe(this);
58
- setTimeout(() => {
63
+ requestAnimationFrame(() => {
64
+ // This overflow visible is needed for browsers that don't support PopoverElement
65
+ // to ensure the menu and tooltips are visible when the action bar is in a collapsed state
66
+ // once popover is fully supported we can remove this.style.overflow = 'visible'
59
67
  this.style.overflow = 'visible';
60
68
  this.update();
61
- }, 20); // Wait for the items to be rendered, making this really short to avoid a flash of unstyled content
69
+ });
62
70
  }
63
71
  disconnectedCallback() {
64
72
  resizeObserver.unobserve(this);
@@ -72,21 +80,37 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
72
80
  (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
73
81
  }
74
82
  }
75
- update(rect = this.getBoundingClientRect()) {
76
- // Only recalculate if the bar width changed
77
- if (rect.width <= __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f") || __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f") === 0) {
78
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrink).call(this);
79
- }
80
- else if (rect.width > __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f")) {
81
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_grow).call(this);
82
- }
83
- __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, rect.width, "f");
84
- if (rect.width <= __classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f")) {
85
- this.style.justifyContent = 'space-between';
86
- }
87
- else {
88
- this.style.justifyContent = 'flex-end';
89
- }
83
+ update() {
84
+ const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
85
+ if (!firstItem)
86
+ return;
87
+ const firstItemTop = firstItem.getBoundingClientRect().top;
88
+ let previousItemType = null;
89
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, index, type) => {
90
+ const itemTop = item.getBoundingClientRect().top;
91
+ if (type === ItemType.Item) {
92
+ if (itemTop > firstItemTop) {
93
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
94
+ if (this.moreMenu.hidden) {
95
+ this.moreMenu.hidden = false;
96
+ }
97
+ if (previousItemType === ItemType.Divider) {
98
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index - 1);
99
+ }
100
+ }
101
+ else {
102
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
103
+ if (index === this.items.length - 1) {
104
+ this.moreMenu.hidden = true;
105
+ }
106
+ if (previousItemType === ItemType.Divider) {
107
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index - 1);
108
+ }
109
+ }
110
+ }
111
+ previousItemType = type;
112
+ return true;
113
+ });
90
114
  if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
91
115
  __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
92
116
  }
@@ -94,88 +118,47 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
94
118
  bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
95
119
  focusOutBehavior: 'wrap',
96
120
  focusableElementFilter: element => {
97
- return __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_isVisible).call(this, element);
98
- }
121
+ const idx = this.items.indexOf(element.parentElement);
122
+ const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
123
+ const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
124
+ return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
125
+ },
99
126
  }), "f");
100
127
  }
101
128
  };
102
- _ActionBarElement_initialBarWidth = new WeakMap();
103
- _ActionBarElement_previousBarWidth = new WeakMap();
104
129
  _ActionBarElement_focusZoneAbortController = new WeakMap();
105
130
  _ActionBarElement_instances = new WeakSet();
106
- _ActionBarElement_isVisible = function _ActionBarElement_isVisible(element) {
107
- // Safari doesn't support `checkVisibility` yet.
108
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
109
- // @ts-ignore
110
- if (typeof element.checkVisibility === 'function')
111
- return element.checkVisibility();
112
- return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight);
113
- };
114
- _ActionBarElement_itemGap = function _ActionBarElement_itemGap() {
115
- var _a;
116
- return parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0;
117
- };
118
- _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
119
- // Get the offset of the item container from the container edge
120
- return this.offsetWidth - this.itemContainer.offsetWidth;
121
- };
122
- _ActionBarElement_menuSpace = function _ActionBarElement_menuSpace() {
123
- if (this.moreMenu.hidden) {
124
- return 0;
125
- }
126
- return this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_itemGap).call(this);
127
- };
128
- _ActionBarElement_shrink = function _ActionBarElement_shrink() {
129
- if (this.items[0].hidden) {
130
- return;
131
- }
132
- let index = this.items.length - 1;
133
- for (const item of this.items.reverse()) {
134
- if (!item.hidden && __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this)) {
135
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
131
+ _ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
132
+ let foundItem = null;
133
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, _index, type) => {
134
+ if (type === ItemType.Item) {
135
+ foundItem = item;
136
+ return false;
136
137
  }
137
- else if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this)) {
138
- return;
139
- }
140
- index--;
141
- }
142
- };
143
- _ActionBarElement_grow = function _ActionBarElement_grow() {
144
- // If last item is visible, there is no need to grow
145
- if (!this.items[this.items.length - 1].hidden) {
146
- return;
147
- }
148
- let index = 0;
149
- for (const item of this.items) {
150
- if (item.hidden) {
151
- const offsetWidth = Number(item.getAttribute('data-offset-width'));
152
- if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this) + offsetWidth || index === this.items.length - 1) {
153
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
154
- }
155
- else {
156
- return;
157
- }
158
- }
159
- index++;
160
- }
161
- if (!this.items[this.items.length - 1].hidden) {
162
- this.moreMenu.hidden = true;
163
- }
138
+ return true;
139
+ });
140
+ return foundItem;
164
141
  };
165
142
  _ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
166
- this.items[index].hidden = false;
143
+ this.items[index].style.setProperty('visibility', 'visible');
167
144
  __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = true;
168
145
  };
169
146
  _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
170
- this.items[index].hidden = true;
147
+ this.items[index].style.setProperty('visibility', 'hidden');
171
148
  __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = false;
172
- if (this.moreMenu.hidden) {
173
- this.moreMenu.hidden = false;
174
- }
175
149
  };
176
150
  _ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
177
151
  return this.moreMenu.querySelectorAll('[role="menu"] > li');
178
152
  };
153
+ _ActionBarElement_eachItem = function _ActionBarElement_eachItem(callback) {
154
+ for (let i = 0; i < this.items.length; i++) {
155
+ const item = this.items[i];
156
+ const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item;
157
+ if (!callback(item, i, type)) {
158
+ break;
159
+ }
160
+ }
161
+ };
179
162
  __decorate([
180
163
  targets
181
164
  ], ActionBarElement.prototype, "items", void 0);
@@ -1,5 +1,6 @@
1
1
  import {controller, targets, target} from '@github/catalyst'
2
2
  import {focusZone, FocusKeys} from '@primer/behaviors'
3
+ import {ActionMenuElement} from './action_menu/action_menu_element'
3
4
 
4
5
  const instersectionObserver = new IntersectionObserver(entries => {
5
6
  for (const entry of entries) {
@@ -14,25 +15,30 @@ const resizeObserver = new ResizeObserver(entries => {
14
15
  for (const entry of entries) {
15
16
  const action = entry.target
16
17
  if (action instanceof ActionBarElement) {
17
- action.update(entry.contentRect)
18
+ action.update()
18
19
  }
19
20
  }
20
21
  })
21
22
 
23
+ // These are definitely used, but eslint is dumb apparently
24
+
25
+ // eslint-disable-next-line no-unused-vars
26
+ enum ItemType {
27
+ // eslint-disable-next-line no-unused-vars
28
+ Item,
29
+ // eslint-disable-next-line no-unused-vars
30
+ Divider,
31
+ }
32
+
22
33
  @controller
23
34
  class ActionBarElement extends HTMLElement {
24
35
  @targets items: HTMLElement[]
25
36
  @target itemContainer: HTMLElement
26
- @target moreMenu: HTMLElement
37
+ @target moreMenu: ActionMenuElement
27
38
 
28
- #initialBarWidth: number
29
- #previousBarWidth: number
30
39
  #focusZoneAbortController: AbortController | null = null
31
40
 
32
41
  connectedCallback() {
33
- this.#previousBarWidth = this.offsetWidth ?? Infinity
34
- this.#initialBarWidth = this.itemContainer.offsetWidth ?? Infinity
35
-
36
42
  // Calculate the width of all the items before hiding anything
37
43
  for (const item of this.items) {
38
44
  const width = item.getBoundingClientRect().width
@@ -44,10 +50,13 @@ class ActionBarElement extends HTMLElement {
44
50
  resizeObserver.observe(this)
45
51
  instersectionObserver.observe(this)
46
52
 
47
- setTimeout(() => {
53
+ requestAnimationFrame(() => {
54
+ // This overflow visible is needed for browsers that don't support PopoverElement
55
+ // to ensure the menu and tooltips are visible when the action bar is in a collapsed state
56
+ // once popover is fully supported we can remove this.style.overflow = 'visible'
48
57
  this.style.overflow = 'visible'
49
58
  this.update()
50
- }, 20) // Wait for the items to be rendered, making this really short to avoid a flash of unstyled content
59
+ })
51
60
  }
52
61
 
53
62
  disconnectedCallback() {
@@ -65,114 +74,100 @@ class ActionBarElement extends HTMLElement {
65
74
  }
66
75
  }
67
76
 
68
- update(rect: DOMRect = this.getBoundingClientRect()) {
69
- // Only recalculate if the bar width changed
70
- if (rect.width <= this.#previousBarWidth || this.#previousBarWidth === 0) {
71
- this.#shrink()
72
- } else if (rect.width > this.#previousBarWidth) {
73
- this.#grow()
74
- }
75
- this.#previousBarWidth = rect.width
77
+ update() {
78
+ const firstItem = this.#firstItem
79
+ if (!firstItem) return
80
+
81
+ const firstItemTop = firstItem.getBoundingClientRect().top
82
+ let previousItemType: ItemType | null = null
83
+
84
+ this.#eachItem((item: HTMLElement, index: number, type: ItemType): boolean => {
85
+ const itemTop = item.getBoundingClientRect().top
86
+
87
+ if (type === ItemType.Item) {
88
+ if (itemTop > firstItemTop) {
89
+ this.#hideItem(index)
90
+
91
+ if (this.moreMenu.hidden) {
92
+ this.moreMenu.hidden = false
93
+ }
94
+
95
+ if (previousItemType === ItemType.Divider) {
96
+ this.#hideItem(index - 1)
97
+ }
98
+ } else {
99
+ this.#showItem(index)
100
+
101
+ if (index === this.items.length - 1) {
102
+ this.moreMenu.hidden = true
103
+ }
104
+
105
+ if (previousItemType === ItemType.Divider) {
106
+ this.#showItem(index - 1)
107
+ }
108
+ }
109
+ }
110
+
111
+ previousItemType = type
112
+
113
+ return true
114
+ })
76
115
 
77
- if (rect.width <= this.#initialBarWidth) {
78
- this.style.justifyContent = 'space-between'
79
- } else {
80
- this.style.justifyContent = 'flex-end'
81
- }
82
116
  if (this.#focusZoneAbortController) {
83
117
  this.#focusZoneAbortController.abort()
84
118
  }
119
+
85
120
  this.#focusZoneAbortController = focusZone(this, {
86
121
  bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
87
122
  focusOutBehavior: 'wrap',
88
123
  focusableElementFilter: element => {
89
- return this.#isVisible(element)
90
- }
124
+ const idx = this.items.indexOf(element.parentElement!)
125
+ const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible'
126
+ const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden
127
+ return elementIsVisibleItem || elementIsVisibleActionMenuInvoker
128
+ },
91
129
  })
92
130
  }
93
131
 
94
- #isVisible(element: HTMLElement): boolean {
95
- // Safari doesn't support `checkVisibility` yet.
96
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
97
- // @ts-ignore
98
- if (typeof element.checkVisibility === 'function') return element.checkVisibility()
132
+ get #firstItem(): HTMLElement | null {
133
+ let foundItem = null
99
134
 
100
- return Boolean(element.offsetParent || element.offsetWidth || element.offsetHeight)
101
- }
102
-
103
- #itemGap(): number {
104
- return parseInt(window.getComputedStyle(this.itemContainer)?.columnGap, 10) || 0
105
- }
106
-
107
- #availableSpace(): number {
108
- // Get the offset of the item container from the container edge
109
- return this.offsetWidth - this.itemContainer.offsetWidth
110
- }
111
-
112
- #menuSpace(): number {
113
- if (this.moreMenu.hidden) {
114
- return 0
115
- }
116
- return this.moreMenu.offsetWidth + this.#itemGap()
117
- }
118
-
119
- #shrink() {
120
- if (this.items[0]!.hidden) {
121
- return
122
- }
123
-
124
- let index = this.items.length - 1
125
- for (const item of this.items.reverse()) {
126
- if (!item.hidden && this.#availableSpace() < this.#menuSpace()) {
127
- this.#hideItem(index)
128
- } else if (this.#availableSpace() >= this.#menuSpace()) {
129
- return
135
+ this.#eachItem((item: HTMLElement, _index: number, type: ItemType): boolean => {
136
+ if (type === ItemType.Item) {
137
+ foundItem = item
138
+ return false
130
139
  }
131
- index--
132
- }
133
- }
134
-
135
- #grow() {
136
- // If last item is visible, there is no need to grow
137
- if (!this.items[this.items.length - 1]!.hidden) {
138
- return
139
- }
140
- let index = 0
141
- for (const item of this.items) {
142
- if (item.hidden) {
143
- const offsetWidth = Number(item.getAttribute('data-offset-width'))
144
140
 
145
- if (this.#availableSpace() >= this.#menuSpace() + offsetWidth || index === this.items.length - 1) {
146
- this.#showItem(index)
147
- } else {
148
- return
149
- }
150
- }
151
- index++
152
- }
141
+ return true
142
+ })
153
143
 
154
- if (!this.items[this.items.length - 1]!.hidden) {
155
- this.moreMenu.hidden = true
156
- }
144
+ return foundItem
157
145
  }
158
146
 
159
147
  #showItem(index: number) {
160
- this.items[index]!.hidden = false
148
+ this.items[index].style.setProperty('visibility', 'visible')
161
149
  this.#menuItems[index]!.hidden = true
162
150
  }
163
151
 
164
152
  #hideItem(index: number) {
165
- this.items[index]!.hidden = true
153
+ this.items[index].style.setProperty('visibility', 'hidden')
166
154
  this.#menuItems[index]!.hidden = false
167
-
168
- if (this.moreMenu.hidden) {
169
- this.moreMenu.hidden = false
170
- }
171
155
  }
172
156
 
173
157
  get #menuItems(): NodeListOf<HTMLElement> {
174
158
  return this.moreMenu.querySelectorAll('[role="menu"] > li')
175
159
  }
160
+
161
+ // eslint-disable-next-line no-unused-vars
162
+ #eachItem(callback: (item: HTMLElement, index: number, type: ItemType) => boolean): void {
163
+ for (let i = 0; i < this.items.length; i++) {
164
+ const item = this.items[i]
165
+ const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item
166
+ if (!callback(item, i, type)) {
167
+ break
168
+ }
169
+ }
170
+ }
176
171
  }
177
172
 
178
173
  declare global {
@@ -1 +1 @@
1
- :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
1
+ :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%;-webkit-tap-highlight-color:transparent;align-items:start;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none;fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}