@mixtint/primer-view-components 0.86.2 → 0.89.0

package/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 {

package/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');

package/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);

package/app/components/primer/alpha/tree_view.css

@@ -304,28 +304,31 @@
 
     /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap
     across more lines. */
+    align-self: baseline;
     height: var(--custom-line-height, 1.3rem);
     color: var(--fgColor-muted);
     align-items: center;
   }
 
 .TreeViewRootUlStyles .TreeViewItemLeadingAction {
-    display: flex;
-    color: var(--fgColor-muted);
     grid-area: leadingAction;
   }
 
-:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
-      flex-shrink: 1;
-    }
-
 .TreeViewRootUlStyles .TreeViewItemTrailingAction {
+    grid-area: trailingAction;
+  }
+
+.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction {
     display: flex;
     color: var(--fgColor-muted);
-    grid-area: trailingAction;
+    /* The dynamic top and bottom padding to maintain the minimum item height for single line items while cancelling out the invisible area of the button */
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);
   }
 
-:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button {
+:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
       flex-shrink: 1;
     }
 

package/app/components/primer/alpha/tree_view.css.json

@@ -37,9 +37,8 @@
     ".TreeViewRootUlStyles:where([data-truncate-text='false']) .TreeViewItemContentText",
     ".TreeViewRootUlStyles .TreeViewItemVisual",
     ".TreeViewRootUlStyles .TreeViewItemLeadingAction",
-    ":is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button",
     ".TreeViewRootUlStyles .TreeViewItemTrailingAction",
-    ":is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button",
+    ":is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button",
     ".TreeViewRootUlStyles .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:hover .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine",

package/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 };

package/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);

package/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);

package/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;

package/app/components/primer/open_project/filterable_tree_view.css

@@ -32,7 +32,7 @@ filterable-tree-view {
 /* Highlight style for CSS Custom Highlight API */
 
 ::highlight(primer-filterable-tree-view-search-results) {
-  background-color: var(--bgColor-attention-muted);
+  background-color: var(--display-yellow-scale-2);
 }
 
 /* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
@@ -40,7 +40,7 @@ filterable-tree-view {
 /* stylelint-disable-next-line selector-max-type */
 
 filterable-tree-view mark {
-  background-color: var(--bgColor-attention-muted);
+  background-color: var(--display-yellow-scale-2);
   color: inherit;
 }
 

package/app/components/primer/open_project/filterable_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 _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
+var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_clientHighlightsEnabled_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
 import { controller, target } from '@github/catalyst';
 import { TreeViewElement } from '../alpha/tree_view/tree_view';
 import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
@@ -190,6 +190,9 @@ _FilterableTreeViewElement_src_get = function _FilterableTreeViewElement_src_get
 _FilterableTreeViewElement_isAsyncMode_get = function _FilterableTreeViewElement_isAsyncMode_get() {
     return !!__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_src_get);
 };
+_FilterableTreeViewElement_clientHighlightsEnabled_get = function _FilterableTreeViewElement_clientHighlightsEnabled_get() {
+    return this.getAttribute('data-show-search-highlighting') !== 'false';
+};
 _FilterableTreeViewElement_handleTreeViewEvent = function _FilterableTreeViewElement_handleTreeViewEvent(origEvent) {
     const event = origEvent;
     // NOTE: This event only fires if someone actually activates the check mark, i.e. does not fire
@@ -224,6 +227,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;
@@ -432,13 +436,15 @@ _FilterableTreeViewElement_fetchAndReplaceTree = async function _FilterableTreeV
         }
         if (requestWasFiltered) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_expandAllSubTrees).call(this);
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyAsyncHighlights).call(this, query);
+            if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyAsyncHighlights).call(this, query);
             const hasResults = !!this.treeViewList?.querySelector('[role=treeitem]');
             this.noResultsMessage.toggleAttribute('hidden', hasResults);
             this.treeViewList?.toggleAttribute('hidden', !hasResults);
         }
         else {
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
+            if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreExpansionState).call(this);
             this.noResultsMessage.setAttribute('hidden', 'hidden');
             this.treeViewList?.removeAttribute('hidden');
@@ -624,7 +630,8 @@ _FilterableTreeViewElement_applyFilterOptions = function _FilterableTreeViewElem
     else {
         this.treeViewList.removeAttribute('hidden');
         this.noResultsMessage.setAttribute('hidden', 'hidden');
-        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyHighlights).call(this, allRanges);
+        if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyHighlights).call(this, allRanges);
     }
 };
 _FilterableTreeViewElement_applyHighlights = function _FilterableTreeViewElement_applyHighlights(ranges) {
@@ -689,7 +696,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')) {

package/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;

package/app/components/primer/open_project/sub_header_element.js

@@ -24,9 +24,10 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
     }
     expandFilterInput() {
         for (const item of this.shownItemsOnExpandedFilter) {
-            item.classList.remove('d-none');
+            item.classList.remove('d-none', 'd-sm-none');
         }
         for (const item of this.filterExpandButton) {
+            item.classList.remove('d-inline-flex', 'd-sm-inline-flex');
             item.classList.add('d-none');
         }
         this.classList.add('SubHeader--expandedSearch');
@@ -37,7 +38,7 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
             item.classList.remove('d-none');
         }
         for (const item of this.shownItemsOnExpandedFilter) {
-            item.classList.add('d-none');
+            item.classList.add('d-none', 'd-sm-none');
         }
         this.classList.remove('SubHeader--expandedSearch');
     }
@@ -68,7 +69,7 @@ __decorate([
     targets
 ], SubHeaderElement.prototype, "filterExpandButton", void 0);
 SubHeaderElement = __decorate([
-    controller
+    controller('sub-header')
 ], SubHeaderElement);
 if (!window.customElements.get('sub-header')) {
     window.SubHeaderElement = SubHeaderElement;

package/app/components/primer/open_project/zen_mode_button.js

@@ -56,7 +56,7 @@ __decorate([
     target
 ], ZenModeButtonElement.prototype, "button", void 0);
 ZenModeButtonElement = __decorate([
-    controller
+    controller('zen-mode-button')
 ], ZenModeButtonElement);
 if (!window.customElements.get('zen-mode-button')) {
     window.ZenModeButtonElement = ZenModeButtonElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mixtint/primer-view-components",
-  "version": "0.86.2",
+  "version": "0.89.0",
   "publishConfig": {
     "access": "public"
   },
@@ -49,11 +49,11 @@
     "@github/auto-check-element": "^6.0.0",
     "@github/auto-complete-element": "^3.8.0",
     "@github/catalyst": "^1.8.1",
-    "@github/clipboard-copy-element": "^1.3.0",
+    "@github/clipboard-copy-element": "^1.3.2",
     "@github/details-menu-element": "^1.0.13",
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.4.1",
-    "@github/relative-time-element": "^5.0.0",
+    "@github/relative-time-element": "^5.2.0",
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.4.0",
     "@oddbird/popover-polyfill": "^0.5.2",
@@ -68,15 +68,15 @@
     "@changesets/cli": "^2.31.0",
     "@github/axe-github": "^0.8.1",
     "@github/browserslist-config": "^1.0.0",
-    "@github/markdownlint-github": "^0.8.0",
+    "@github/markdownlint-github": "^0.8.2",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "^1.61.1",
     "@primer/css": "22.1.1",
     "@primer/primitives": "^11.9.0",
     "@primer/stylelint-config": "^13.6.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^8.5.0",
-    "axe-core": "^4.11.4",
+    "axe-core": "^4.12.1",
     "chokidar-cli": "^3.0.0",
     "css-what": "^7.0.0",
     "cssnano": "^7.1.9",
@@ -85,19 +85,19 @@
     "glob": "^11.1.0",
     "markdownlint-cli2": "^0.22.1",
     "mocha": "^11.7.6",
-    "playwright": "^1.60.0",
-    "postcss": "^8.5.15",
+    "playwright": "^1.61.1",
+    "postcss": "^8.5.16",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^11.3.0",
-    "prettier": "^3.8.3",
+    "postcss-preset-env": "^11.3.2",
+    "prettier": "^3.9.4",
     "rollup": "^2.80.0",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.14",
+    "vite": "^8.1.1",
     "vite-plugin-ruby": "^5.2.2"
   },
   "prettier": "@github/prettier-config",

package/static/arguments.json

@@ -6188,25 +6188,25 @@
       {
         "name": "filter_input_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_FILTER_INPUT_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [TextField](/components/alpha/textfield) component."
       },
       {
         "name": "filter_mode_control_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [SegmentedControl](/components/alpha/segmentedcontrol) component."
       },
       {
         "name": "include_sub_items_check_box_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [CheckBox](/components/alpha/checkbox) component."
       },
       {
         "name": "no_results_node_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_NO_RESULTS_NODE_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to a [TreeView::LeafNode](/components/alpha/treeviewleafnode) component that appears when no items match the filter criteria."
       }
     ]
@@ -6600,12 +6600,12 @@
     ]
   },
   {
-    "component": "OpenProject::SubHeader::QuickFilter",
+    "component": "OpenProject::SubHeader::QuickAction",
     "status": "open_project",
     "a11y_reviewed": false,
-    "short_name": "OpenProjectSubHeaderQuickFilter",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
+    "short_name": "OpenProjectSubHeaderQuickAction",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_action_component.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_action/default/",
     "parameters": []
   },
   {

package/static/audited_at.json

@@ -173,7 +173,7 @@
   "Primer::OpenProject::SubHeader::Button": "",
   "Primer::OpenProject::SubHeader::ButtonGroup": "",
   "Primer::OpenProject::SubHeader::Menu": "",
-  "Primer::OpenProject::SubHeader::QuickFilter": "",
+  "Primer::OpenProject::SubHeader::QuickActionComponent": "",
   "Primer::OpenProject::SubHeader::SegmentedControl": "2023-02-01",
   "Primer::OpenProject::ZenModeButton": "",
   "Primer::Tooltip": "",

package/static/constants.json

@@ -1996,7 +1996,7 @@
       "none"
     ],
     "Menu": "Primer::OpenProject::SubHeader::Menu",
-    "QuickFilter": "Primer::OpenProject::SubHeader::QuickFilter",
+    "QuickActionComponent": "Primer::OpenProject::SubHeader::QuickActionComponent",
     "SHOWN_FILTER_TARGET_SELECTOR": "sub-header.shownItemsOnExpandedFilter",
     "SegmentedControl": "Primer::OpenProject::SubHeader::SegmentedControl"
   },
@@ -2009,8 +2009,8 @@
   "Primer::OpenProject::SubHeader::Menu": {
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::Menu::GeneratedSlotMethods"
   },
-  "Primer::OpenProject::SubHeader::QuickFilter": {
-    "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::QuickFilter::GeneratedSlotMethods"
+  "Primer::OpenProject::SubHeader::QuickActionComponent": {
+    "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::QuickActionComponent::GeneratedSlotMethods"
   },
   "Primer::OpenProject::SubHeader::SegmentedControl": {
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::SegmentedControl::GeneratedSlotMethods"

package/static/info_arch.json

@@ -20383,25 +20383,25 @@
       {
         "name": "filter_input_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_FILTER_INPUT_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the {{#link_to_component}}Primer::Alpha::TextField{{/link_to_component}} component."
       },
       {
         "name": "filter_mode_control_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the {{#link_to_component}}Primer::Alpha::SegmentedControl{{/link_to_component}} component."
       },
       {
         "name": "include_sub_items_check_box_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the {{#link_to_component}}Primer::Alpha::CheckBox{{/link_to_component}} component."
       },
       {
         "name": "no_results_node_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_NO_RESULTS_NODE_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to a {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}} component that appears when no items match the filter criteria."
       }
     ],
@@ -21067,6 +21067,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/input_group/with_error_message",
+        "name": "with_error_message",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": []
@@ -21800,9 +21813,19 @@
         "description": "A button or custom content that will render on the left-hand side of the component, next to the filter input.\n\nTo render a button, call the `with_filter_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}.\n\nTo render custom content, call the `with_filter_component` method and pass a block that returns HTML.",
         "parameters": []
       },
+      {
+        "name": "quick_sort",
+        "description": "A slot for a generic sorting component. Will be rendered next to the search input",
+        "parameters": []
+      },
+      {
+        "name": "quick_group",
+        "description": "A slot for a generic sorting component. Will be rendered next to the sorting button",
+        "parameters": []
+      },
       {
         "name": "quick_filters",
-        "description": "Quick filters shown in the left pane next to the search bar (0–5 items).\nHidden on mobile. Requires all_filters_button to be set when used.\nSupports ActionMenus, Buttons, IconButtons, SelectPanels, and SegmentedControls inside the block.",
+        "description": "Quick filters shown in the left pane next to the search bar (0–5 items total across all types).\nHidden on smaller screens when more than one `quick_filter` is provided. Requires `filter_button` when using more than one `quick_filter`.\nSupports ActionMenus, Buttons, IconButtons, SelectPanels, and SegmentedControls inside the block.",
         "parameters": []
       },
       {
@@ -22108,18 +22131,18 @@
     "subcomponents": []
   },
   {
-    "fully_qualified_name": "Primer::OpenProject::SubHeader::QuickFilter",
+    "fully_qualified_name": "Primer::OpenProject::SubHeader::QuickActionComponent",
     "description": "Thin wrapper for quick filter slots that defers BaseComponent construction to render time,\nallowing system arguments (e.g. display) to be mutated in before_render.\nDo not use standalone",
     "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
-    "component": "OpenProject::SubHeader::QuickFilter",
+    "component": "OpenProject::SubHeader::QuickAction",
     "status": "open_project",
     "a11y_reviewed": false,
-    "short_name": "OpenProjectSubHeaderQuickFilter",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
+    "short_name": "OpenProjectSubHeaderQuickAction",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_action_component.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_action/default/",
     "parameters": [],
     "slots": [],
     "methods": [],