openproject-primer_view_components 0.86.2 → 0.88.0

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

@@ -469,6 +469,7 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
     else {
         // multi-select mode allows unchecking a checked item
         item.setAttribute('aria-checked', `${checked}`);
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
     }
     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
     this.dispatchEvent(new CustomEvent('itemActivated', {
@@ -498,21 +499,29 @@ _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
     return this.popoverElement?.matches(':popover-open');
 };
 _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
-    if (this.selectVariant !== 'single')
-        return;
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;
     if (!invokerLabel)
         return;
     __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
-    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
+    let itemLabel;
+    if (this.selectVariant === 'single') {
+        itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')?.textContent?.trim();
+    }
+    else if (this.selectVariant === 'multiple') {
+        itemLabel = Array.from(this.querySelectorAll(`[aria-checked=true] .ActionListItem-label`))
+            .map(label => (label.textContent || '').trim())
+            .filter(Boolean)
+            .join(', ');
+    }
+    itemLabel || (itemLabel = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f"));
     if (itemLabel && this.dynamicLabel) {
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');
         const contentSpan = document.createElement('span');
-        prefixSpan.textContent = this.dynamicLabelPrefix;
-        contentSpan.textContent = itemLabel.textContent || '';
+        prefixSpan.textContent = this.dynamicLabelPrefix ? `${this.dynamicLabelPrefix} ` : '';
+        contentSpan.textContent = itemLabel;
         invokerLabel.replaceChildren(prefixSpan, contentSpan);
     }
     else {

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

@@ -455,6 +455,8 @@ export class ActionMenuElement extends HTMLElement {
     } else {
       // multi-select mode allows unchecking a checked item
       item.setAttribute('aria-checked', `${checked}`)
+
+      this.#setDynamicLabel()
     }
 
     this.#updateInput()
@@ -497,18 +499,26 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   #setDynamicLabel() {
-    if (this.selectVariant !== 'single') return
     if (!this.dynamicLabel) return
     const invokerLabel = this.invokerLabel
     if (!invokerLabel) return
     this.#originalLabel ||= invokerLabel.textContent || ''
-    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
+    let itemLabel: string | undefined
+    if (this.selectVariant === 'single') {
+      itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')?.textContent?.trim()
+    } else if (this.selectVariant === 'multiple') {
+      itemLabel = Array.from(this.querySelectorAll(`[aria-checked=true] .ActionListItem-label`))
+        .map(label => (label.textContent || '').trim())
+        .filter(Boolean)
+        .join(', ')
+    }
+    itemLabel ||= this.#originalLabel
     if (itemLabel && this.dynamicLabel) {
       const prefixSpan = document.createElement('span')
       prefixSpan.classList.add('color-fg-muted')
       const contentSpan = document.createElement('span')
-      prefixSpan.textContent = this.dynamicLabelPrefix
-      contentSpan.textContent = itemLabel.textContent || ''
+      prefixSpan.textContent = this.dynamicLabelPrefix ? `${this.dynamicLabelPrefix} ` : ''
+      contentSpan.textContent = itemLabel
       invokerLabel.replaceChildren(prefixSpan, contentSpan)
     } else {
       invokerLabel.textContent = this.#originalLabel

data/app/components/primer/alpha/select_panel_element.js

@@ -866,6 +866,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
         else {
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_removeSelectedItem).call(this, item);
         }
+        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_setDynamicLabel).call(this);
     }
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
@@ -885,7 +886,16 @@ _SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLab
     if (!invokerLabel)
         return;
     __classPrivateFieldSet(this, _SelectPanelElement_originalLabel, __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
-    const itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent || __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f");
+    let itemLabel;
+    if (this.selectVariant === 'single') {
+        itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent;
+    }
+    else if (this.selectVariant === 'multiple') {
+        itemLabel = Array.from(this.querySelectorAll(`[${this.ariaSelectionType}=true] .ActionListItem-label`))
+            .map(label => label.textContent?.trim() ?? '')
+            .join(', ');
+    }
+    itemLabel || (itemLabel = __classPrivateFieldGet(this, _SelectPanelElement_originalLabel, "f"));
     if (itemLabel) {
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');

data/app/components/primer/alpha/select_panel_element.ts

@@ -916,6 +916,8 @@ export class SelectPanelElement extends HTMLElement {
       } else {
         this.#removeSelectedItem(item)
       }
+
+      this.#setDynamicLabel()
     }
 
     this.#updateInput()
@@ -952,8 +954,15 @@ export class SelectPanelElement extends HTMLElement {
     const invokerLabel = this.invokerLabel
     if (!invokerLabel) return
     this.#originalLabel ||= invokerLabel.textContent || ''
-    const itemLabel =
-      this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent || this.#originalLabel
+    let itemLabel: string | undefined
+    if (this.selectVariant === 'single') {
+      itemLabel = this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent
+    } else if (this.selectVariant === 'multiple') {
+      itemLabel = Array.from(this.querySelectorAll(`[${this.ariaSelectionType}=true] .ActionListItem-label`))
+        .map(label => label.textContent?.trim() ?? '')
+        .join(', ')
+    }
+    itemLabel ||= this.#originalLabel
     if (itemLabel) {
       const prefixSpan = document.createElement('span')
       prefixSpan.classList.add('color-fg-muted')

data/app/components/primer/alpha/tree_view/tree_view.js

@@ -15,7 +15,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 _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_eventIsSingleSelection, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent;
+var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_eventIsSingleSelection, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_checkNodeOnly;
 import { controller, target } from '@github/catalyst';
 import { useRovingTabIndex } from './tree_view_roving_tab_index';
 let TreeViewElement = class TreeViewElement extends HTMLElement {
@@ -97,8 +97,8 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         // behavior for these element types is user- or browser-defined
         if (!(node instanceof HTMLDivElement))
             return;
-        const path = this.getNodePath(node);
-        const nodeInfo = this.infoFromNode(node, 'true');
+        const newCheckedValue = this.getNodeCheckedValue(node) === 'true' ? 'false' : 'true';
+        const nodeInfo = this.infoFromNode(node, newCheckedValue);
         const checkSuccess = this.dispatchEvent(new CustomEvent('treeViewBeforeNodeChecked', {
             bubbles: true,
             cancelable: true,
@@ -106,11 +106,11 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         }));
         if (!checkSuccess)
             return;
-        if (this.getNodeCheckedValue(node) === 'true') {
+        if (newCheckedValue === 'false') {
             this.setNodeCheckedValue(node, 'false');
         }
         else {
-            this.checkOnlyAtPath(path);
+            __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_checkNodeOnly).call(this, node);
         }
         this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {
             bubbles: true,
@@ -142,7 +142,7 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         return this.querySelector('[aria-current=true]');
     }
     get activeNodes() {
-        return document.querySelectorAll('[aria-checked="true"]');
+        return this.querySelectorAll('[aria-checked="true"]');
     }
     expandAtPath(path) {
         const node = this.subTreeAtPath(path);
@@ -175,10 +175,10 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         this.setNodeCheckedValue(node, 'false');
     }
     checkOnlyAtPath(path) {
-        for (const el of this.activeNodes) {
-            this.uncheckAtPath(this.getNodePath(el));
-        }
-        this.checkAtPath(path);
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return;
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_checkNodeOnly).call(this, node);
     }
     toggleCheckedAtPath(path) {
         const node = this.nodeAtPath(path);
@@ -286,6 +286,9 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             const payload = {
                 path: this.getNodePath(node),
             };
+            const nodeId = node.getAttribute('data-node-id');
+            if (nodeId)
+                payload.nodeId = nodeId;
             const inputValue = this.getFormInputValueForNode(node);
             if (inputValue)
                 payload.value = inputValue;
@@ -424,7 +427,12 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
             }
             else if (this.selectVariant(node) === 'single') {
                 event.preventDefault();
-                this.checkOnlyAtPath(this.getNodePath(node));
+                if (this.getNodeCheckedValue(node) === 'true') {
+                    this.setNodeCheckedValue(node, 'false');
+                }
+                else {
+                    __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_checkNodeOnly).call(this, node);
+                }
             }
             else if (node instanceof HTMLAnchorElement) {
                 // simulate click on space
@@ -433,6 +441,14 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
             break;
     }
 };
+_TreeViewElement_checkNodeOnly = function _TreeViewElement_checkNodeOnly(node) {
+    for (const el of this.activeNodes) {
+        if (el === node)
+            continue;
+        this.setNodeCheckedValue(el, 'false');
+    }
+    this.setNodeCheckedValue(node, 'true');
+};
 __decorate([
     target
 ], TreeViewElement.prototype, "formInputContainer", void 0);

data/app/components/primer/alpha/tree_view/tree_view.ts

@@ -179,8 +179,8 @@ export class TreeViewElement extends HTMLElement {
     // behavior for these element types is user- or browser-defined
     if (!(node instanceof HTMLDivElement)) return
 
-    const path = this.getNodePath(node)
-    const nodeInfo = this.infoFromNode(node, 'true')
+    const newCheckedValue = this.getNodeCheckedValue(node) === 'true' ? 'false' : 'true'
+    const nodeInfo = this.infoFromNode(node, newCheckedValue)
 
     const checkSuccess = this.dispatchEvent(
       new CustomEvent('treeViewBeforeNodeChecked', {
@@ -192,10 +192,10 @@ export class TreeViewElement extends HTMLElement {
 
     if (!checkSuccess) return
 
-    if (this.getNodeCheckedValue(node) === 'true') {
+    if (newCheckedValue === 'false') {
       this.setNodeCheckedValue(node, 'false')
     } else {
-      this.checkOnlyAtPath(path)
+      this.#checkNodeOnly(node)
     }
 
     this.dispatchEvent(
@@ -271,7 +271,11 @@ export class TreeViewElement extends HTMLElement {
         } else if (this.selectVariant(node) === 'single') {
           event.preventDefault()
 
-          this.checkOnlyAtPath(this.getNodePath(node))
+          if (this.getNodeCheckedValue(node) === 'true') {
+            this.setNodeCheckedValue(node, 'false')
+          } else {
+            this.#checkNodeOnly(node)
+          }
         } else if (node instanceof HTMLAnchorElement) {
           // simulate click on space
           node.click()
@@ -313,7 +317,7 @@ export class TreeViewElement extends HTMLElement {
   }
 
   get activeNodes() {
-    return document.querySelectorAll('[aria-checked="true"]')
+    return this.querySelectorAll('[aria-checked="true"]')
   }
 
   expandAtPath(path: string[]) {
@@ -352,11 +356,19 @@ export class TreeViewElement extends HTMLElement {
   }
 
   checkOnlyAtPath(path: string[]) {
+    const node = this.nodeAtPath(path)
+    if (!node) return
+
+    this.#checkNodeOnly(node)
+  }
+
+  #checkNodeOnly(node: Element) {
     for (const el of this.activeNodes) {
-      this.uncheckAtPath(this.getNodePath(el))
+      if (el === node) continue
+      this.setNodeCheckedValue(el, 'false')
     }
 
-    this.checkAtPath(path)
+    this.setNodeCheckedValue(node, 'true')
   }
 
   toggleCheckedAtPath(path: string[]) {
@@ -479,10 +491,13 @@ export class TreeViewElement extends HTMLElement {
       newInput.removeAttribute('data-target')
       newInput.removeAttribute('form')
 
-      const payload: {path: string[]; value?: string} = {
+      const payload: {path: string[]; nodeId?: string; value?: string} = {
         path: this.getNodePath(node),
       }
 
+      const nodeId = node.getAttribute('data-node-id')
+      if (nodeId) payload.nodeId = nodeId
+
       const inputValue = this.getFormInputValueForNode(node)
       if (inputValue) payload.value = inputValue
 

data/app/components/primer/open_project/avatar_fallback.js

@@ -100,6 +100,6 @@ let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
     }
 };
 AvatarFallbackElement = __decorate([
-    controller
+    controller('avatar-fallback')
 ], AvatarFallbackElement);
 export { AvatarFallbackElement };

data/app/components/primer/open_project/avatar_fallback.ts

@@ -13,7 +13,7 @@ import {controller} from '@github/catalyst'
  * due to a Catalyst bug where @attr accessors aren't properly initialized
  * when elements have pre-existing attribute values.
  */
-@controller
+@controller('avatar-fallback')
 export class AvatarFallbackElement extends HTMLElement {
   private img: HTMLImageElement | null = null
   private testImage: HTMLImageElement | null = null

data/app/components/primer/open_project/border_box/collapsible_header.js

@@ -17,5 +17,5 @@ let CollapsibleHeaderElement = class CollapsibleHeaderElement extends Collapsibl
     }
 };
 CollapsibleHeaderElement = __decorate([
-    controller
+    controller('collapsible-header')
 ], CollapsibleHeaderElement);

data/app/components/primer/open_project/border_box/collapsible_header.ts

@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {CollapsibleElement} from '../collapsible'
 
-@controller
+@controller('collapsible-header')
 class CollapsibleHeaderElement extends CollapsibleElement {
   connectedCallback() {
     if (!this.closest('.Box')) {

data/app/components/primer/open_project/collapsible_section.js

@@ -12,5 +12,5 @@ let CollapsibleSectionElement = class CollapsibleSectionElement extends Collapsi
     }
 };
 CollapsibleSectionElement = __decorate([
-    controller
+    controller('collapsible-section')
 ], CollapsibleSectionElement);

data/app/components/primer/open_project/collapsible_section.ts

@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {CollapsibleElement} from './collapsible'
 
-@controller
+@controller('collapsible-section')
 class CollapsibleSectionElement extends CollapsibleElement {
   get baseClass(): string {
     return 'CollapsibleSection'

data/app/components/primer/open_project/danger_dialog_form_helper.js

@@ -62,7 +62,7 @@ __decorate([
     attr
 ], DangerDialogFormHelperElement.prototype, "confirmationLiveMessageUnchecked", void 0);
 DangerDialogFormHelperElement = __decorate([
-    controller
+    controller('danger-dialog-form-helper')
 ], DangerDialogFormHelperElement);
 if (!window.customElements.get('danger-dialog-form-helper')) {
     window.DangerDialogFormHelperElement = DangerDialogFormHelperElement;

data/app/components/primer/open_project/danger_dialog_form_helper.ts

@@ -3,7 +3,7 @@ import type {LiveRegionElement} from '@primer/live-region-element'
 
 const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]'
 
-@controller
+@controller('danger-dialog-form-helper')
 class DangerDialogFormHelperElement extends HTMLElement {
   @target checkbox: HTMLInputElement | undefined
   @target liveRegion: LiveRegionElement

data/app/components/primer/open_project/fieldset.rb

@@ -18,7 +18,7 @@ module Primer
       # @param legend_text [String] A legend should be short and concise. The String will also be read by assistive technology.
       # @param visually_hide_legend [Boolean] Controls if the legend is visible. If `true`, screen reader only text will be added.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(legend_text: nil, visually_hide_legend: false, **system_arguments) # rubocop:disable Lint/MissingSuper
+      def initialize(legend_text: nil, visually_hide_legend: false, **system_arguments)
         @legend_text = legend_text
         @visually_hide_legend = visually_hide_legend
         @system_arguments = deny_tag_argument(**system_arguments)
@@ -40,7 +40,7 @@ module Primer
 
         attr_reader :text
 
-        def initialize(text: nil, visually_hide_legend: false, **system_arguments) # rubocop:disable Lint/MissingSuper
+        def initialize(text: nil, visually_hide_legend: false, **system_arguments)
           @text = text
 
           @system_arguments = deny_tag_argument(**system_arguments)

data/app/components/primer/open_project/filterable_tree_view.js

@@ -224,6 +224,7 @@ _FilterableTreeViewElement_updateCheckedNodeIds = function _FilterableTreeViewEl
                 }
                 __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeIds, "f").set(nodeId, nodeInfo.checkedValue);
                 const payload = { path: nodeInfo.path };
+                payload.nodeId = nodeId;
                 const dataValue = node.getAttribute('data-value');
                 if (dataValue)
                     payload.value = dataValue;
@@ -689,7 +690,7 @@ __decorate([
     target
 ], FilterableTreeViewElement.prototype, "includeSubItemsCheckBox", void 0);
 FilterableTreeViewElement = __decorate([
-    controller
+    controller('filterable-tree-view')
 ], FilterableTreeViewElement);
 export { FilterableTreeViewElement };
 if (!window.customElements.get('filterable-tree-view')) {

data/app/components/primer/open_project/filterable_tree_view.rb

@@ -199,10 +199,10 @@ module Primer
         src: nil,
         tree_view_arguments: {},
         form_arguments: {},
-        filter_input_arguments: DEFAULT_FILTER_INPUT_ARGUMENTS.dup,
-        filter_mode_control_arguments: DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS.dup,
-        include_sub_items_check_box_arguments: DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.dup,
-        no_results_node_arguments: DEFAULT_NO_RESULTS_NODE_ARGUMENTS.dup,
+        filter_input_arguments: {},
+        filter_mode_control_arguments: {},
+        include_sub_items_check_box_arguments: {},
+        no_results_node_arguments: {},
         **system_arguments
       )
         @tree_view_arguments = tree_view_arguments.dup
@@ -218,6 +218,7 @@ module Primer
           **tree_view_arguments
         )
 
+        filter_input_arguments = filter_input_arguments.reverse_merge(DEFAULT_FILTER_INPUT_ARGUMENTS)
         filter_input_arguments[:data] = merge_data(
           filter_input_arguments, {
             data: { target: "filterable-tree-view.filterInput" }
@@ -250,7 +251,7 @@ module Primer
         @system_arguments[:tag] = :"filterable-tree-view"
         @system_arguments[:src] = src if src
 
-        @no_results_node_arguments = no_results_node_arguments
+        @no_results_node_arguments = no_results_node_arguments.reverse_merge(DEFAULT_NO_RESULTS_NODE_ARGUMENTS)
       end
 
       def with_default_filter_modes

data/app/components/primer/open_project/filterable_tree_view.ts

@@ -18,7 +18,7 @@ type NodeState = {
 
 const ASYNC_DEBOUNCE_MS = 300
 
-@controller
+@controller('filterable-tree-view')
 export class FilterableTreeViewElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @target filterModeControlList: HTMLElement
@@ -119,7 +119,8 @@ export class FilterableTreeViewElement extends HTMLElement {
           }
 
           this.#checkedNodeIds.set(nodeId, nodeInfo.checkedValue)
-          const payload: {path: string[]; value?: string} = {path: nodeInfo.path}
+          const payload: {path: string[]; nodeId?: string; value?: string} = {path: nodeInfo.path}
+          payload.nodeId = nodeId
           const dataValue = node.getAttribute('data-value')
           if (dataValue) payload.value = dataValue
           this.#checkedNodeFormPayloads.set(nodeId, payload)

data/app/components/primer/open_project/flex_layout.rb

@@ -29,10 +29,10 @@ module Primer
         # no slot provided
         return false if rows.empty? && columns.empty? && boxes.empty?
 
-        if [rows, columns, boxes].count { |arr| !arr.empty? } == 1
+        if [rows, columns, boxes].one? { |arr| !arr.empty? }
           # only rows or columns or boxes are used
           true
-        elsif [rows, columns, boxes].count { |arr| !arr.empty? } > 1
+        elsif [rows, columns, boxes].many? { |arr| !arr.empty? }
           # rows, columns and boxes are used together, which is not allowed
           raise ArgumentError, "You can't mix row, column and box slots"
         end

data/app/components/primer/open_project/inline_message.rb

@@ -33,7 +33,7 @@ module Primer
       # @param scheme [Symbol] <%= one_of(Primer::OpenProject::InlineMessage::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::OpenProject::InlineMessage::SIZE_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(scheme:, size: DEFAULT_SIZE, **system_arguments) # rubocop:disable Lint/MissingSuper
+      def initialize(scheme:, size: DEFAULT_SIZE, **system_arguments)
         resolved_scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme)
         resolved_size   = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
 

data/app/components/primer/open_project/input_group.html.erb

@@ -4,6 +4,15 @@
     <%= trailing_action %>
   <% end %>
 
+  <% if @text_input_validation_message %>
+    <div class="FormControl-inlineValidation mt-1" id="<%= @text_input_validation_message_id %>">
+      <span class="FormControl-inlineValidation--visual">
+        <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      </span>
+      <span><%= @text_input_validation_message %></span>
+    </div>
+  <% end %>
+
   <% if caption %>
     <%= caption %>
   <% end %>

data/app/components/primer/open_project/input_group.rb

@@ -49,6 +49,19 @@ module Primer
       renders_one :text_input, lambda { |readonly: true, **system_arguments|
         deny_single_argument(:input_width, "Set the `input_width` on the `InputGroup`", **system_arguments)
         deny_single_argument(:caption, "Set the `caption` on the `InputGroup`", **system_arguments)
+
+        # Extract validation_message so it can be rendered outside the flex row.
+        # This prevents the trailing action from misaligning when validation is present.
+        @text_input_validation_message = system_arguments.delete(:validation_message)
+        if @text_input_validation_message
+          @text_input_validation_message_id = self.class.generate_id(base_name: "input-group-validation")
+          system_arguments[:invalid] = true
+          system_arguments[:aria] = merge_aria(
+            system_arguments,
+            { aria: { describedby: @text_input_validation_message_id } }
+          )
+        end
+
         system_arguments[:input_width] = @system_arguments[:input_width]
 
         system_arguments[:classes] = class_names(

data/app/components/primer/open_project/page_header.rb

@@ -288,7 +288,7 @@ module Primer
       end
 
       def render_mobile_menu?
-        actions.count > 1
+        actions.many?
       end
 
       def show_state?

data/app/components/primer/open_project/page_header_element.js

@@ -15,7 +15,7 @@ let PageHeaderElement = class PageHeaderElement extends HTMLElement {
     }
 };
 PageHeaderElement = __decorate([
-    controller
+    controller('page-header')
 ], PageHeaderElement);
 if (!window.customElements.get('page-header')) {
     window.PageHeaderElement = PageHeaderElement;

data/app/components/primer/open_project/page_header_element.ts

@@ -1,6 +1,6 @@
 import {controller} from '@github/catalyst'
 
-@controller
+@controller('page-header')
 class PageHeaderElement extends HTMLElement {
   menuItemClick(event: Event) {
     const currentTarget = event.currentTarget as HTMLButtonElement

data/app/components/primer/open_project/pagination.rb

@@ -269,9 +269,7 @@ module Primer
           key = :"page-#{page[:num]}-break"
           content = "…"
 
-          props.merge!(
-            role: "presentation"
-          )
+          props[:role] = "presentation"
         end
 
         props[:class] = class_names("Page", props[:class])

data/app/components/primer/open_project/sub_header/{quick_filter.rb → quick_action_component.rb}

@@ -5,11 +5,17 @@ module Primer
     # Thin wrapper for quick filter slots that defers BaseComponent construction to render time,
     # allowing system arguments (e.g. display) to be mutated in before_render.
     # Do not use standalone
-    class SubHeader::QuickFilter < Primer::Component
+    class SubHeader::QuickActionComponent < Primer::Component
       status :open_project
 
       def initialize(**system_arguments)
         @system_arguments = system_arguments
+        system_arguments[:tag] = :div
+        system_arguments[:mr] ||= 2
+        system_arguments[:classes] = class_names(
+          "SubHeader-hiddenOnExpand",
+          system_arguments[:classes]
+        )
       end
 
       def merge_system_arguments!(**other_arguments)

data/app/components/primer/open_project/sub_header.html.erb

@@ -7,6 +7,8 @@
 
     <%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
 
+    <%= quick_sort %>
+    <%= quick_group %>
     <% quick_filters.each do |quick_filter| %>
       <%= quick_filter %>
     <% end %>