primer_view_components 0.1.5 → 0.1.6

data/app/components/primer/alpha/action_list/item.rb

@@ -191,8 +191,6 @@ module Primer
             "ActionListItem--disabled" => @disabled
           )
 
-          @system_arguments[:role] = :none
-
           @system_arguments[:data] ||= {}
           @system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
 
@@ -237,6 +235,8 @@ module Primer
                                         ActionList::DEFAULT_MENU_ITEM_ROLE
                                       end
 
+          @system_arguments[:role] = @list.acts_as_menu? ? :none : nil
+
           @description_wrapper_arguments = {
             classes: class_names(
               "ActionListItem-descriptionWrap",

data/app/components/primer/alpha/action_list.rb

@@ -107,7 +107,7 @@ module Primer
           "ActionListWrap--divided" => @show_dividers
         )
 
-        @role = role || allows_selection? ? MENU_ROLE : DEFAULT_ROLE
+        @role = role || (allows_selection? ? MENU_ROLE : DEFAULT_ROLE)
         @system_arguments[:role] = @role
 
         @list_wrapper_arguments = {}

data/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -10,6 +10,7 @@ export declare class ActionMenuElement extends HTMLElement {
     set dynamicLabel(value: boolean);
     get popoverElement(): HTMLElement | null;
     get invokerElement(): HTMLElement | null;
+    get invokerLabel(): HTMLElement | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;

data/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
 import '@github/include-fragment-element';
 const popoverSelector = (() => {
     try {
@@ -20,7 +20,7 @@ const popoverSelector = (() => {
         return '.\\:open';
     }
 })();
-const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="none"]'];
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
 export class ActionMenuElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -68,6 +68,11 @@ export class ActionMenuElement extends HTMLElement {
         }
         return null;
     }
+    get invokerLabel() {
+        if (!this.invokerElement)
+            return null;
+        return this.invokerElement.querySelector('.Button-label');
+    }
     connectedCallback() {
         const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
         this.addEventListener('keydown', this, { signal });
@@ -81,17 +86,21 @@ export class ActionMenuElement extends HTMLElement {
     }
     handleEvent(event) {
         var _a, _b, _c, _d;
-        if (!((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(popoverSelector)))
+        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event)) {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
+                event.preventDefault();
+                (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+                return;
+            }
+        }
+        if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(popoverSelector)))
             return;
         if (event.type === 'focusout' && !this.contains(event.relatedTarget)) {
-            (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
+            (_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.hidePopover();
         }
-        else if ((event instanceof KeyboardEvent &&
-            event.type === 'keydown' &&
-            !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-            event.key === 'Enter') ||
-            (event instanceof MouseEvent && event.type === 'click')) {
-            const item = (_c = event.target.closest(menuItemSelectors.join(','))) === null || _c === void 0 ? void 0 : _c.closest('li');
+        else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
+            const item = (_d = event.target.closest(menuItemSelectors.join(','))) === null || _d === void 0 ? void 0 : _d.closest('li');
             if (!item)
                 return;
             const ariaChecked = item.getAttribute('aria-checked');
@@ -107,31 +116,48 @@ export class ActionMenuElement extends HTMLElement {
                 }
                 __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
             }
-            event.preventDefault();
-            (_d = this.popoverElement) === null || _d === void 0 ? void 0 : _d.hidePopover();
+            if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+                // prevent buttons from being clicked twice
+                event.preventDefault();
+            }
+            // Hide popover after current event loop to prevent changes in focus from
+            // altering the target of the event. Not doing this specifically affects
+            // <a> tags. It causes the event to be sent to the currently focused element
+            // instead of the anchor, which effectively prevents navigation, i.e. it
+            // appears as if hitting enter does nothing. Curiously, clicking instead
+            // works fine.
+            if (this.selectVariant !== 'multiple') {
+                setTimeout(() => { var _a; return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover(); });
+            }
         }
     }
 }
 _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
     if (!this.dynamicLabel)
         return;
-    const invoker = this.invokerElement;
-    if (!invoker)
+    const invokerLabel = this.invokerLabel;
+    if (!invokerLabel)
         return;
-    const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',');
-    const item = this.querySelector(selector);
-    if (item && this.dynamicLabel) {
-        __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invoker.textContent || ''), "f");
+    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
+    if (itemLabel && this.dynamicLabel) {
+        __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');
         const contentSpan = document.createElement('span');
         prefixSpan.textContent = this.dynamicLabelPrefix;
-        contentSpan.textContent = item.textContent || '';
-        invoker.replaceChildren(prefixSpan, contentSpan);
+        contentSpan.textContent = itemLabel.textContent || '';
+        invokerLabel.replaceChildren(prefixSpan, contentSpan);
     }
     else {
-        invoker.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
-    }
+        invokerLabel.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
+    }
+}, _ActionMenuElement_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter');
+}, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
+    return this.querySelector(menuItemSelectors.join(','));
 };
 if (!window.customElements.get('action-menu')) {
     window.ActionMenuElement = ActionMenuElement;

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -11,7 +11,7 @@ const popoverSelector = (() => {
 
 type SelectVariant = 'single' | 'multiple' | null
 
-const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="none"]']
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 
 export class ActionMenuElement extends HTMLElement {
   #abortController: AbortController
@@ -60,6 +60,11 @@ export class ActionMenuElement extends HTMLElement {
     return null
   }
 
+  get invokerLabel(): HTMLElement | null {
+    if (!this.invokerElement) return null
+    return this.invokerElement.querySelector('.Button-label')
+  }
+
   connectedCallback() {
     const {signal} = (this.#abortController = new AbortController())
     this.addEventListener('keydown', this, {signal})
@@ -74,17 +79,20 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   handleEvent(event: Event) {
+    if (event.target === this.invokerElement && this.#isEnterKeydown(event)) {
+      if (this.#firstItem) {
+        event.preventDefault()
+        this.popoverElement?.showPopover()
+        this.#firstItem.focus()
+        return
+      }
+    }
+
     if (!this.popoverElement?.matches(popoverSelector)) return
 
     if (event.type === 'focusout' && !this.contains((event as FocusEvent).relatedTarget as Node)) {
       this.popoverElement?.hidePopover()
-    } else if (
-      (event instanceof KeyboardEvent &&
-        event.type === 'keydown' &&
-        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-        event.key === 'Enter') ||
-      (event instanceof MouseEvent && event.type === 'click')
-    ) {
+    } else if (this.#isEnterKeydown(event) || (event instanceof MouseEvent && event.type === 'click')) {
       const item = (event.target as Element).closest(menuItemSelectors.join(','))?.closest('li')
       if (!item) return
       const ariaChecked = item.getAttribute('aria-checked')
@@ -100,29 +108,52 @@ export class ActionMenuElement extends HTMLElement {
         }
         this.#setDynamicLabel()
       }
-      event.preventDefault()
-      this.popoverElement?.hidePopover()
+      if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+        // prevent buttons from being clicked twice
+        event.preventDefault()
+      }
+      // Hide popover after current event loop to prevent changes in focus from
+      // altering the target of the event. Not doing this specifically affects
+      // <a> tags. It causes the event to be sent to the currently focused element
+      // instead of the anchor, which effectively prevents navigation, i.e. it
+      // appears as if hitting enter does nothing. Curiously, clicking instead
+      // works fine.
+      if (this.selectVariant !== 'multiple') {
+        setTimeout(() => this.popoverElement?.hidePopover())
+      }
     }
   }
 
   #setDynamicLabel() {
     if (!this.dynamicLabel) return
-    const invoker = this.invokerElement
-    if (!invoker) return
-    const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',')
-    const item = this.querySelector(selector)
-    if (item && this.dynamicLabel) {
-      this.#originalLabel ||= invoker.textContent || ''
+    const invokerLabel = this.invokerLabel
+    if (!invokerLabel) return
+    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
+    if (itemLabel && this.dynamicLabel) {
+      this.#originalLabel ||= invokerLabel.textContent || ''
       const prefixSpan = document.createElement('span')
       prefixSpan.classList.add('color-fg-muted')
       const contentSpan = document.createElement('span')
       prefixSpan.textContent = this.dynamicLabelPrefix
-      contentSpan.textContent = item.textContent || ''
-      invoker.replaceChildren(prefixSpan, contentSpan)
+      contentSpan.textContent = itemLabel.textContent || ''
+      invokerLabel.replaceChildren(prefixSpan, contentSpan)
     } else {
-      invoker.textContent = this.#originalLabel
+      invokerLabel.textContent = this.#originalLabel
     }
   }
+
+  #isEnterKeydown(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      event.key === 'Enter'
+    )
+  }
+
+  get #firstItem(): HTMLElement | null {
+    return this.querySelector(menuItemSelectors.join(','))
+  }
 }
 
 if (!window.customElements.get('action-menu')) {

data/app/components/primer/alpha/action_menu/list.rb

@@ -7,9 +7,8 @@ module Primer
       # This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
       # used as a standalone component.
       class List < Primer::Alpha::ActionList
-        DEFAULT_ITEM_TAG = :span
+        DEFAULT_ITEM_TAG = :button
         ITEM_TAG_OPTIONS = [:a, :button, :"clipboard-copy", DEFAULT_ITEM_TAG].freeze
-        ITEM_ACTION_OPTIONS = [:classes, :onclick, :href, :value].freeze
 
         # Adds a new item to the list.
         #
@@ -31,11 +30,11 @@ module Primer
 
           # rubocop:disable Style/IfUnlessModifier
           if content_arguments[:tag] == :a
-            content_arguments[:href] = system_arguments.delete(:href)
+            content_arguments[:href] ||= system_arguments.delete(:href)
           end
           # rubocop:enable Style/IfUnlessModifier
 
-          system_arguments[:tabindex] = -1
+          content_arguments[:tabindex] = -1
           system_arguments[:autofocus] = "" if system_arguments[:autofocus]
 
           if system_arguments[:disabled]
@@ -52,11 +51,22 @@ module Primer
             content_arguments[:disabled] = "" if content_arguments[:tag] == :button
           end
 
-          super(
-            **system_arguments,
-            content_arguments: content_arguments,
-            &block
-          )
+          super(**system_arguments, content_arguments: content_arguments) do |item|
+            # Prevent double renders by using the capture method on the component
+            # that originally received the block.
+            #
+            # Handle blocks that originate from C code such as `&:method` by checking
+            # source_location. Such blocks don't allow access to their receiver.
+            if block&.source_location
+              block_context = block.binding.receiver
+
+              if block_context.class < ActionView::Base
+                block_context.capture(item, &block)
+              else
+                capture(item, &block)
+              end
+            end
+          end
         end
 
         # @param menu_id [String] ID of the parent menu.

data/app/components/primer/alpha/action_menu.rb

@@ -43,7 +43,10 @@ module Primer
       #
       # @example With caret
       #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-1") do |c| %>
-      #    <% c.with_show_button(with_caret: true) { "Menu" } %>
+      #    <% c.with_show_button do |button| %>
+      #      <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #      Menu
+      #    <% end %>
       #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
       #      Primer Design
       #    <% end %>
@@ -81,7 +84,7 @@ module Primer
       #    <% c.with_item(tag: :button, type: "button") do %>
       #      Quote Reply
       #    <% end %>
-      #    <% c.with_item(is_divider: true) %>
+      #    <% c.with_divider %>
       #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
       #      Copy Text
       #    <% end %>
@@ -109,7 +112,10 @@ module Primer
       #     Align the menu to the center of the trigger button
       #   @code
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-5", anchor_align: :center, anchor_side: :outside_top) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside top" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside top
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -118,7 +124,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-6", anchor_align: :center, anchor_side: :outside_left) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside left" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside left
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -127,7 +136,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-7", anchor_align: :center, anchor_side: :outside_right) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside right" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside right
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -136,7 +148,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-8", anchor_align: :center, anchor_side: :outside_bottom) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside bottom
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -150,7 +165,10 @@ module Primer
       #     Align the menu to the start of the trigger button
       #   @code
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-9", anchor_align: :start, anchor_side: :outside_top) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside top" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside top
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -159,7 +177,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-10", anchor_align: :start, anchor_side: :outside_left) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside left" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside left
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -168,7 +189,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-11", anchor_align: :start, anchor_side: :outside_right) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside right" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside right
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -177,7 +201,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-12", anchor_align: :start, anchor_side: :outside_bottom) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside bottom
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -191,7 +218,10 @@ module Primer
       #     Align the menu to the end of the trigger button
       #   @code
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-13", anchor_align: :end, anchor_side: :outside_top) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside top" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside top
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -200,7 +230,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-14", anchor_align: :end, anchor_side: :outside_left) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside left" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside left
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -209,7 +242,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-15", anchor_align: :end, anchor_side: :outside_right) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside right" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside right
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -218,7 +254,10 @@ module Primer
       #       <% end %>
       #     <% end %>
       #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-16", anchor_align: :end, anchor_side: :outside_bottom) do |c| %>
-      #       <% c.with_show_button(with_caret: true) { "Outside bottom" } %>
+      #       <% c.with_show_button do |button| %>
+      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
+      #         Outside bottom
+      #       <% end %>
       #       <% c.with_item do %>
       #         Item 1 that does something
       #       <% end %>
@@ -228,7 +267,7 @@ module Primer
       #     <% end %>
       #
       # @example With deferred menu content loaded with an `include-fragment`
-      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-3", src: "/") do |c| %>
+      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-17", src: "/") do |c| %>
       #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
       #  <% end %>
       #
@@ -280,9 +319,9 @@ module Primer
         )
       end
 
-      # Button to activate the menu. This may be a <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::IconButton) %>.
+      # Button to activate the menu.
       #
-      # @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) %>.
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Overlay) %>'s `show_button` slot.
       def with_show_button(**system_arguments, &block)
         @overlay.with_show_button(**system_arguments, id: "#{@menu_id}-button", controls: "#{@menu_id}-list", &block)
       end

data/app/components/primer/alpha/dialog.css

@@ -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%)}}
+.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%)}}

data/app/components/primer/alpha/dialog.css.json

@@ -52,7 +52,6 @@
     ".Overlay-closeButton.close-button",
     ".Overlay-backdrop--center",
     ".Overlay-backdrop--anchor",
-    ".Overlay-backdrop--anchor .Overlay",
     ".Overlay-backdrop--side",
     ".Overlay-backdrop--side.Overlay-backdrop--placement-left",
     ".Overlay-backdrop--side.Overlay-backdrop--placement-left>.Overlay",
@@ -66,7 +65,6 @@
     ".Overlay-backdrop--full .Overlay",
     ".Overlay-backdrop--center-whenNarrow",
     ".Overlay-backdrop--anchor-whenNarrow",
-    ".Overlay-backdrop--anchor-whenNarrow .Overlay",
     ".Overlay-backdrop--side-whenNarrow",
     ".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow",
     ".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow>.Overlay-whenNarrow",