openproject-primer_view_components 0.86.1 → 0.87.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/dropdown.css

@@ -1 +1 @@
-.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large));left:0;list-style:none;margin-top:var(--base-size-2);padding-bottom:var(--control-small-paddingBlock);padding-top:var(--control-small-paddingBlock);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin) solid var(--borderColor-default);display:block;height:0;margin:var(--stack-gap-condensed) 0}.dropdown-header{color:var(--fgColor-muted);font-size:var(--text-body-size-small);padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:var(--base-size-8);margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor);left:auto;right:-14px;top:var(--base-size-12)}.dropdown-menu-e{left:100%;margin-left:var(--base-size-8);margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor);left:-14px;top:var(--base-size-12)}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:var(--base-size-4);top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default);bottom:-8px;left:var(--base-size-8)}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:var(--base-size-8);top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:var(--base-size-8);top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
+.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-small);left:0;list-style:none;margin-top:var(--base-size-2);padding-bottom:var(--control-small-paddingBlock);padding-top:var(--control-small-paddingBlock);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin) solid var(--borderColor-default);display:block;height:0;margin:var(--stack-gap-condensed) 0}.dropdown-header{color:var(--fgColor-muted);font-size:var(--text-body-size-small);padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:var(--base-size-8);margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor);left:auto;right:-14px;top:calc(var(--base-size-12) - var(--borderWidth-thin))}.dropdown-menu-e{left:100%;margin-left:var(--base-size-8);margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor);left:-14px;top:calc(var(--base-size-12) - var(--borderWidth-thin))}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:var(--base-size-4);top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default);bottom:-8px;left:var(--base-size-8)}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor);bottom:-7px;left:calc(var(--base-size-8) + var(--borderWidth-thin))}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:var(--base-size-8);top:-16px}.dropdown-menu-sw:after{left:auto;right:calc(var(--base-size-8) + var(--borderWidth-thin));top:-14px}.dropdown-menu-se:before{left:var(--base-size-8);top:-16px}.dropdown-menu-se:after{left:calc(var(--base-size-8) + var(--borderWidth-thin));top:-14px}

data/app/components/primer/alpha/dropdown.css.map

@@ -1 +1 @@
-{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oEAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAaE,2BAA4B,CAD5B,uCAAwC,CAExC,+DAAgE,CAChE,wCAAyC,CACzC,kEAAoE,CAbpE,MAAO,CAQP,eAAgB,CADhB,6BAA8B,CAD9B,gDAAiD,CAFjD,6CAA8C,CAN9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAwCF,CA1BE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAGE,sBAA+C,CAA/C,kDACF,CAGA,qBAIE,sBAA2C,CAA3C,8CACF,CAGA,kBACE,eACF,CAGF,2BACE,UAQF,CANE,0CAGE,gBAAiB,CADjB,sFAAuF,CAEvF,qBACF,CAIF,eAKE,4BAA6B,CAJ7B,aAAc,CAGd,eAAgB,CADhB,sKAAuK,CAGvK,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,+CAAgD,CAFhD,+BAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAKE,mEAAoE,CAJpE,aAAc,CACd,QAAS,CAET,mCAEF,CAEA,iBAIE,0BAA2B,CAD3B,qCAAsC,CADtC,sFAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,+BAAgC,CADhC,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAuBF,CAnBE,wBAME,kBAAyB,CACzB,4CAA6C,CAF7C,SAAU,CADV,WAAY,CAFZ,QAMF,CAEA,uBAKE,kBAAyB,CAEzB,wCAAyC,CAHzC,SAAU,CADV,WAAY,CAFZ,uBAOF,CAGF,iBAEE,SAAU,CAGV,8BAA+B,CAD/B,YAAa,CAHb,KAAM,CAEN,UAqBF,CAjBE,wBAKE,kBAAyB,CACzB,6CAA8C,CAF9C,UAAW,CAFX,QAKF,CAEA,uBAIE,kBAAyB,CAEzB,yCAA0C,CAH1C,UAAW,CAFX,uBAMF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,gCAAiC,CAHjC,QAqCF,CAhCE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAQE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,+CAAgD,CAHhD,WAAY,CACZ,uBAQF,CAEA,wBASE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,2CAA4C,CAJ5C,WAAY,CAEZ,SAQF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAeF,CAbE,wBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAiBF,CAdE,yBAIE,SAAU,CADV,wBAAyB,CADzB,SAGF,CAEA,wBAKE,SAAU,CADV,UAAW,CAFX,SAIF,CAIA,yBAGE,uBAAwB,CADxB,SAEF,CAEA,wBAIE,SAAU,CAFV,SAGF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown-caret {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  vertical-align: middle;\n  content: '';\n  border-style: solid;\n  border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 100;\n  width: 160px;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-top: var(--control-small-paddingBlock);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-bottom: var(--control-small-paddingBlock);\n  margin-top: var(--base-size-2);\n  list-style: none;\n  background-color: var(--overlay-bgColor);\n  background-clip: padding-box;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: inline-block;\n    content: '';\n  }\n\n  /* caret border */\n  &::before {\n    /* stylelint-disable-next-line primer/borders */\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  /* caret background (should match dropdown background) */\n  &::after {\n    /* stylelint-disable-next-line primer/borders */\n    border: 7px solid transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-bottom-color: var(--overlay-bgColor);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & > ul {\n    list-style: none;\n  }\n}\n\n.dropdown-menu-no-overflow {\n  width: auto;\n\n  & .dropdown-item {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n    overflow: visible;\n    text-overflow: inherit;\n  }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  overflow: hidden;\n  color: var(--fgColor-default);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    & > .octicon {\n      color: inherit;\n      opacity: 1;\n    }\n\n    & [class*='color-fg-'] {\n      color: inherit !important;\n    }\n\n    & > .Label {\n      color: inherit !important;\n      border-color: currentcolor;\n    }\n  }\n\n  &.btn-link {\n    width: 100%;\n    text-align: left;\n  }\n}\n\n.dropdown-signout {\n  width: 100%;\n  text-align: left;\n  background: none;\n  border: 0;\n}\n\n.dropdown-divider {\n  display: block;\n  height: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin: var(--stack-gap-condensed) 0;\n  border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n  display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n  top: 0;\n  right: 100%;\n  left: auto;\n  width: auto;\n  margin-top: 0;\n  margin-right: var(--base-size-8);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: 10px;\n    /* stylelint-disable-next-line primer/spacing */\n    right: -16px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: var(--base-size-12);\n    /* stylelint-disable-next-line primer/spacing */\n    right: -14px;\n    left: auto;\n    border-color: transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-e {\n  top: 0;\n  left: 100%;\n  width: auto;\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: 10px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: -16px;\n    border-color: transparent;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: var(--base-size-12);\n    /* stylelint-disable-next-line primer/spacing */\n    left: -14px;\n    border-color: transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-ne {\n  top: auto;\n  bottom: 100%;\n  left: 0;\n  margin-bottom: var(--base-size-4);\n\n  &::before,\n  &::after {\n    top: auto;\n    right: auto;\n  }\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    bottom: -8px;\n    left: var(--base-size-8);\n    /* stylelint-disable-next-line primer/borders */\n    border-top: 8px solid var(--borderColor-default);\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 8px solid transparent;\n    border-bottom: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-left: 8px solid transparent;\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    bottom: -7px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: 10px;\n    /* stylelint-disable-next-line primer/borders, primer/colors */\n    border-top: 7px solid var(--overlay-bgColor);\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 7px solid transparent;\n    border-bottom: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-left: 7px solid transparent;\n  }\n}\n\n.dropdown-menu-s {\n  right: 50%;\n  left: auto;\n  transform: translateX(50%);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n}\n\n.dropdown-menu-sw {\n  right: 0;\n  left: auto;\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    right: var(--base-size-8);\n    left: auto;\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    /* stylelint-disable-next-line primer/spacing */\n    right: 10px;\n    left: auto;\n  }\n}\n\n.dropdown-menu-se {\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    left: var(--base-size-8);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: 10px;\n  }\n}\n"]}
+{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oEAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,uCAAwC,CAExC,+DAAgE,CAChE,wCAAyC,CACzC,uCAAwC,CAXxC,MAAO,CAMP,eAAgB,CADhB,6BAA8B,CAD9B,gDAAiD,CADjD,6CAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAsCF,CA1BE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAGE,sBAA+C,CAA/C,kDACF,CAGA,qBAIE,sBAA2C,CAA3C,8CACF,CAGA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,sFAAuF,CAEvF,qBACF,CAIF,eAIE,4BAA6B,CAH7B,aAAc,CAEd,eAAgB,CADhB,sKAAuK,CAGvK,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,+CAAgD,CAFhD,+BAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,mEAAoE,CAHpE,aAAc,CACd,QAAS,CACT,mCAEF,CAEA,iBAGE,0BAA2B,CAD3B,qCAAsC,CADtC,sFAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,+BAAgC,CADhC,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAwBF,CApBE,wBAME,kBAAyB,CACzB,4CAA6C,CAF7C,SAAU,CADV,WAAY,CAFZ,QAMF,CAEA,uBAME,kBAAyB,CAEzB,wCAAyC,CAHzC,SAAU,CADV,WAAY,CAFZ,uDAOF,CAGF,iBAEE,SAAU,CAGV,8BAA+B,CAD/B,YAAa,CAHb,KAAM,CAEN,UAsBF,CAlBE,wBAKE,kBAAyB,CACzB,6CAA8C,CAF9C,UAAW,CAFX,QAKF,CAEA,uBAKE,kBAAyB,CAEzB,yCAA0C,CAH1C,UAAW,CAFX,uDAMF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,gCAAiC,CAHjC,QAqCF,CAhCE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAQE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,+CAAgD,CAHhD,WAAY,CACZ,uBAQF,CAEA,wBASE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,2CAA4C,CAJ5C,WAAY,CAEZ,uDAQF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAeF,CAbE,wBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAiBF,CAdE,yBAIE,SAAU,CADV,wBAAyB,CADzB,SAGF,CAEA,wBAKE,SAAU,CADV,wDAAyD,CAFzD,SAIF,CAIA,yBAGE,uBAAwB,CADxB,SAEF,CAEA,wBAIE,uDAAwD,CAFxD,SAGF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown-caret {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  vertical-align: middle;\n  content: '';\n  border-style: solid;\n  border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 100;\n  width: 160px;\n  padding-top: var(--control-small-paddingBlock);\n  padding-bottom: var(--control-small-paddingBlock);\n  margin-top: var(--base-size-2);\n  list-style: none;\n  background-color: var(--overlay-bgColor);\n  background-clip: padding-box;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-floating-small);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: inline-block;\n    content: '';\n  }\n\n  /* caret border */\n  &::before {\n    /* stylelint-disable-next-line primer/borders */\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  /* caret background (should match dropdown background) */\n  &::after {\n    /* stylelint-disable-next-line primer/borders */\n    border: 7px solid transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-bottom-color: var(--overlay-bgColor);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & > ul {\n    list-style: none;\n  }\n}\n\n.dropdown-menu-no-overflow {\n  width: auto;\n\n  & .dropdown-item {\n    padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n    overflow: visible;\n    text-overflow: inherit;\n  }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n  display: block;\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  overflow: hidden;\n  color: var(--fgColor-default);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    & > .octicon {\n      color: inherit;\n      opacity: 1;\n    }\n\n    & [class*='color-fg-'] {\n      color: inherit !important;\n    }\n\n    & > .Label {\n      color: inherit !important;\n      border-color: currentcolor;\n    }\n  }\n\n  &.btn-link {\n    width: 100%;\n    text-align: left;\n  }\n}\n\n.dropdown-signout {\n  width: 100%;\n  text-align: left;\n  background: none;\n  border: 0;\n}\n\n.dropdown-divider {\n  display: block;\n  height: 0;\n  margin: var(--stack-gap-condensed) 0;\n  border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n  display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n  top: 0;\n  right: 100%;\n  left: auto;\n  width: auto;\n  margin-top: 0;\n  margin-right: var(--base-size-8);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: 10px;\n    /* stylelint-disable-next-line primer/spacing */\n    right: -16px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: calc(var(--base-size-12) - var(--borderWidth-thin));\n    /* stylelint-disable-next-line primer/spacing */\n    right: -14px;\n    left: auto;\n    border-color: transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-e {\n  top: 0;\n  left: 100%;\n  width: auto;\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: 10px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: -16px;\n    border-color: transparent;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: calc(var(--base-size-12) - var(--borderWidth-thin));\n    /* stylelint-disable-next-line primer/spacing */\n    left: -14px;\n    border-color: transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-ne {\n  top: auto;\n  bottom: 100%;\n  left: 0;\n  margin-bottom: var(--base-size-4);\n\n  &::before,\n  &::after {\n    top: auto;\n    right: auto;\n  }\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    bottom: -8px;\n    left: var(--base-size-8);\n    /* stylelint-disable-next-line primer/borders */\n    border-top: 8px solid var(--borderColor-default);\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 8px solid transparent;\n    border-bottom: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-left: 8px solid transparent;\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    bottom: -7px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: calc(var(--base-size-8) + var(--borderWidth-thin));\n    /* stylelint-disable-next-line primer/borders, primer/colors */\n    border-top: 7px solid var(--overlay-bgColor);\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 7px solid transparent;\n    border-bottom: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-left: 7px solid transparent;\n  }\n}\n\n.dropdown-menu-s {\n  right: 50%;\n  left: auto;\n  transform: translateX(50%);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n}\n\n.dropdown-menu-sw {\n  right: 0;\n  left: auto;\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    right: var(--base-size-8);\n    left: auto;\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    /* stylelint-disable-next-line primer/spacing */\n    right: calc(var(--base-size-8) + var(--borderWidth-thin));\n    left: auto;\n  }\n}\n\n.dropdown-menu-se {\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    left: var(--base-size-8);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: calc(var(--base-size-8) + var(--borderWidth-thin));\n  }\n}\n"]}

data/app/components/primer/alpha/dropdown.pcss

@@ -26,9 +26,7 @@
   left: 0;
   z-index: 100;
   width: 160px;
-  /* stylelint-disable-next-line primer/spacing */
   padding-top: var(--control-small-paddingBlock);
-  /* stylelint-disable-next-line primer/spacing */
   padding-bottom: var(--control-small-paddingBlock);
   margin-top: var(--base-size-2);
   list-style: none;
@@ -36,7 +34,7 @@
   background-clip: padding-box;
   border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
-  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));
+  box-shadow: var(--shadow-floating-small);
 
   &::before,
   &::after {
@@ -70,7 +68,6 @@
   width: auto;
 
   & .dropdown-item {
-    /* stylelint-disable-next-line primer/spacing */
     padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
     overflow: visible;
     text-overflow: inherit;
@@ -80,7 +77,6 @@
 /* Dropdown items (can be links or buttons) */
 .dropdown-item {
   display: block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   overflow: hidden;
   color: var(--fgColor-default);
@@ -123,13 +119,11 @@
 .dropdown-divider {
   display: block;
   height: 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin: var(--stack-gap-condensed) 0;
   border-top: var(--borderWidth-thin) solid var(--borderColor-default);
 }
 
 .dropdown-header {
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-small);
   color: var(--fgColor-muted);
@@ -163,7 +157,8 @@
   }
 
   &::after {
-    top: var(--base-size-12);
+    /* stylelint-disable-next-line primer/spacing */
+    top: calc(var(--base-size-12) - var(--borderWidth-thin));
     /* stylelint-disable-next-line primer/spacing */
     right: -14px;
     left: auto;
@@ -190,7 +185,8 @@
   }
 
   &::after {
-    top: var(--base-size-12);
+    /* stylelint-disable-next-line primer/spacing */
+    top: calc(var(--base-size-12) - var(--borderWidth-thin));
     /* stylelint-disable-next-line primer/spacing */
     left: -14px;
     border-color: transparent;
@@ -228,7 +224,7 @@
     /* stylelint-disable-next-line primer/spacing */
     bottom: -7px;
     /* stylelint-disable-next-line primer/spacing */
-    left: 10px;
+    left: calc(var(--base-size-8) + var(--borderWidth-thin));
     /* stylelint-disable-next-line primer/borders, primer/colors */
     border-top: 7px solid var(--overlay-bgColor);
     /* stylelint-disable-next-line primer/borders */
@@ -274,7 +270,7 @@
     /* stylelint-disable-next-line primer/spacing */
     top: -14px;
     /* stylelint-disable-next-line primer/spacing */
-    right: 10px;
+    right: calc(var(--base-size-8) + var(--borderWidth-thin));
     left: auto;
   }
 }
@@ -290,6 +286,6 @@
     /* stylelint-disable-next-line primer/spacing */
     top: -14px;
     /* stylelint-disable-next-line primer/spacing */
-    left: 10px;
+    left: calc(var(--base-size-8) + var(--borderWidth-thin));
   }
 }

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/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/pagination.rb

@@ -57,6 +57,10 @@ module Primer
         end
       end
 
+      def render?
+        page_count > 1
+      end
+
       private
 
       def cast_integer!(value, name)
@@ -81,36 +85,45 @@ module Primer
       end
 
       def build_pagination_model
-        prev_page = previous_page_item
-        next_page = next_page_item
-
-        return [prev_page, next_page] unless show_pages || page_count <= 0
+        pages = []
 
-        pages = if all_pages_fit?
-                  full_pagination_without_breaks
-                else
-                  paginated_number_items
-                end
+        pages << previous_page_item unless first_page?
+        pages.concat(number_page_items) if show_pages
+        pages << next_page_item unless last_page?
 
-        [prev_page, *pages, next_page]
+        pages
       end
 
       def previous_page_item
         {
           type: PAGE_TYPE__PREV,
-          num: current_page - 1,
-          disabled: current_page == 1
+          num: current_page - 1
         }
       end
 
       def next_page_item
         {
           type: PAGE_TYPE__NEXT,
-          num: current_page + 1,
-          disabled: current_page == page_count
+          num: current_page + 1
         }
       end
 
+      def first_page?
+        current_page == 1
+      end
+
+      def last_page?
+        current_page == page_count
+      end
+
+      def number_page_items
+        if all_pages_fit?
+          full_pagination_without_breaks
+        else
+          paginated_number_items
+        end
+      end
+
       def full_pagination_without_breaks
         pages = []
         add_pages(pages, 1, page_count)
@@ -233,20 +246,12 @@ module Primer
           key_string = key.to_s
           content = I18n.t("pagination.#{key_string}")
 
-          if page[:disabled]
-            props.merge!(
-              rel: key_string,
-              "aria-hidden": "true",
-              "aria-disabled": "true"
-            )
-          else
-            props.merge!(
-              rel: key_string,
-              href: href_builder.call(page[:num]),
-              "aria-label": I18n.t("pagination.#{key_string}_page"),
-              **@link_arguments
-            )
-          end
+          props.merge!(
+            rel: key_string,
+            href: href_builder.call(page[:num]),
+            "aria-label": I18n.t("pagination.#{key_string}_page"),
+            **@link_arguments
+          )
 
         when PAGE_TYPE__NUM
           key = :"page-#{page[:num]}"

data/app/components/primer/open_project/sub_header/quick_action_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # 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::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)
+        @system_arguments[:aria] = merge_aria(@system_arguments, other_arguments)
+        @system_arguments[:data] = merge_data(@system_arguments, other_arguments)
+        @system_arguments.merge!(**other_arguments)
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

@@ -7,15 +7,15 @@
 
     <%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
 
-    <%= render(Primer::BaseComponent.new(tag: :div, display: :flex)) do %>
-      <% quick_filters.each do |quick_filter| %>
-        <%= quick_filter %>
-      <% end %>
-
-      <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
-      <%= filter_button %>
+    <%= quick_sort %>
+    <%= quick_group %>
+    <% quick_filters.each do |quick_filter| %>
+      <%= quick_filter %>
     <% end %>
 
+    <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
+    <%= filter_button %>
+
     <%= segmented_control %>
 
     <% if @segmented_control_block.present? %>

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

@@ -10,8 +10,8 @@ module Primer
       SHOWN_FILTER_TARGET_SELECTOR = "sub-header.shownItemsOnExpandedFilter"
       FILTER_EXPAND_BUTTON_TARGET_SELECTOR = "sub-header.filterExpandButton"
 
-      MOBILE_ACTIONS_DISPLAY = [:flex, :none].freeze
-      DESKTOP_ACTIONS_DISPLAY = [:none, :flex].freeze
+      MOBILE_ACTIONS_DISPLAY = [:flex, :flex, :none].freeze
+      DESKTOP_ACTIONS_DISPLAY = [:none, :none, :flex].freeze
 
       # A button or custom content that will render on the right-hand side of the component.
       #
@@ -101,7 +101,7 @@ module Primer
           system_arguments[:data][:action] += " input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton"
         end
 
-        trigger_display = @collapsed_search ? :inline_flex : [:inline_flex, :none]
+        trigger_display = @collapsed_search ? :inline_flex : [:inline_flex, :inline_flex, :none]
 
         @collapsed_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
                                                                  display: trigger_display,
@@ -170,16 +170,27 @@ module Primer
         }
       }
 
-      # Quick filters shown in the left pane next to the search bar (0–5 items).
-      # Hidden on mobile. Requires all_filters_button to be set when used.
+      # A slot for a generic sorting component. Will be rendered next to the search input
+      renders_one :quick_sort, lambda { |**kwargs|
+        deny_tag_argument(**kwargs)
+
+        QuickActionComponent.new(**kwargs)
+      }
+
+      # A slot for a generic sorting component. Will be rendered next to the sorting button
+      renders_one :quick_group, lambda { |**kwargs|
+        deny_tag_argument(**kwargs)
+
+        QuickActionComponent.new(**kwargs)
+      }
+
+      # Quick filters shown in the left pane next to the search bar (0–5 items total across all types).
+      # Hidden on smaller screens when more than one `quick_filter` is provided. Requires `filter_button` when using more than one `quick_filter`.
       # Supports ActionMenus, Buttons, IconButtons, SelectPanels, and SegmentedControls inside the block.
       renders_many :quick_filters, lambda { |**kwargs|
         deny_tag_argument(**kwargs)
-        kwargs[:tag] = :div
-        kwargs[:mr] ||= 2
-        kwargs[:display] = DESKTOP_ACTIONS_DISPLAY
 
-        Primer::BaseComponent.new(**kwargs)
+        QuickActionComponent.new(**kwargs)
       }
 
       renders_one :segmented_control, lambda { |**system_arguments, &block|
@@ -235,17 +246,25 @@ module Primer
       end
 
       def before_render
-        if quick_filters.any? && filter_button.nil?
+        all_quick_actions = [quick_sort, quick_group].compact + quick_filters
+
+        if quick_filters.size > 1 && filter_button.nil?
           raise ArgumentError, "You must provide a filter_button when using quick_filters."
         end
 
         if quick_filters.size > 5
-          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{quick_filters.size}."
+          raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{all_quick_actions.size}."
+        end
+
+        if quick_filters.size > 1
+          quick_filters.each do |qf|
+            qf.merge_system_arguments!(display: DESKTOP_ACTIONS_DISPLAY)
+          end
         end
 
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
-          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && quick_filters.empty?
+          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && all_quick_actions.empty?
         )
       end
 

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

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

@@ -29,9 +29,10 @@ 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')
@@ -43,7 +44,7 @@ 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')
   }

data/lib/primer/view_components/version.rb

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