openproject-primer_view_components 0.82.1 → 0.83.0

data/app/components/primer/dialog_helper.js

@@ -10,6 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
+function setScrollGutter(doc) {
+    if (doc.body.style.getPropertyValue('--dialog-scrollgutter'))
+        return;
+    doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
+}
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
     const button = target?.closest('button');
@@ -20,25 +25,35 @@ function dialogInvokerButtonHandler(event) {
     if (dialogId) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
+            setScrollGutter(dialog.ownerDocument);
             dialog.showModal();
             // A buttons default behaviour in some browsers it to send a pointer event
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
-            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-            // any popover that is currently open, regardless of whether or not another top layer element,
-            // such as a <dialog> is nested inside.
-            // See https://github.com/whatwg/html/issues/9998.
-            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
-            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            // When a <dialog> is opened with showModal() from inside a popover with popover="auto",
+            // there are two related issues:
+            //
+            // 1. In older browsers (e.g. Chrome 122), the "hide all popovers" algorithm runs when a
+            //    top layer element opens, closing any ancestor popover. We must re-open those popovers.
+            //    See https://github.com/whatwg/html/issues/9998,
+            //    fixed by https://github.com/whatwg/html/pull/10116.
+            //
+            // 2. In newer browsers where the popover stays open, the popover="auto" behavior still
+            //    interferes with the native <dialog> focus trap, causing focus to escape the dialog
+            //    when tabbing past the last focusable element. Converting the popover to "manual"
+            //    prevents this interference.
+            //
+            // In both cases, the fix is the same: convert ancestor auto popovers to manual.
             let node = button;
             let fixed = false;
             while (node) {
-                node = node.parentElement?.closest('[popover]:not(:popover-open)');
+                node = node.parentElement?.closest('[popover]');
                 if (node && node.popover === 'auto') {
                     node.classList.add('dialog-inside-popover-fix');
                     node.popover = 'manual';
+                    // Changing popover from "auto" to "manual" closes the popover,
+                    // so we need to re-show it regardless of whether it was previously open.
                     node.showPopover();
                     fixed = true;
                 }
@@ -83,7 +98,6 @@ export class DialogHelperElement extends HTMLElement {
         const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
         document.addEventListener('click', dialogInvokerButtonHandler, true);
         document.addEventListener('click', this, { signal });
-        this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
         new MutationObserver(records => {
             for (const record of records) {
                 if (record.target === this.dialog) {
@@ -123,6 +137,7 @@ _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_insta
         // eslint-disable-next-line no-restricted-syntax
         this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
         this.dialog.close();
+        setScrollGutter(this.dialog.ownerDocument);
         this.dialog.showModal();
     }
 };

data/app/components/primer/dialog_helper.ts

@@ -1,3 +1,8 @@
+function setScrollGutter(doc: Document) {
+  if (doc.body.style.getPropertyValue('--dialog-scrollgutter')) return
+  doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`)
+}
+
 function dialogInvokerButtonHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
@@ -9,26 +14,36 @@ function dialogInvokerButtonHandler(event: Event) {
   if (dialogId) {
     const dialog = document.getElementById(dialogId)
     if (dialog instanceof HTMLDialogElement) {
+      setScrollGutter(dialog.ownerDocument)
       dialog.showModal()
       // A buttons default behaviour in some browsers it to send a pointer event
       // If the behaviour is allowed through the dialog will be shown but then
       // quickly hidden- as if it were never shown. This prevents that.
       event.preventDefault()
 
-      // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-      // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-      // any popover that is currently open, regardless of whether or not another top layer element,
-      // such as a <dialog> is nested inside.
-      // See https://github.com/whatwg/html/issues/9998.
-      // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
-      // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+      // When a <dialog> is opened with showModal() from inside a popover with popover="auto",
+      // there are two related issues:
+      //
+      // 1. In older browsers (e.g. Chrome 122), the "hide all popovers" algorithm runs when a
+      //    top layer element opens, closing any ancestor popover. We must re-open those popovers.
+      //    See https://github.com/whatwg/html/issues/9998,
+      //    fixed by https://github.com/whatwg/html/pull/10116.
+      //
+      // 2. In newer browsers where the popover stays open, the popover="auto" behavior still
+      //    interferes with the native <dialog> focus trap, causing focus to escape the dialog
+      //    when tabbing past the last focusable element. Converting the popover to "manual"
+      //    prevents this interference.
+      //
+      // In both cases, the fix is the same: convert ancestor auto popovers to manual.
       let node: HTMLElement | null | undefined = button
       let fixed = false
       while (node) {
-        node = node.parentElement?.closest('[popover]:not(:popover-open)')
+        node = node.parentElement?.closest('[popover]')
         if (node && node.popover === 'auto') {
           node.classList.add('dialog-inside-popover-fix')
           node.popover = 'manual'
+          // Changing popover from "auto" to "manual" closes the popover,
+          // so we need to re-show it regardless of whether it was previously open.
           node.showPopover()
           fixed = true
         }
@@ -76,10 +91,6 @@ export class DialogHelperElement extends HTMLElement {
     const {signal} = (this.#abortController = new AbortController())
     document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
-    this.ownerDocument.body.style.setProperty(
-      '--dialog-scrollgutter',
-      `${window.innerWidth - this.ownerDocument.body.clientWidth}px`,
-    )
     new MutationObserver(records => {
       for (const record of records) {
         if (record.target === this.dialog) {
@@ -101,6 +112,7 @@ export class DialogHelperElement extends HTMLElement {
       // eslint-disable-next-line no-restricted-syntax
       this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
       this.dialog.close()
+      setScrollGutter(this.dialog.ownerDocument)
       this.dialog.showModal()
     }
   }

data/app/components/primer/scrollable_region.js

@@ -46,7 +46,7 @@ __decorate([
     attr
 ], ScrollableRegionElement.prototype, "labelledBy", void 0);
 ScrollableRegionElement = __decorate([
-    controller
+    controller('scrollable-region')
 ], ScrollableRegionElement);
 export { ScrollableRegionElement };
 window.ScrollableRegionElement = ScrollableRegionElement;

data/app/components/primer/scrollable_region.ts

@@ -1,6 +1,6 @@
 import {controller, attr} from '@github/catalyst'
 
-@controller
+@controller('scrollable-region')
 export class ScrollableRegionElement extends HTMLElement {
   @attr hasOverflow = false
   @attr labelledBy = ''

data/app/lib/primer/forms/primer_multi_input.js

@@ -35,7 +35,7 @@ __decorate([
     targets
 ], PrimerMultiInputElement.prototype, "fields", void 0);
 PrimerMultiInputElement = __decorate([
-    controller
+    controller('primer-multi-input')
 ], PrimerMultiInputElement);
 export { PrimerMultiInputElement };
 if (!window.customElements.get('primer-multi-input')) {

data/app/lib/primer/forms/primer_multi_input.ts

@@ -1,7 +1,7 @@
 /* eslint-disable custom-elements/expose-class-on-global */
 import {controller, targets} from '@github/catalyst'
 
-@controller
+@controller('primer-multi-input')
 export class PrimerMultiInputElement extends HTMLElement {
   @targets fields: HTMLInputElement[]
 

data/app/lib/primer/forms/primer_text_area.js

@@ -44,7 +44,7 @@ __decorate([
     target
 ], PrimerTextAreaElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextAreaElement = __decorate([
-    controller
+    controller('primer-text-area')
 ], PrimerTextAreaElement);
 export { PrimerTextAreaElement };
 if (!window.customElements.get('primer-text-area')) {

data/app/lib/primer/forms/primer_text_area.ts

@@ -1,7 +1,7 @@
 import {controller, target} from '@github/catalyst'
 import {CharacterCounter} from './character_counter'
 
-@controller
+@controller('primer-text-area')
 export class PrimerTextAreaElement extends HTMLElement {
   @target inputElement: HTMLTextAreaElement
   @target characterLimitElement: HTMLElement

data/app/lib/primer/forms/primer_text_field.js

@@ -128,6 +128,6 @@ __decorate([
     target
 ], PrimerTextFieldElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextFieldElement = __decorate([
-    controller
+    controller('primer-text-field')
 ], PrimerTextFieldElement);
 export { PrimerTextFieldElement };

data/app/lib/primer/forms/primer_text_field.ts

@@ -10,7 +10,7 @@ declare global {
   }
 }
 
-@controller
+@controller('primer-text-field')
 export class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
   @target validationElement: HTMLElement

data/app/lib/primer/forms/toggle_switch_input.js

@@ -29,6 +29,6 @@ __decorate([
     target
 ], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
 ToggleSwitchInputElement = __decorate([
-    controller
+    controller('toggle-switch-input')
 ], ToggleSwitchInputElement);
 export { ToggleSwitchInputElement };

data/app/lib/primer/forms/toggle_switch_input.ts

@@ -2,7 +2,7 @@
 
 import {controller, target} from '@github/catalyst'
 
-@controller
+@controller('toggle-switch-input')
 export class ToggleSwitchInputElement extends HTMLElement {
   @target validationElement: HTMLElement
   @target validationMessageElement: HTMLElement

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 82
-      PATCH = 1
+      MINOR = 83
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/action_menu_preview/sub_menus.html.erb

@@ -1,10 +1,10 @@
 <%# Center the invoker button to give left-appearing sub-menus enough space %>
 <div style="<%= sub_menu_anchor_side.to_s.include?("left") ? "text-align: center" : "" %>">
-  <%= render(Primer::Alpha::ActionMenu.new(anchor_align: anchor_align, anchor_side: anchor_side)) do |menu| %>
+  <%= render(Primer::Alpha::ActionMenu.new(anchor_align: anchor_align, anchor_side: anchor_side, anchor_when_narrow: anchor_when_narrow)) do |menu| %>
     <% menu.with_show_button { "Edit" } %>
     <% menu.with_item(label: "Cut") %>
     <% menu.with_item(label: "Copy") %>
-    <% menu.with_sub_menu_item(label: "Paste special", anchor_align: sub_menu_anchor_align, anchor_side: sub_menu_anchor_side) do |sub_menu| %>
+    <% menu.with_sub_menu_item(label: "Paste special", anchor_align: sub_menu_anchor_align, anchor_side: sub_menu_anchor_side, anchor_when_narrow: anchor_when_narrow) do |sub_menu| %>
       <% sub_menu.with_leading_visual_icon(icon: :"sparkle-fill") %>
       <% sub_menu.with_item(label: "Paste plain text") %>
       <% sub_menu.with_item(label: "Paste formulas") %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -9,14 +9,16 @@ module Primer
       # @param select_variant [Symbol] select [single, multiple, none]
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param anchor_when_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
       # @param size [Symbol] select [auto, small, medium, large, xlarge]
       def playground(
         select_variant: Primer::Alpha::ActionMenu::PrimaryMenu::DEFAULT_SELECT_VARIANT,
         anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
         anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        anchor_when_narrow: Primer::Alpha::Overlay::DEFAULT_ANCHOR_WHEN_NARROW,
         size: Primer::Alpha::Overlay::DEFAULT_SIZE
       )
-        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, size: size)) do |menu|
+        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, anchor_when_narrow: anchor_when_narrow, size: size)) do |menu|
           menu.with_show_button { "Menu" }
           menu.with_item(label: "Copy link")
           menu.with_item(label: "Quote reply")
@@ -450,21 +452,53 @@ module Primer
       #
       def two_menus; end
 
+      # @label Fullscreen when narrow
+      #
+      def fullscreen_when_narrow
+        render(Primer::Alpha::ActionMenu.new(anchor_when_narrow: :fullscreen)) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Options"
+          end
+
+          menu.with_item(label: "Edit profile") do |item|
+            item.with_description.with_content("Update your profile information")
+          end
+
+          menu.with_item(label: "Settings") do |item|
+            item.with_description.with_content("Configure your preferences")
+          end
+
+          menu.with_item(label: "Notifications") do |item|
+            item.with_description.with_content("Manage notification settings")
+          end
+
+          menu.with_divider
+
+          menu.with_item(label: "Sign out", scheme: :danger) do |item|
+            item.with_description.with_content("Log out of your account")
+          end
+        end
+      end
+
       # @label Sub-menus
       #
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param anchor_when_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
       # @param sub_menu_anchor_align [Symbol] select [start, center, end]
       # @param sub_menu_anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
       def sub_menus(
         anchor_align: Primer::Alpha::ActionMenu::PrimaryMenu::DEFAULT_ANCHOR_ALIGN,
         anchor_side: Primer::Alpha::ActionMenu::PrimaryMenu::DEFAULT_ANCHOR_SIDE,
+        anchor_when_narrow: Primer::Alpha::ActionMenu::SubMenu::DEFAULT_ANCHOR_WHEN_NARROW,
         sub_menu_anchor_align: Primer::Alpha::ActionMenu::SubMenu::DEFAULT_ANCHOR_ALIGN,
         sub_menu_anchor_side: Primer::Alpha::ActionMenu::SubMenu::DEFAULT_ANCHOR_SIDE
       )
         render_with_template(locals: {
           anchor_align: anchor_align.to_sym,
           anchor_side: anchor_side.to_sym,
+          anchor_when_narrow: anchor_when_narrow.to_sym,
           sub_menu_anchor_align: sub_menu_anchor_align,
           sub_menu_anchor_side: sub_menu_anchor_side
         })

data/previews/primer/beta/button_preview/summary_as_button.html.erb

@@ -17,6 +17,5 @@
   )) do %>
     Button
   <% end %>
-
   <p>A wrapping `details` tag is required when using the button with the `:summary` tag</p>
 </details>

data/previews/primer/beta/truncate_preview/advanced_multiple_items.html.erb

@@ -0,0 +1,32 @@
+<%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
+  <% component.with_item(tag: :li) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-primer")) do |link| %>
+      <% link.with_tooltip(text: "primer") %>
+      primer
+    <% end %>
+  <% end %>
+  <% component.with_item(tag: :li, priority: true) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-css")) do |link| %>
+      <% link.with_tooltip(text: "/ css") %>
+      / css
+    <% end %>
+  <% end %>
+  <% component.with_item(tag: :li) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-issues")) do |link| %>
+      <% link.with_tooltip(text: "/ Issues") %>
+      / Issues
+    <% end %>
+  <% end %>
+  <% component.with_item(tag: :li) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-number")) do |link| %>
+      <% link.with_tooltip(text: "/ #123") %>
+      / #123
+    <% end %>
+  <% end %>
+  <% component.with_item(tag: :li, priority: true) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-title")) do |link| %>
+      <% link.with_tooltip(text: "Visual bug on primer.style found in lists") %>
+      Visual bug on primer.style found in lists
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/truncate_preview/max_widths.html.erb

@@ -0,0 +1,22 @@
+<% long_text = "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" %>
+
+<%= render(Primer::Beta::Truncate.new) do |component| %>
+  <% component.with_item(max_width: 300) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-300")) do |link| %>
+      <% link.with_tooltip(text: long_text) %>
+      <%= long_text %>
+    <% end %>
+  <% end %>
+  <% component.with_item(max_width: 200) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-200")) do |link| %>
+      <% link.with_tooltip(text: long_text) %>
+      <%= long_text %>
+    <% end %>
+  <% end %>
+  <% component.with_item(max_width: 100) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-100")) do |link| %>
+      <% link.with_tooltip(text: long_text) %>
+      <%= long_text %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/truncate_preview/multiple_items.html.erb

@@ -0,0 +1,14 @@
+<%= render(Primer::Beta::Truncate.new) do |component| %>
+  <% component.with_item do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-owner")) do |link| %>
+      <% link.with_tooltip(text: "really-long-repository-owner-name") %>
+      really-long-repository-owner-name
+    <% end %>
+  <% end %>
+  <% component.with_item(font_weight: :bold) do %>
+    <%= render(Primer::Beta::Link.new(href: "https://github.com", id: "truncate-link-repo")) do |link| %>
+      <% link.with_tooltip(text: "really-long-repository-name") %>
+      really-long-repository-name
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/truncate_preview.rb

@@ -19,37 +19,14 @@ module Primer
       end
 
       # @label Multiple items
-      def multiple_items
-        render(Primer::Beta::Truncate.new) do |component|
-          component.with_item do
-            "really-long-repository-owner-name"
-          end
-          component.with_item(font_weight: :bold) do
-            "really-long-repository-name"
-          end
-        end
-      end
+      def multiple_items; end
 
       # @label Advanced multiple items
-      def advanced_multiple_items
-        render(Primer::Beta::Truncate.new(tag: :ol)) do |component|
-          component.with_item(tag: :li) { "primer" }
-          component.with_item(tag: :li, priority: true) { "/ css" }
-          component.with_item(tag: :li) { "/ Issues" }
-          component.with_item(tag: :li) { "/ #123" }
-          component.with_item(tag: :li, priority: true) { "Visual bug on primer.style found in lists" }
-        end
-      end
+      def advanced_multiple_items; end
 
       # @label Max widths
       # @snapshot
-      def max_widths
-        render(Primer::Beta::Truncate.new) do |component|
-          component.with_item(max_width: 300) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
-          component.with_item(max_width: 200) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
-          component.with_item(max_width: 100) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
-        end
-      end
+      def max_widths; end
     end
   end
 end

data/static/arguments.json

@@ -464,6 +464,12 @@
         "default": "N/A",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "menu_id",
         "type": "String",
@@ -540,6 +546,12 @@
         "default": "`:outside_bottom`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+      },
       {
         "name": "dynamic_label",
         "type": "Boolean",
@@ -586,6 +598,12 @@
         "default": "`:outside_right`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
+      },
       {
         "name": "overlay_arguments",
         "type": "Hash",
@@ -2009,6 +2027,12 @@
         "default": "`:normal`",
         "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
       },
+      {
+        "name": "anchor_when_narrow",
+        "type": "Symbol",
+        "default": "`:inherit`",
+        "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
+      },
       {
         "name": "allow_out_of_bounds",
         "type": "Boolean",
@@ -3336,6 +3360,12 @@
         "type": "String",
         "default": "`nil`",
         "description": "Custom label to show when the switch is OFF. Defaults to (\"Off\"). Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Show\" when the switch is OFF."
+      },
+      {
+        "name": "button_type",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "The type attribute for the underlying button element. If `nil`, the button will not have a type attribute, which means it will default to \"submit\" if it's inside a form and \"button\" otherwise."
       }
     ]
   },
@@ -4003,7 +4033,14 @@
     "short_name": "AutoCompleteNoResultItem",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
-    "parameters": []
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
   },
   {
     "component": "Avatar",

data/static/classes.json

@@ -467,6 +467,9 @@
   "Overlay--full-whenNarrow": [
     "Primer::Alpha::Dialog"
   ],
+  "Overlay--fullscreen-whenNarrow": [
+    "Primer::Alpha::Dialog"
+  ],
   "Overlay--hidden": [
     "Primer::Alpha::Dialog"
   ],

data/static/constants.json

@@ -193,11 +193,13 @@
   "Primer::Alpha::ActionMenu::PrimaryMenu": {
     "DEFAULT_ANCHOR_ALIGN": "start",
     "DEFAULT_ANCHOR_SIDE": "outside_bottom",
+    "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
     "GeneratedSlotMethods": "Primer::Alpha::ActionMenu::PrimaryMenu::GeneratedSlotMethods"
   },
   "Primer::Alpha::ActionMenu::SubMenu": {
     "DEFAULT_ANCHOR_ALIGN": "start",
     "DEFAULT_ANCHOR_SIDE": "outside_right",
+    "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
     "GeneratedSlotMethods": "Primer::Alpha::ActionMenu::SubMenu::GeneratedSlotMethods"
   },
   "Primer::Alpha::ActionMenu::SubMenuItem": {
@@ -599,11 +601,26 @@
       "outside_left",
       "outside_right"
     ],
+    "ANCHOR_WHEN_NARROW_MAPPINGS": {
+      "inherit": "",
+      "bottom": "Overlay--placement-bottom-whenNarrow",
+      "fullscreen": "Overlay--fullscreen-whenNarrow",
+      "left": "Overlay--placement-left-whenNarrow",
+      "right": "Overlay--placement-right-whenNarrow"
+    },
+    "ANCHOR_WHEN_NARROW_OPTIONS": [
+      "inherit",
+      "bottom",
+      "fullscreen",
+      "left",
+      "right"
+    ],
     "Body": "Primer::Alpha::Overlay::Body",
     "DEFAULT_ALIGN_CONTENT": "end",
     "DEFAULT_ANCHOR_ALIGN": "start",
     "DEFAULT_ANCHOR_OFFSET": "normal",
     "DEFAULT_ANCHOR_SIDE": "outside_bottom",
+    "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
     "DEFAULT_PADDING": "normal",
     "DEFAULT_POPOVER": "auto",
     "DEFAULT_SIZE": "auto",