primer_view_components 0.1.5 → 0.1.6

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 (39) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +2 -2
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/item.rb +2 -2
  8. data/app/components/primer/alpha/action_list.rb +1 -1
  9. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +1 -0
  10. data/app/components/primer/alpha/action_menu/action_menu_element.js +48 -22
  11. data/app/components/primer/alpha/action_menu/action_menu_element.ts +50 -19
  12. data/app/components/primer/alpha/action_menu/list.rb +19 -9
  13. data/app/components/primer/alpha/action_menu.rb +56 -17
  14. data/app/components/primer/alpha/dialog.css +1 -1
  15. data/app/components/primer/alpha/dialog.css.json +0 -2
  16. data/app/components/primer/alpha/dialog.css.map +1 -1
  17. data/app/components/primer/alpha/dialog.pcss +0 -4
  18. data/app/components/primer/alpha/dropdown/menu.rb +1 -1
  19. data/app/components/primer/alpha/modal_dialog.js +12 -0
  20. data/app/components/primer/alpha/modal_dialog.ts +17 -0
  21. data/app/components/primer/alpha/overlay.css +1 -1
  22. data/app/components/primer/alpha/overlay.css.map +1 -1
  23. data/app/components/primer/alpha/overlay.pcss +1 -1
  24. data/app/components/primer/alpha/overlay.rb +9 -5
  25. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -1
  26. data/app/components/primer/beta/auto_complete.rb +19 -1
  27. data/app/components/primer/beta/button.css +1 -1
  28. data/app/components/primer/beta/button.css.json +0 -2
  29. data/app/components/primer/beta/button.css.map +1 -1
  30. data/app/components/primer/beta/button.pcss +2 -4
  31. data/lib/primer/view_components/version.rb +1 -1
  32. data/previews/primer/alpha/action_menu_preview/content_labels.html.erb +9 -0
  33. data/previews/primer/alpha/action_menu_preview.rb +43 -36
  34. data/previews/primer/beta/auto_complete_preview.rb +36 -23
  35. data/static/arguments.json +6 -0
  36. data/static/constants.json +19 -8
  37. data/static/info_arch.json +35 -6
  38. data/static/previews.json +5 -0
  39. metadata +7 -6
@@ -191,8 +191,6 @@ module Primer
191
191
  "ActionListItem--disabled" => @disabled
192
192
  )
193
193
 
194
- @system_arguments[:role] = :none
195
-
196
194
  @system_arguments[:data] ||= {}
197
195
  @system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
198
196
 
@@ -237,6 +235,8 @@ module Primer
237
235
  ActionList::DEFAULT_MENU_ITEM_ROLE
238
236
  end
239
237
 
238
+ @system_arguments[:role] = @list.acts_as_menu? ? :none : nil
239
+
240
240
  @description_wrapper_arguments = {
241
241
  classes: class_names(
242
242
  "ActionListItem-descriptionWrap",
@@ -107,7 +107,7 @@ module Primer
107
107
  "ActionListWrap--divided" => @show_dividers
108
108
  )
109
109
 
110
- @role = role || allows_selection? ? MENU_ROLE : DEFAULT_ROLE
110
+ @role = role || (allows_selection? ? MENU_ROLE : DEFAULT_ROLE)
111
111
  @system_arguments[:role] = @role
112
112
 
113
113
  @list_wrapper_arguments = {}
@@ -10,6 +10,7 @@ export declare class ActionMenuElement extends HTMLElement {
10
10
  set dynamicLabel(value: boolean);
11
11
  get popoverElement(): HTMLElement | null;
12
12
  get invokerElement(): HTMLElement | null;
13
+ get invokerLabel(): HTMLElement | null;
13
14
  connectedCallback(): void;
14
15
  disconnectedCallback(): void;
15
16
  handleEvent(event: Event): void;
@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
9
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
10
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
11
  };
12
- var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel;
12
+ var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
13
13
  import '@github/include-fragment-element';
14
14
  const popoverSelector = (() => {
15
15
  try {
@@ -20,7 +20,7 @@ const popoverSelector = (() => {
20
20
  return '.\\:open';
21
21
  }
22
22
  })();
23
- const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="none"]'];
23
+ const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
24
24
  export class ActionMenuElement extends HTMLElement {
25
25
  constructor() {
26
26
  super(...arguments);
@@ -68,6 +68,11 @@ export class ActionMenuElement extends HTMLElement {
68
68
  }
69
69
  return null;
70
70
  }
71
+ get invokerLabel() {
72
+ if (!this.invokerElement)
73
+ return null;
74
+ return this.invokerElement.querySelector('.Button-label');
75
+ }
71
76
  connectedCallback() {
72
77
  const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
73
78
  this.addEventListener('keydown', this, { signal });
@@ -81,17 +86,21 @@ export class ActionMenuElement extends HTMLElement {
81
86
  }
82
87
  handleEvent(event) {
83
88
  var _a, _b, _c, _d;
84
- if (!((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(popoverSelector)))
89
+ if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event)) {
90
+ if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
91
+ event.preventDefault();
92
+ (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
93
+ __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
94
+ return;
95
+ }
96
+ }
97
+ if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(popoverSelector)))
85
98
  return;
86
99
  if (event.type === 'focusout' && !this.contains(event.relatedTarget)) {
87
- (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
100
+ (_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.hidePopover();
88
101
  }
89
- else if ((event instanceof KeyboardEvent &&
90
- event.type === 'keydown' &&
91
- !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
92
- event.key === 'Enter') ||
93
- (event instanceof MouseEvent && event.type === 'click')) {
94
- const item = (_c = event.target.closest(menuItemSelectors.join(','))) === null || _c === void 0 ? void 0 : _c.closest('li');
102
+ else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
103
+ const item = (_d = event.target.closest(menuItemSelectors.join(','))) === null || _d === void 0 ? void 0 : _d.closest('li');
95
104
  if (!item)
96
105
  return;
97
106
  const ariaChecked = item.getAttribute('aria-checked');
@@ -107,31 +116,48 @@ export class ActionMenuElement extends HTMLElement {
107
116
  }
108
117
  __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
109
118
  }
110
- event.preventDefault();
111
- (_d = this.popoverElement) === null || _d === void 0 ? void 0 : _d.hidePopover();
119
+ if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
120
+ // prevent buttons from being clicked twice
121
+ event.preventDefault();
122
+ }
123
+ // Hide popover after current event loop to prevent changes in focus from
124
+ // altering the target of the event. Not doing this specifically affects
125
+ // <a> tags. It causes the event to be sent to the currently focused element
126
+ // instead of the anchor, which effectively prevents navigation, i.e. it
127
+ // appears as if hitting enter does nothing. Curiously, clicking instead
128
+ // works fine.
129
+ if (this.selectVariant !== 'multiple') {
130
+ setTimeout(() => { var _a; return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover(); });
131
+ }
112
132
  }
113
133
  }
114
134
  }
115
135
  _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
116
136
  if (!this.dynamicLabel)
117
137
  return;
118
- const invoker = this.invokerElement;
119
- if (!invoker)
138
+ const invokerLabel = this.invokerLabel;
139
+ if (!invokerLabel)
120
140
  return;
121
- const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',');
122
- const item = this.querySelector(selector);
123
- if (item && this.dynamicLabel) {
124
- __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invoker.textContent || ''), "f");
141
+ const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
142
+ if (itemLabel && this.dynamicLabel) {
143
+ __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
125
144
  const prefixSpan = document.createElement('span');
126
145
  prefixSpan.classList.add('color-fg-muted');
127
146
  const contentSpan = document.createElement('span');
128
147
  prefixSpan.textContent = this.dynamicLabelPrefix;
129
- contentSpan.textContent = item.textContent || '';
130
- invoker.replaceChildren(prefixSpan, contentSpan);
148
+ contentSpan.textContent = itemLabel.textContent || '';
149
+ invokerLabel.replaceChildren(prefixSpan, contentSpan);
131
150
  }
132
151
  else {
133
- invoker.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
134
- }
152
+ invokerLabel.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
153
+ }
154
+ }, _ActionMenuElement_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
155
+ return (event instanceof KeyboardEvent &&
156
+ event.type === 'keydown' &&
157
+ !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
158
+ event.key === 'Enter');
159
+ }, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
160
+ return this.querySelector(menuItemSelectors.join(','));
135
161
  };
136
162
  if (!window.customElements.get('action-menu')) {
137
163
  window.ActionMenuElement = ActionMenuElement;
@@ -11,7 +11,7 @@ const popoverSelector = (() => {
11
11
 
12
12
  type SelectVariant = 'single' | 'multiple' | null
13
13
 
14
- const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="none"]']
14
+ const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
15
15
 
16
16
  export class ActionMenuElement extends HTMLElement {
17
17
  #abortController: AbortController
@@ -60,6 +60,11 @@ export class ActionMenuElement extends HTMLElement {
60
60
  return null
61
61
  }
62
62
 
63
+ get invokerLabel(): HTMLElement | null {
64
+ if (!this.invokerElement) return null
65
+ return this.invokerElement.querySelector('.Button-label')
66
+ }
67
+
63
68
  connectedCallback() {
64
69
  const {signal} = (this.#abortController = new AbortController())
65
70
  this.addEventListener('keydown', this, {signal})
@@ -74,17 +79,20 @@ export class ActionMenuElement extends HTMLElement {
74
79
  }
75
80
 
76
81
  handleEvent(event: Event) {
82
+ if (event.target === this.invokerElement && this.#isEnterKeydown(event)) {
83
+ if (this.#firstItem) {
84
+ event.preventDefault()
85
+ this.popoverElement?.showPopover()
86
+ this.#firstItem.focus()
87
+ return
88
+ }
89
+ }
90
+
77
91
  if (!this.popoverElement?.matches(popoverSelector)) return
78
92
 
79
93
  if (event.type === 'focusout' && !this.contains((event as FocusEvent).relatedTarget as Node)) {
80
94
  this.popoverElement?.hidePopover()
81
- } else if (
82
- (event instanceof KeyboardEvent &&
83
- event.type === 'keydown' &&
84
- !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
85
- event.key === 'Enter') ||
86
- (event instanceof MouseEvent && event.type === 'click')
87
- ) {
95
+ } else if (this.#isEnterKeydown(event) || (event instanceof MouseEvent && event.type === 'click')) {
88
96
  const item = (event.target as Element).closest(menuItemSelectors.join(','))?.closest('li')
89
97
  if (!item) return
90
98
  const ariaChecked = item.getAttribute('aria-checked')
@@ -100,29 +108,52 @@ export class ActionMenuElement extends HTMLElement {
100
108
  }
101
109
  this.#setDynamicLabel()
102
110
  }
103
- event.preventDefault()
104
- this.popoverElement?.hidePopover()
111
+ if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
112
+ // prevent buttons from being clicked twice
113
+ event.preventDefault()
114
+ }
115
+ // Hide popover after current event loop to prevent changes in focus from
116
+ // altering the target of the event. Not doing this specifically affects
117
+ // <a> tags. It causes the event to be sent to the currently focused element
118
+ // instead of the anchor, which effectively prevents navigation, i.e. it
119
+ // appears as if hitting enter does nothing. Curiously, clicking instead
120
+ // works fine.
121
+ if (this.selectVariant !== 'multiple') {
122
+ setTimeout(() => this.popoverElement?.hidePopover())
123
+ }
105
124
  }
106
125
  }
107
126
 
108
127
  #setDynamicLabel() {
109
128
  if (!this.dynamicLabel) return
110
- const invoker = this.invokerElement
111
- if (!invoker) return
112
- const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',')
113
- const item = this.querySelector(selector)
114
- if (item && this.dynamicLabel) {
115
- this.#originalLabel ||= invoker.textContent || ''
129
+ const invokerLabel = this.invokerLabel
130
+ if (!invokerLabel) return
131
+ const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
132
+ if (itemLabel && this.dynamicLabel) {
133
+ this.#originalLabel ||= invokerLabel.textContent || ''
116
134
  const prefixSpan = document.createElement('span')
117
135
  prefixSpan.classList.add('color-fg-muted')
118
136
  const contentSpan = document.createElement('span')
119
137
  prefixSpan.textContent = this.dynamicLabelPrefix
120
- contentSpan.textContent = item.textContent || ''
121
- invoker.replaceChildren(prefixSpan, contentSpan)
138
+ contentSpan.textContent = itemLabel.textContent || ''
139
+ invokerLabel.replaceChildren(prefixSpan, contentSpan)
122
140
  } else {
123
- invoker.textContent = this.#originalLabel
141
+ invokerLabel.textContent = this.#originalLabel
124
142
  }
125
143
  }
144
+
145
+ #isEnterKeydown(event: Event): boolean {
146
+ return (
147
+ event instanceof KeyboardEvent &&
148
+ event.type === 'keydown' &&
149
+ !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
150
+ event.key === 'Enter'
151
+ )
152
+ }
153
+
154
+ get #firstItem(): HTMLElement | null {
155
+ return this.querySelector(menuItemSelectors.join(','))
156
+ }
126
157
  }
127
158
 
128
159
  if (!window.customElements.get('action-menu')) {
@@ -7,9 +7,8 @@ module Primer
7
7
  # This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
8
8
  # used as a standalone component.
9
9
  class List < Primer::Alpha::ActionList
10
- DEFAULT_ITEM_TAG = :span
10
+ DEFAULT_ITEM_TAG = :button
11
11
  ITEM_TAG_OPTIONS = [:a, :button, :"clipboard-copy", DEFAULT_ITEM_TAG].freeze
12
- ITEM_ACTION_OPTIONS = [:classes, :onclick, :href, :value].freeze
13
12
 
14
13
  # Adds a new item to the list.
15
14
  #
@@ -31,11 +30,11 @@ module Primer
31
30
 
32
31
  # rubocop:disable Style/IfUnlessModifier
33
32
  if content_arguments[:tag] == :a
34
- content_arguments[:href] = system_arguments.delete(:href)
33
+ content_arguments[:href] ||= system_arguments.delete(:href)
35
34
  end
36
35
  # rubocop:enable Style/IfUnlessModifier
37
36
 
38
- system_arguments[:tabindex] = -1
37
+ content_arguments[:tabindex] = -1
39
38
  system_arguments[:autofocus] = "" if system_arguments[:autofocus]
40
39
 
41
40
  if system_arguments[:disabled]
@@ -52,11 +51,22 @@ module Primer
52
51
  content_arguments[:disabled] = "" if content_arguments[:tag] == :button
53
52
  end
54
53
 
55
- super(
56
- **system_arguments,
57
- content_arguments: content_arguments,
58
- &block
59
- )
54
+ super(**system_arguments, content_arguments: content_arguments) do |item|
55
+ # Prevent double renders by using the capture method on the component
56
+ # that originally received the block.
57
+ #
58
+ # Handle blocks that originate from C code such as `&:method` by checking
59
+ # source_location. Such blocks don't allow access to their receiver.
60
+ if block&.source_location
61
+ block_context = block.binding.receiver
62
+
63
+ if block_context.class < ActionView::Base
64
+ block_context.capture(item, &block)
65
+ else
66
+ capture(item, &block)
67
+ end
68
+ end
69
+ end
60
70
  end
61
71
 
62
72
  # @param menu_id [String] ID of the parent menu.
@@ -43,7 +43,10 @@ module Primer
43
43
  #
44
44
  # @example With caret
45
45
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-1") do |c| %>
46
- # <% c.with_show_button(with_caret: true) { "Menu" } %>
46
+ # <% c.with_show_button do |button| %>
47
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
48
+ # Menu
49
+ # <% end %>
47
50
  # <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
48
51
  # Primer Design
49
52
  # <% end %>
@@ -81,7 +84,7 @@ module Primer
81
84
  # <% c.with_item(tag: :button, type: "button") do %>
82
85
  # Quote Reply
83
86
  # <% end %>
84
- # <% c.with_item(is_divider: true) %>
87
+ # <% c.with_divider %>
85
88
  # <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
86
89
  # Copy Text
87
90
  # <% end %>
@@ -109,7 +112,10 @@ module Primer
109
112
  # Align the menu to the center of the trigger button
110
113
  # @code
111
114
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-5", anchor_align: :center, anchor_side: :outside_top) do |c| %>
112
- # <% c.with_show_button(with_caret: true) { "Outside top" } %>
115
+ # <% c.with_show_button do |button| %>
116
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
117
+ # Outside top
118
+ # <% end %>
113
119
  # <% c.with_item do %>
114
120
  # Item 1 that does something
115
121
  # <% end %>
@@ -118,7 +124,10 @@ module Primer
118
124
  # <% end %>
119
125
  # <% end %>
120
126
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-6", anchor_align: :center, anchor_side: :outside_left) do |c| %>
121
- # <% c.with_show_button(with_caret: true) { "Outside left" } %>
127
+ # <% c.with_show_button do |button| %>
128
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
129
+ # Outside left
130
+ # <% end %>
122
131
  # <% c.with_item do %>
123
132
  # Item 1 that does something
124
133
  # <% end %>
@@ -127,7 +136,10 @@ module Primer
127
136
  # <% end %>
128
137
  # <% end %>
129
138
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-7", anchor_align: :center, anchor_side: :outside_right) do |c| %>
130
- # <% c.with_show_button(with_caret: true) { "Outside right" } %>
139
+ # <% c.with_show_button do |button| %>
140
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
141
+ # Outside right
142
+ # <% end %>
131
143
  # <% c.with_item do %>
132
144
  # Item 1 that does something
133
145
  # <% end %>
@@ -136,7 +148,10 @@ module Primer
136
148
  # <% end %>
137
149
  # <% end %>
138
150
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-8", anchor_align: :center, anchor_side: :outside_bottom) do |c| %>
139
- # <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
151
+ # <% c.with_show_button do |button| %>
152
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
153
+ # Outside bottom
154
+ # <% end %>
140
155
  # <% c.with_item do %>
141
156
  # Item 1 that does something
142
157
  # <% end %>
@@ -150,7 +165,10 @@ module Primer
150
165
  # Align the menu to the start of the trigger button
151
166
  # @code
152
167
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-9", anchor_align: :start, anchor_side: :outside_top) do |c| %>
153
- # <% c.with_show_button(with_caret: true) { "Outside top" } %>
168
+ # <% c.with_show_button do |button| %>
169
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
170
+ # Outside top
171
+ # <% end %>
154
172
  # <% c.with_item do %>
155
173
  # Item 1 that does something
156
174
  # <% end %>
@@ -159,7 +177,10 @@ module Primer
159
177
  # <% end %>
160
178
  # <% end %>
161
179
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-10", anchor_align: :start, anchor_side: :outside_left) do |c| %>
162
- # <% c.with_show_button(with_caret: true) { "Outside left" } %>
180
+ # <% c.with_show_button do |button| %>
181
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
182
+ # Outside left
183
+ # <% end %>
163
184
  # <% c.with_item do %>
164
185
  # Item 1 that does something
165
186
  # <% end %>
@@ -168,7 +189,10 @@ module Primer
168
189
  # <% end %>
169
190
  # <% end %>
170
191
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-11", anchor_align: :start, anchor_side: :outside_right) do |c| %>
171
- # <% c.with_show_button(with_caret: true) { "Outside right" } %>
192
+ # <% c.with_show_button do |button| %>
193
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
194
+ # Outside right
195
+ # <% end %>
172
196
  # <% c.with_item do %>
173
197
  # Item 1 that does something
174
198
  # <% end %>
@@ -177,7 +201,10 @@ module Primer
177
201
  # <% end %>
178
202
  # <% end %>
179
203
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-12", anchor_align: :start, anchor_side: :outside_bottom) do |c| %>
180
- # <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
204
+ # <% c.with_show_button do |button| %>
205
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
206
+ # Outside bottom
207
+ # <% end %>
181
208
  # <% c.with_item do %>
182
209
  # Item 1 that does something
183
210
  # <% end %>
@@ -191,7 +218,10 @@ module Primer
191
218
  # Align the menu to the end of the trigger button
192
219
  # @code
193
220
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-13", anchor_align: :end, anchor_side: :outside_top) do |c| %>
194
- # <% c.with_show_button(with_caret: true) { "Outside top" } %>
221
+ # <% c.with_show_button do |button| %>
222
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
223
+ # Outside top
224
+ # <% end %>
195
225
  # <% c.with_item do %>
196
226
  # Item 1 that does something
197
227
  # <% end %>
@@ -200,7 +230,10 @@ module Primer
200
230
  # <% end %>
201
231
  # <% end %>
202
232
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-14", anchor_align: :end, anchor_side: :outside_left) do |c| %>
203
- # <% c.with_show_button(with_caret: true) { "Outside left" } %>
233
+ # <% c.with_show_button do |button| %>
234
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
235
+ # Outside left
236
+ # <% end %>
204
237
  # <% c.with_item do %>
205
238
  # Item 1 that does something
206
239
  # <% end %>
@@ -209,7 +242,10 @@ module Primer
209
242
  # <% end %>
210
243
  # <% end %>
211
244
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-15", anchor_align: :end, anchor_side: :outside_right) do |c| %>
212
- # <% c.with_show_button(with_caret: true) { "Outside right" } %>
245
+ # <% c.with_show_button do |button| %>
246
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
247
+ # Outside right
248
+ # <% end %>
213
249
  # <% c.with_item do %>
214
250
  # Item 1 that does something
215
251
  # <% end %>
@@ -218,7 +254,10 @@ module Primer
218
254
  # <% end %>
219
255
  # <% end %>
220
256
  # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-16", anchor_align: :end, anchor_side: :outside_bottom) do |c| %>
221
- # <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
257
+ # <% c.with_show_button do |button| %>
258
+ # <% button.with_trailing_action_icon(icon: "triangle-down") %>
259
+ # Outside bottom
260
+ # <% end %>
222
261
  # <% c.with_item do %>
223
262
  # Item 1 that does something
224
263
  # <% end %>
@@ -228,7 +267,7 @@ module Primer
228
267
  # <% end %>
229
268
  #
230
269
  # @example With deferred menu content loaded with an `include-fragment`
231
- # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-3", src: "/") do |c| %>
270
+ # <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-17", src: "/") do |c| %>
232
271
  # <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
233
272
  # <% end %>
234
273
  #
@@ -280,9 +319,9 @@ module Primer
280
319
  )
281
320
  end
282
321
 
283
- # Button to activate the menu. This may be a <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::IconButton) %>.
322
+ # Button to activate the menu.
284
323
  #
285
- # @param icon [Symbol] Set this to an [Octicon name](https://primer.style/octicons/) when you want to render an `IconButton`. Otherwise, this renders as a <%= link_to_component(Primer::ButtonComponent) %>.
324
+ # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
286
325
  def with_show_button(**system_arguments, &block)
287
326
  @overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list", &block)
288
327
  end
@@ -1 +1 @@
1
- .Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow:var(--color-overlay-shadow);display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor .Overlay{width:auto}.Overlay-backdrop--side{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--anchor-whenNarrow .Overlay{width:auto}.Overlay-backdrop--side-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
1
+ .Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}.Overlay{background-color:var(--color-canvas-overlay);border-radius:var(--primer-borderRadius-large,12px);box-shadow:var(--color-overlay-shadow);display:flex;flex-direction:column;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--primer-borderWidth-thin, 1px)*-1) var(--color-border-default);padding-bottom:var(--primer-stack-padding-condensed,8px)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap{gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-title-size-medium,20px)}.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{font-size:var(--primer-text-body-size-medium,14px)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--primer-stack-gap-condensed,8px);padding:var(--primer-stack-gap-condensed,8px) var(--primer-stack-gap-condensed,8px) 0 var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--primer-control-small-gap,4px);padding:calc(var(--primer-stack-gap-condensed, 8px)*.75) 0 calc(var(--primer-stack-gap-condensed, 8px)*.75) var(--primer-stack-gap-condensed,8px)}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);margin:0}.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);margin:0}.Overlay-body{flex-grow:1;font-size:var(--primer-text-body-size-medium,14px);overflow-y:auto;padding:var(--primer-stack-padding-normal,16px);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--primer-stack-padding-condensed,8px);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px) var(--primer-stack-padding-normal,16px);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--primer-borderWidth-thin,1px) var(--color-border-default);padding-top:var(--primer-stack-padding-normal,16px)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--primer-stack-gap-condensed,8px);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--primer-stack-gap-condensed,8px);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32,32px);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32,32px)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--color-btn-hover-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-btn-hover-bg)}.Overlay-closeButton.close-button{border:var(--primer-borderWidth-thin,1px) solid #0000}.Overlay-backdrop--center{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side,.Overlay-backdrop--side.Overlay-backdrop--placement-left{align-items:center;justify-content:left}.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-right{align-items:center;justify-content:right}.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-right>.Overlay{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom{align-items:end;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-bottom>.Overlay{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side.Overlay-backdrop--placement-top{align-items:start;justify-content:center}.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side.Overlay-backdrop--placement-top>.Overlay{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay-backdrop--center-whenNarrow{align-items:center;background-color:var(--color-neutral-muted);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--anchor-whenNarrow{background-color:initial;position:absolute;z-index:999}.Overlay-backdrop--side-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--side-whenNarrow,.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow{align-items:center;justify-content:left}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-top-left-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInRight .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow{align-items:center;justify-content:right}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-right-radius:0;border-top-right-radius:0;height:100vh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideInLeft .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow{align-items:end;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100vh - 2rem);width:100vw}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideUp .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow{align-items:start;justify-content:center}.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{border-radius:var(--primer-borderRadius-large,12px);border-top-left-radius:0;border-top-right-radius:0}@media screen and (prefers-reduced-motion:no-preference){.Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow{animation:Overlay--motion-slideDown .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay-backdrop--full-whenNarrow{background-color:var(--color-neutral-muted);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:999}.Overlay-backdrop--full-whenNarrow .Overlay{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
@@ -52,7 +52,6 @@
52
52
  ".Overlay-closeButton.close-button",
53
53
  ".Overlay-backdrop--center",
54
54
  ".Overlay-backdrop--anchor",
55
- ".Overlay-backdrop--anchor .Overlay",
56
55
  ".Overlay-backdrop--side",
57
56
  ".Overlay-backdrop--side.Overlay-backdrop--placement-left",
58
57
  ".Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay",
@@ -66,7 +65,6 @@
66
65
  ".Overlay-backdrop--full .Overlay",
67
66
  ".Overlay-backdrop--center-whenNarrow",
68
67
  ".Overlay-backdrop--anchor-whenNarrow",
69
- ".Overlay-backdrop--anchor-whenNarrow .Overlay",
70
68
  ".Overlay-backdrop--side-whenNarrow",
71
69
  ".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow",
72
70
  ".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow",