openproject-primer_view_components 0.88.0 → 0.89.1

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

@@ -1 +1 @@
-.TreeViewRootUlStyles{list-style:none;margin:0;padding:0}.TreeViewRootUlStyles .TreeViewItem{outline:none}:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}.TreeViewRootUlStyles .TreeViewItemContainer{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);display:grid;font-size:var(--text-body-size-medium);grid-template-areas:"spacer leadingAction toggle content trailingAction";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--trailing-action-width:calc(var(--has-trailing-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-leading-action]){--has-leading-action:1}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-trailing-action]){--has-trailing-action:1}:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{background-color:var(--control-transparent-bgColor-hover)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{outline:2px solid #0000;outline-offset:-2px}}@media (pointer:coarse){.TreeViewRootUlStyles .TreeViewItemContainer{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{background-color:initial;cursor:default}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{outline:none}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role=treeitem]:focus-visible){box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}.TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer{grid-template-columns:0 0 0 1fr}.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true]){background-color:var(--control-transparent-bgColor-selected)}:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:var(--fgColor-accent);border-radius:var(--borderRadius-medium);content:"";height:1.5rem;left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - var(--base-size-12));width:.25rem}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:HighlightText}}.TreeViewRootUlStyles .TreeViewItemToggle{align-items:flex-start;color:var(--fgColor-muted);cursor:pointer;display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12)/2)}.TreeViewRootUlStyles .TreeViewItemToggleHover:hover{background-color:var(--control-transparent-bgColor-hover)}.TreeViewRootUlStyles .TreeViewItemToggleEnd{border-bottom-left-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium)}.TreeViewRootUlStyles a.TreeViewItemContent:hover,.TreeViewRootUlStyles button.TreeViewItemContent:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--control-fgColor-rest)}.TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled=true]){cursor:not-allowed}.TreeViewRootUlStyles .TreeViewItemContent{align-items:center;cursor:pointer;display:flex;gap:var(--stack-gap-condensed);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));outline:none;padding:0 var(--base-size-8);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.TreeViewRootUlStyles .TreeViewItemContent,:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{background-color:initial;border:none;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);position:relative;transition:background 33.333ms linear}[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}[aria-checked=false]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItem-singleSelectCheckmark{visibility:hidden}[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;clip-path:none;mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent){pointer-events:none}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemContentText{color:var(--control-fgColor-disabled)}:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual) svg,[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):hover{cursor:not-allowed}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent):hover{background-color:initial;cursor:not-allowed}}.TreeViewRootUlStyles .TreeViewItemContentText{color:var(--control-fgColor-rest);flex:1 1 auto;width:0}.TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText{word-break:break-word}.TreeViewRootUlStyles .TreeViewItemVisual{align-items:center;color:var(--fgColor-muted);display:flex;height:var(--custom-line-height,1.3rem)}.TreeViewRootUlStyles .TreeViewItemLeadingAction{color:var(--fgColor-muted);display:flex;grid-area:leadingAction}:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction)>button{flex-shrink:1}.TreeViewRootUlStyles .TreeViewItemTrailingAction{color:var(--fgColor-muted);display:flex;grid-area:trailingAction}:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction)>button{flex-shrink:1}.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:var(--borderColor-muted);border-right:var(--borderWidth-thin) solid;height:100%;width:100%}@media (hover:hover){.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:#0000}.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine,.TreeViewRootUlStyles:hover .TreeViewItemLevelLine{border-color:var(--borderColor-muted)}}.TreeViewRootUlStyles .TreeViewVisuallyHidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.TreeViewSkeletonItemContainerStyle{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.TreeViewSkeletonItemContainerStyle{height:2.75rem}}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+1){--tree-item-loading-width:67%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+2){--tree-item-loading-width:47%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+3){--tree-item-loading-width:73%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+4){--tree-item-loading-width:64%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+5){--tree-item-loading-width:50%}.TreeItemSkeletonTextStyles{width:var(--tree-item-loading-width,67%)}.TreeViewFailureMessage{align-items:center;display:grid;gap:.5rem;grid-template-columns:auto 1fr;width:100%}
+.TreeViewRootUlStyles{list-style:none;margin:0;padding:0}.TreeViewRootUlStyles .TreeViewItem{outline:none}:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem):focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}.TreeViewRootUlStyles .TreeViewItemContainer{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);display:grid;font-size:var(--text-body-size-medium);grid-template-areas:"spacer leadingAction toggle content trailingAction";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--trailing-action-width:calc(var(--has-trailing-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-leading-action]){--has-leading-action:1}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([data-has-trailing-action]){--has-trailing-action:1}:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{background-color:var(--control-transparent-bgColor-hover)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):hover{outline:2px solid #0000;outline-offset:-2px}}@media (pointer:coarse){.TreeViewRootUlStyles .TreeViewItemContainer{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{background-color:initial;cursor:default}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItemContainer):has(.TreeViewFailureMessage):hover{outline:none}}:is(.TreeViewRootUlStyles .TreeViewItemContainer):has([role=treeitem]:focus-visible){box-shadow:var(--boxShadow-thick) var(--fgColor-accent)}.TreeViewRootUlStyles:where([data-omit-spacer=true]) .TreeViewItemContainer{grid-template-columns:0 0 0 1fr}.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true]){background-color:var(--control-transparent-bgColor-selected)}:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:var(--fgColor-accent);border-radius:var(--borderRadius-medium);content:"";height:1.5rem;left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - var(--base-size-12));width:.25rem}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:HighlightText}}.TreeViewRootUlStyles .TreeViewItemToggle{align-items:flex-start;color:var(--fgColor-muted);cursor:pointer;display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12)/2)}.TreeViewRootUlStyles .TreeViewItemToggleHover:hover{background-color:var(--control-transparent-bgColor-hover)}.TreeViewRootUlStyles .TreeViewItemToggleEnd{border-bottom-left-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium)}.TreeViewRootUlStyles a.TreeViewItemContent:hover,.TreeViewRootUlStyles button.TreeViewItemContent:hover{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--control-fgColor-rest)}.TreeViewRootUlStyles :has(.TreeViewItemContent[aria-disabled=true]){cursor:not-allowed}.TreeViewRootUlStyles .TreeViewItemContent{align-items:center;cursor:pointer;display:flex;gap:var(--stack-gap-condensed);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));outline:none;padding:0 var(--base-size-8);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.TreeViewRootUlStyles .TreeViewItemContent,:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{background-color:initial;border:none;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);position:relative;transition:background 33.333ms linear}[aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}[aria-checked=false]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItem-singleSelectCheckmark{visibility:hidden}[aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is([aria-checked=mixed]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;clip-path:none;mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent){pointer-events:none}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemContentText{color:var(--control-fgColor-disabled)}:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual) svg,[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemVisual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is([aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent) .FormControl-checkbox):hover{cursor:not-allowed}[aria-disabled=true]:is(.TreeViewRootUlStyles .TreeViewItemContent):hover{background-color:initial;cursor:not-allowed}}.TreeViewRootUlStyles .TreeViewItemContentText{color:var(--control-fgColor-rest);flex:1 1 auto;width:0}.TreeViewRootUlStyles:where([data-truncate-text=true]) .TreeViewItemContentText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TreeViewRootUlStyles:where([data-truncate-text=false]) .TreeViewItemContentText{word-break:break-word}.TreeViewRootUlStyles .TreeViewItemVisual{align-items:center;align-self:baseline;color:var(--fgColor-muted);display:flex;height:var(--custom-line-height,1.3rem)}.TreeViewRootUlStyles .TreeViewItemLeadingAction{grid-area:leadingAction}.TreeViewRootUlStyles .TreeViewItemTrailingAction{grid-area:trailingAction}.TreeViewRootUlStyles .TreeViewItemLeadingAction,.TreeViewRootUlStyles .TreeViewItemTrailingAction{color:var(--fgColor-muted);display:flex;padding-bottom:calc(var(--min-item-height)/2 - var(--custom-line-height, 1.3rem)/2 - 6px);padding-top:calc(var(--min-item-height)/2 - var(--custom-line-height, 1.3rem)/2 - 6px)}:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction)>button{flex-shrink:1}.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:var(--borderColor-muted);border-right:var(--borderWidth-thin) solid;height:100%;width:100%}@media (hover:hover){.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:#0000}.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine,.TreeViewRootUlStyles:hover .TreeViewItemLevelLine{border-color:var(--borderColor-muted)}}.TreeViewRootUlStyles .TreeViewVisuallyHidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.TreeViewSkeletonItemContainerStyle{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.TreeViewSkeletonItemContainerStyle{height:2.75rem}}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+1){--tree-item-loading-width:67%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+2){--tree-item-loading-width:47%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+3){--tree-item-loading-width:73%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+4){--tree-item-loading-width:64%}.TreeViewSkeletonItemContainerStyle:nth-of-type(5n+5){--tree-item-loading-width:50%}.TreeItemSkeletonTextStyles{width:var(--tree-item-loading-width,67%)}.TreeViewFailureMessage{align-items:center;display:grid;gap:.5rem;grid-template-columns:auto 1fr;width:100%}

data/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:focus-within .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:hover .TreeViewItemLevelLine",

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

@@ -1 +1 @@
-{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"AAEA,sBAGE,eAAgB,CADhB,QAAS,CADT,SA6VF,CA5UE,oCACE,YAWF,CATE,2DACE,uDAOF,CALE,8BAHF,2DAII,+BAAgC,CAEhC,iBAEJ,CADE,CAIJ,6CACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAOvB,wCAAyC,CADzC,4BAA6B,CAH7B,YAAa,CAEb,sCAAuC,CAIvC,wEAAyE,CADzE,0HAA2H,CAN3H,iBAAkB,CAElB,UAAW,CAOX,gEAAmE,CACnE,kEAAqE,CACrE,+DAoCF,CAlCE,iFACE,sBACF,CAEA,kFACE,uBACF,CAEA,wDACE,yDAMF,CAJE,8BAHF,wDAII,uBAA8B,CAC9B,mBAEJ,CADE,CAGF,wBAnCF,6CAoCI,qBAAsB,CACtB,yBAeJ,CAdE,CAEA,qFAEE,wBAA6B,CAD7B,cAMF,CAHE,8BAJF,qFAKI,YAEJ,CADE,CAGF,qFACE,uDACF,CAGF,4EACE,+BACF,CAGA,wGACE,4DAwBF,CApBE,mHAaE,sCAAuC,CACvC,wCAAyC,CARzC,UAAW,CADX,aAAc,CAFd,gCAAmC,CAFnC,iBAAkB,CAClB,mCAAoC,CAEpC,YAeF,CAHE,8BAhBF,mHAiBI,8BAEJ,CADE,CAIJ,0CAWE,sBAAuB,CAHvB,0BAA2B,CAI3B,cAAe,CAXf,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,kEAMF,CAEA,qDACE,yDACF,CAEA,6CAEE,oDAAqD,CADrD,iDAEF,CAGA,yGACE,iCAA0B,CAA1B,yBAA0B,CAC1B,iDACF,CAEA,qEACE,kBACF,CAEA,2CAEE,kBAAmB,CAUnB,cAAe,CAXf,YAAa,CAoBb,8BAA+B,CAD/B,iBAAkB,CAjBlB,WAAY,CAgBZ,+EAAkF,CAdlF,YAAa,CADb,4BAA6B,CAc7B,mFAAsF,CAFtF,gFA4FF,CArFE,iHAfA,wBAA6B,CAC7B,WAAY,CAHZ,eAAgB,CAIhB,yBAA0B,CAH1B,wBAAiB,CAAjB,gBAAiB,CAIjB,uCAuBA,CAXA,sEAOE,wCAAyC,CALzC,iCAAkC,CADlC,iBAAkB,CAOlB,qCAGF,CAGE,yFACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EAQF,CALE,qGAGE,kEAAwE,CADxE,kCAAmC,CADnC,kBAGF,CAMF,wGACE,iBACF,CAIA,0FACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EASF,CANE,sGAGE,kEAAwE,CACxE,cAAe,CAFf,wUAAia,CADja,kBAIF,CAIJ,oEACE,mBAgCF,CA9BE,6FACE,qCACF,CAME,yLACE,oCACF,CAKA,qBAEE,qGACE,kBACF,CAMF,0EAEE,wBAA6B,CAD7B,kBAEF,CARA,CAaN,+CACE,iCAAkC,CAClC,aAAc,CACd,OACF,CAEA,gFACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,iFAEE,qBACF,CAEA,0CAOE,kBAAmB,CADnB,0BAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,iDAEE,0BAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,6DACE,aACF,CAGF,kDAEE,0BAA2B,CAD3B,YAAa,CAEb,wBAKF,CAHE,8DACE,aACF,CAGF,6CAQE,qCAAsC,CACtC,0CAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,6CACE,kBACF,CAEA,6GAEE,qCACF,CACF,CAEA,8CAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,oCAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,oCAOI,cAsBJ,CArBE,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAGF,4BACE,wCACF,CAEA,wBAKE,kBAAmB,CAJnB,YAAa,CAEb,SAAW,CADX,8BAA+B,CAE/B,UAEF","file":"tree_view.css","sourcesContent":["/* stylelint-disable selector-max-type -- Copied from primer/react */\n\n.TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  & .TreeViewItem {\n    outline: none;\n\n    &:focus-visible > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        /* stylelint-disable-next-line declaration-property-value-no-unknown -- Copied from primer/react */\n        outline-offset: -2;\n      }\n    }\n  }\n\n  & .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);\n    grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --trailing-action-width: calc(var(--has-trailing-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:has([data-has-leading-action]) {\n      --has-leading-action: 1;\n    }\n\n    &:has([data-has-trailing-action]) {\n      --has-trailing-action: 1;\n    }\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n\n    &:has(.TreeViewFailureMessage):hover {\n      cursor: default;\n      background-color: transparent;\n\n      @media (forced-colors: active) {\n        outline: none;\n      }\n    }\n\n    &:has([role='treeitem']:focus-visible) {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr;\n  }\n\n  /* stylelint-disable-next-line selector-max-specificity */\n  & .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']) {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity -- Copied from primer/react */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  & .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n    cursor: pointer;\n  }\n\n  & .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  & .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  & a.TreeViewItemContent:hover, button.TreeViewItemContent:hover {\n    text-decoration: underline;\n    text-decoration-color: var(--control-fgColor-rest);\n  }\n\n  & :has(.TreeViewItemContent[aria-disabled=\"true\"]) {\n    cursor: not-allowed;\n  }\n\n  & .TreeViewItemContent {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n    outline: none;\n    text-align: left;\n    user-select: none;\n    background-color: transparent;\n    border: none;\n    touch-action: manipulation;\n    -webkit-tap-highlight-color: transparent;\n    cursor: pointer;\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n\n    & .TreeViewItemCheckbox {\n      position: relative;\n      color: var(--control-fgColor-rest);\n      text-align: left;\n      user-select: none;\n      background-color: transparent;\n      border: none;\n      border-radius: var(--borderRadius-medium);\n      transition: background 33.333ms linear;\n      touch-action: manipulation;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    &[aria-checked='true'] {\n      & .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          transition: visibility 0s linear 0s;\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n        }\n      }\n    }\n\n    &[aria-checked='false'] {\n      /* singleselect checkmark */\n      & .TreeViewItem-singleSelectCheckmark {\n        visibility: hidden;\n      }\n    }\n\n    &[aria-checked='mixed'] {\n      & .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n          clip-path: none;\n        }\n      }\n    }\n\n    &[aria-disabled='true'] {\n      pointer-events: none;\n\n      & .TreeViewItemContentText {\n        color: var(--control-fgColor-disabled);\n      }\n\n      & .TreeViewItemVisual {\n        fill: var(--control-fgColor-disabled);\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */\n        & svg {\n          fill: var(--control-fgColor-disabled);\n        }\n      }\n\n      & .FormControl-checkbox {\n        /* stylelint-disable-next-line max-nesting-depth */\n        @media (hover: hover) {\n          /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */\n          &:hover {\n            cursor: not-allowed;\n          }\n        }\n      }\n\n      @media (hover: hover) {\n        /* stylelint-disable-next-line max-nesting-depth */\n        &:hover {\n          cursor: not-allowed;\n          background-color: transparent;\n        }\n      }\n    }\n  }\n\n  & .TreeViewItemContentText {\n    color: var(--control-fgColor-rest);\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Copied from primer/react */\n    word-break: break-word;\n  }\n\n  & .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  & .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: leadingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  & .TreeViewItemTrailingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: trailingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  & .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n\n    /*\n     * On devices without hover, the nesting indicator lines\n     * appear at all times.\n     */\n    border-color: var(--borderColor-muted);\n    border-right: var(--borderWidth-thin) solid;\n  }\n\n  /*\n   * On devices with :hover support, the nesting indicator lines\n   * fade in when the user mouses over the entire component,\n   * or when there's focus inside the component. This makes\n   * sure the component remains simple when not in use.\n   */\n  @media (hover: hover) {\n    .TreeViewItemLevelLine {\n      border-color: transparent;\n    }\n\n    &:hover .TreeViewItemLevelLine,\n    &:focus-within .TreeViewItemLevelLine {\n      border-color: var(--borderColor-muted);\n    }\n  }\n\n  & .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n\n.TreeViewFailureMessage {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.5rem;\n  width: 100%;\n  align-items: center;\n}\n"]}
+{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"AAEA,sBAGE,eAAgB,CADhB,QAAS,CADT,SAiWF,CAhVE,oCACE,YAWF,CATE,2DACE,uDAOF,CALE,8BAHF,2DAII,+BAAgC,CAEhC,iBAEJ,CADE,CAIJ,6CACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAOvB,wCAAyC,CADzC,4BAA6B,CAH7B,YAAa,CAEb,sCAAuC,CAIvC,wEAAyE,CADzE,0HAA2H,CAN3H,iBAAkB,CAElB,UAAW,CAOX,gEAAmE,CACnE,kEAAqE,CACrE,+DAoCF,CAlCE,iFACE,sBACF,CAEA,kFACE,uBACF,CAEA,wDACE,yDAMF,CAJE,8BAHF,wDAII,uBAA8B,CAC9B,mBAEJ,CADE,CAGF,wBAnCF,6CAoCI,qBAAsB,CACtB,yBAeJ,CAdE,CAEA,qFAEE,wBAA6B,CAD7B,cAMF,CAHE,8BAJF,qFAKI,YAEJ,CADE,CAGF,qFACE,uDACF,CAGF,4EACE,+BACF,CAGA,wGACE,4DAwBF,CApBE,mHAaE,sCAAuC,CACvC,wCAAyC,CARzC,UAAW,CADX,aAAc,CAFd,gCAAmC,CAFnC,iBAAkB,CAClB,mCAAoC,CAEpC,YAeF,CAHE,8BAhBF,mHAiBI,8BAEJ,CADE,CAIJ,0CAWE,sBAAuB,CAHvB,0BAA2B,CAI3B,cAAe,CAXf,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,kEAMF,CAEA,qDACE,yDACF,CAEA,6CAEE,oDAAqD,CADrD,iDAEF,CAGA,yGACE,iCAA0B,CAA1B,yBAA0B,CAC1B,iDACF,CAEA,qEACE,kBACF,CAEA,2CAEE,kBAAmB,CAUnB,cAAe,CAXf,YAAa,CAoBb,8BAA+B,CAD/B,iBAAkB,CAjBlB,WAAY,CAgBZ,+EAAkF,CAdlF,YAAa,CADb,4BAA6B,CAc7B,mFAAsF,CAFtF,gFA4FF,CArFE,iHAfA,wBAA6B,CAC7B,WAAY,CAHZ,eAAgB,CAIhB,yBAA0B,CAH1B,wBAAiB,CAAjB,gBAAiB,CAIjB,uCAuBA,CAXA,sEAOE,wCAAyC,CALzC,iCAAkC,CADlC,iBAAkB,CAOlB,qCAGF,CAGE,yFACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EAQF,CALE,qGAGE,kEAAwE,CADxE,kCAAmC,CADnC,kBAGF,CAMF,wGACE,iBACF,CAIA,0FACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EASF,CANE,sGAGE,kEAAwE,CACxE,cAAe,CAFf,wUAAia,CADja,kBAIF,CAIJ,oEACE,mBAgCF,CA9BE,6FACE,qCACF,CAME,yLACE,oCACF,CAKA,qBAEE,qGACE,kBACF,CAMF,0EAEE,wBAA6B,CAD7B,kBAEF,CARA,CAaN,+CACE,iCAAkC,CAClC,aAAc,CACd,OACF,CAEA,gFACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,iFAEE,qBACF,CAEA,0CAQE,kBAAmB,CAHnB,mBAAoB,CAEpB,0BAA2B,CAN3B,YAAa,CAKb,uCAGF,CAEA,iDACE,uBACF,CAEA,kDACE,wBACF,CAEA,mGAGE,0BAA2B,CAD3B,YAAa,CAMb,yFAA6F,CAF7F,sFAOF,CAHE,+GACE,aACF,CAGF,6CAQE,qCAAsC,CACtC,0CAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,6CACE,kBACF,CAEA,6GAEE,qCACF,CACF,CAEA,8CAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,oCAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,oCAOI,cAsBJ,CArBE,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAEA,sDACE,6BACF,CAGF,4BACE,wCACF,CAEA,wBAKE,kBAAmB,CAJnB,YAAa,CAEb,SAAW,CADX,8BAA+B,CAE/B,UAEF","file":"tree_view.css","sourcesContent":["/* stylelint-disable selector-max-type -- Copied from primer/react */\n\n.TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  & .TreeViewItem {\n    outline: none;\n\n    &:focus-visible > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        /* stylelint-disable-next-line declaration-property-value-no-unknown -- Copied from primer/react */\n        outline-offset: -2;\n      }\n    }\n  }\n\n  & .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);\n    grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --trailing-action-width: calc(var(--has-trailing-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:has([data-has-leading-action]) {\n      --has-leading-action: 1;\n    }\n\n    &:has([data-has-trailing-action]) {\n      --has-trailing-action: 1;\n    }\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n\n    &:has(.TreeViewFailureMessage):hover {\n      cursor: default;\n      background-color: transparent;\n\n      @media (forced-colors: active) {\n        outline: none;\n      }\n    }\n\n    &:has([role='treeitem']:focus-visible) {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr;\n  }\n\n  /* stylelint-disable-next-line selector-max-specificity */\n  & .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']) {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity -- Copied from primer/react */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  & .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n    cursor: pointer;\n  }\n\n  & .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  & .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  & a.TreeViewItemContent:hover, button.TreeViewItemContent:hover {\n    text-decoration: underline;\n    text-decoration-color: var(--control-fgColor-rest);\n  }\n\n  & :has(.TreeViewItemContent[aria-disabled=\"true\"]) {\n    cursor: not-allowed;\n  }\n\n  & .TreeViewItemContent {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n    outline: none;\n    text-align: left;\n    user-select: none;\n    background-color: transparent;\n    border: none;\n    touch-action: manipulation;\n    -webkit-tap-highlight-color: transparent;\n    cursor: pointer;\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n\n    & .TreeViewItemCheckbox {\n      position: relative;\n      color: var(--control-fgColor-rest);\n      text-align: left;\n      user-select: none;\n      background-color: transparent;\n      border: none;\n      border-radius: var(--borderRadius-medium);\n      transition: background 33.333ms linear;\n      touch-action: manipulation;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    &[aria-checked='true'] {\n      & .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          transition: visibility 0s linear 0s;\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n        }\n      }\n    }\n\n    &[aria-checked='false'] {\n      /* singleselect checkmark */\n      & .TreeViewItem-singleSelectCheckmark {\n        visibility: hidden;\n      }\n    }\n\n    &[aria-checked='mixed'] {\n      & .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n          clip-path: none;\n        }\n      }\n    }\n\n    &[aria-disabled='true'] {\n      pointer-events: none;\n\n      & .TreeViewItemContentText {\n        color: var(--control-fgColor-disabled);\n      }\n\n      & .TreeViewItemVisual {\n        fill: var(--control-fgColor-disabled);\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */\n        & svg {\n          fill: var(--control-fgColor-disabled);\n        }\n      }\n\n      & .FormControl-checkbox {\n        /* stylelint-disable-next-line max-nesting-depth */\n        @media (hover: hover) {\n          /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */\n          &:hover {\n            cursor: not-allowed;\n          }\n        }\n      }\n\n      @media (hover: hover) {\n        /* stylelint-disable-next-line max-nesting-depth */\n        &:hover {\n          cursor: not-allowed;\n          background-color: transparent;\n        }\n      }\n    }\n  }\n\n  & .TreeViewItemContentText {\n    color: var(--control-fgColor-rest);\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Copied from primer/react */\n    word-break: break-word;\n  }\n\n  & .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    align-self: baseline;\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  & .TreeViewItemLeadingAction {\n    grid-area: leadingAction;\n  }\n\n  & .TreeViewItemTrailingAction {\n    grid-area: trailingAction;\n  }\n\n  & .TreeViewItemTrailingAction,\n  & .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    /* 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 */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  & .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n\n    /*\n     * On devices without hover, the nesting indicator lines\n     * appear at all times.\n     */\n    border-color: var(--borderColor-muted);\n    border-right: var(--borderWidth-thin) solid;\n  }\n\n  /*\n   * On devices with :hover support, the nesting indicator lines\n   * fade in when the user mouses over the entire component,\n   * or when there's focus inside the component. This makes\n   * sure the component remains simple when not in use.\n   */\n  @media (hover: hover) {\n    .TreeViewItemLevelLine {\n      border-color: transparent;\n    }\n\n    &:hover .TreeViewItemLevelLine,\n    &:focus-within .TreeViewItemLevelLine {\n      border-color: var(--borderColor-muted);\n    }\n  }\n\n  & .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n\n.TreeViewFailureMessage {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.5rem;\n  width: 100%;\n  align-items: center;\n}\n"]}

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

@@ -284,25 +284,29 @@
 
     /* 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;
   }
 
   & .TreeViewItemLeadingAction {
-    display: flex;
-    color: var(--fgColor-muted);
     grid-area: leadingAction;
-
-    & > button {
-      flex-shrink: 1;
-    }
   }
 
   & .TreeViewItemTrailingAction {
+    grid-area: trailingAction;
+  }
+
+  & .TreeViewItemTrailingAction,
+  & .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);
 
     & > button {
       flex-shrink: 1;

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

@@ -1 +1 @@
-filterable-tree-view{display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.FilterableTreeViewLayout{flex:1;min-height:0}.FilterableTreeViewTreeContainer{flex:1;min-height:0;overflow-y:auto}::highlight(primer-filterable-tree-view-search-results){background-color:var(--bgColor-attention-muted)}filterable-tree-view mark{background-color:var(--bgColor-attention-muted);color:inherit}.FilterableTreeViewLoadingSkeleton{display:none}filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton{display:block}filterable-tree-view[data-loading] [data-target~="filterable-tree-view.noResultsMessage"],filterable-tree-view[data-loading] tree-view{display:none}
+filterable-tree-view{display:flex;flex-direction:column;max-height:inherit;overflow:hidden}.FilterableTreeViewLayout{flex:1;min-height:0}.FilterableTreeViewTreeContainer{flex:1;min-height:0;overflow-y:auto}::highlight(primer-filterable-tree-view-search-results){background-color:var(--display-yellow-scale-2)}filterable-tree-view mark{background-color:var(--display-yellow-scale-2);color:inherit}.FilterableTreeViewLoadingSkeleton{display:none}filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton{display:block}filterable-tree-view[data-loading] [data-target~="filterable-tree-view.noResultsMessage"],filterable-tree-view[data-loading] tree-view{display:none}

data/app/components/primer/open_project/filterable_tree_view.css.map

@@ -1 +1 @@
-{"version":3,"sources":["filterable_tree_view.pcss"],"names":[],"mappings":"AAYA,qBACE,YAAa,CACb,qBAAsB,CAEtB,kBAAmB,CADnB,eAEF,CAEA,0BACE,MAAO,CACP,YACF,CAEA,iCACE,MAAO,CACP,YAAa,CACb,eACF,CAGA,wDACE,+CACF,CAIA,0BACE,+CAAgD,CAChD,aACF,CAGA,mCACE,YACF,CAIA,sEACE,aACF,CAEA,uIAEE,YACF","file":"filterable_tree_view.css","sourcesContent":["/* CSS for FilterableTreeView */\n\n/* Scroll layout\n *\n * The filterable-tree-view element itself acts as a flex column container.\n * The toolbar (input, segmented control, checkbox) is fixed at the top.\n * Only the tree area scrolls. The consumer is responsible for setting a\n * height or max-height on the filterable-tree-view element (or its parent)\n * to activate scrolling.\n */\n\n/* stylelint-disable-next-line selector-max-type */\nfilterable-tree-view {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height: inherit;\n}\n\n.FilterableTreeViewLayout {\n  flex: 1;\n  min-height: 0;\n}\n\n.FilterableTreeViewTreeContainer {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Highlight style for CSS Custom Highlight API */\n::highlight(primer-filterable-tree-view-search-results) {\n  background-color: var(--bgColor-attention-muted);\n}\n\n/* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */\n/* stylelint-disable-next-line selector-max-type */\nfilterable-tree-view mark {\n  background-color: var(--bgColor-attention-muted);\n  color: inherit;\n}\n\n/* Loading skeleton */\n.FilterableTreeViewLoadingSkeleton {\n  display: none;\n}\n\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\nfilterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {\n  display: block;\n}\n\nfilterable-tree-view[data-loading] tree-view,\nfilterable-tree-view[data-loading] [data-target~=\"filterable-tree-view.noResultsMessage\"] {\n  display: none;\n}\n"]}
+{"version":3,"sources":["filterable_tree_view.pcss"],"names":[],"mappings":"AAYA,qBACE,YAAa,CACb,qBAAsB,CAEtB,kBAAmB,CADnB,eAEF,CAEA,0BACE,MAAO,CACP,YACF,CAEA,iCACE,MAAO,CACP,YAAa,CACb,eACF,CAGA,wDACE,8CACF,CAIA,0BACE,8CAA+C,CAC/C,aACF,CAGA,mCACE,YACF,CAIA,sEACE,aACF,CAEA,uIAEE,YACF","file":"filterable_tree_view.css","sourcesContent":["/* CSS for FilterableTreeView */\n\n/* Scroll layout\n *\n * The filterable-tree-view element itself acts as a flex column container.\n * The toolbar (input, segmented control, checkbox) is fixed at the top.\n * Only the tree area scrolls. The consumer is responsible for setting a\n * height or max-height on the filterable-tree-view element (or its parent)\n * to activate scrolling.\n */\n\n/* stylelint-disable-next-line selector-max-type */\nfilterable-tree-view {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height: inherit;\n}\n\n.FilterableTreeViewLayout {\n  flex: 1;\n  min-height: 0;\n}\n\n.FilterableTreeViewTreeContainer {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Highlight style for CSS Custom Highlight API */\n::highlight(primer-filterable-tree-view-search-results) {\n  background-color: var(--display-yellow-scale-2);\n}\n\n/* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */\n/* stylelint-disable-next-line selector-max-type */\nfilterable-tree-view mark {\n  background-color: var(--display-yellow-scale-2);\n  color: inherit;\n}\n\n/* Loading skeleton */\n.FilterableTreeViewLoadingSkeleton {\n  display: none;\n}\n\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\nfilterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {\n  display: block;\n}\n\nfilterable-tree-view[data-loading] tree-view,\nfilterable-tree-view[data-loading] [data-target~=\"filterable-tree-view.noResultsMessage\"] {\n  display: none;\n}\n"]}

data/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_handleFilterInputKeyDown, _FilterableTreeViewElement_handleTreeKeyDown, _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';
@@ -57,6 +57,7 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
         this.addEventListener('treeViewNodeChecked', this, { signal });
         this.addEventListener('itemActivated', this, { signal });
         this.addEventListener('input', this, { signal });
+        this.addEventListener('keydown', this, { signal });
         if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_isAsyncMode_get)) {
             void __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_fetchAndReplaceTree).call(this);
         }
@@ -72,7 +73,12 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterModeEvent).call(this, event);
         }
         else if (event.target === this.filterInput) {
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputEvent).call(this, event);
+            if (event.type === 'keydown') {
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputKeyDown).call(this, event);
+            }
+            else {
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputEvent).call(this, event);
+            }
         }
         else if (event.target === this.includeSubItemsCheckBox) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent).call(this, event);
@@ -80,6 +86,9 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
         else if (event.target instanceof TreeViewElement || event.target instanceof TreeViewSubTreeNodeElement) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeViewEvent).call(this, event);
         }
+        else if (event.type === 'keydown' && this.treeViewList?.contains(event.target)) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeKeyDown).call(this, event);
+        }
     }
     get filterModeControl() {
         return this.filterModeControlList.closest('segmented-control');
@@ -190,6 +199,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
@@ -318,6 +330,23 @@ _FilterableTreeViewElement_handleFilterInputEvent = function _FilterableTreeView
         __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
     }
 };
+_FilterableTreeViewElement_handleFilterInputKeyDown = function _FilterableTreeViewElement_handleFilterInputKeyDown(event) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+        return;
+    const treeitems = [...(this.treeViewList?.querySelectorAll('[role=treeitem]') ?? [])];
+    const visibleItems = treeitems.filter(item => !item.closest('[hidden]'));
+    if (visibleItems.length === 0)
+        return;
+    event.preventDefault();
+    const focusTarget = event.key === 'ArrowDown' ? visibleItems[0] : visibleItems[visibleItems.length - 1];
+    focusTarget.focus();
+};
+_FilterableTreeViewElement_handleTreeKeyDown = function _FilterableTreeViewElement_handleTreeKeyDown(event) {
+    if (event.key !== 'Escape')
+        return;
+    event.preventDefault();
+    this.filterInput.focus();
+};
 _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent = function _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent(event) {
     if (!this.treeView)
         return;
@@ -433,13 +462,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');
@@ -625,7 +656,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) {

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

@@ -30,13 +30,13 @@ 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 */
 /* 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;
 }
 

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

@@ -189,6 +189,7 @@ module Primer
       DEFAULT_NO_RESULTS_NODE_ARGUMENTS.freeze
 
       # @param src [String] URL of the server endpoint that returns a filtered `<tree-view>` HTML fragment. When set, activates async (server-side) filtering mode. See "Async loading strategy" above.
+      # @param show_search_highlighting [Boolean] Only relevant in async mode (`src:` must be set). When `true` (default), the client highlights matching text using the CSS Custom Highlight API or `<mark>` elements. When `false`, the client skips highlighting entirely; the server is responsible for including highlight markup (e.g. `<mark>` tags) in the returned HTML fragment.
       # @param tree_view_arguments [Hash] Arguments that will be passed to the underlying <%= link_to_component(Primer::Alpha::TreeView) %> component.
       # @param form_arguments [Hash] Form arguments that will be passed to the underlying <%= link_to_component(Primer::Alpha::TreeView) %> component. These arguments allow the selections made within a `FilterableTreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
       # @param filter_input_arguments [Hash] Arguments that will be passed to the <%= link_to_component(Primer::Alpha::TextField) %> component.
@@ -197,6 +198,7 @@ module Primer
       # @param no_results_node_arguments [Hash] Arguments that will be passed to a <%= link_to_component(Primer::Alpha::TreeView::LeafNode) %> component that appears when no items match the filter criteria.
       def initialize(
         src: nil,
+        show_search_highlighting: true,
         tree_view_arguments: {},
         form_arguments: {},
         filter_input_arguments: {},
@@ -250,6 +252,11 @@ module Primer
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :"filterable-tree-view"
         @system_arguments[:src] = src if src
+        @system_arguments[:data] = merge_data(
+          @system_arguments, {
+            data: { show_search_highlighting: false }
+          }
+        ) unless show_search_highlighting
 
         @no_results_node_arguments = no_results_node_arguments.reverse_merge(DEFAULT_NO_RESULTS_NODE_ARGUMENTS)
       end

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

@@ -49,6 +49,7 @@ export class FilterableTreeViewElement extends HTMLElement {
     this.addEventListener('treeViewNodeChecked', this, {signal})
     this.addEventListener('itemActivated', this, {signal})
     this.addEventListener('input', this, {signal})
+    this.addEventListener('keydown', this, {signal})
 
     if (this.#isAsyncMode) {
       void this.#fetchAndReplaceTree()
@@ -69,15 +70,25 @@ export class FilterableTreeViewElement extends HTMLElement {
     return !!this.#src
   }
 
+  get #clientHighlightsEnabled(): boolean {
+    return this.getAttribute('data-show-search-highlighting') !== 'false'
+  }
+
   handleEvent(event: Event) {
     if (event.target === this.filterModeControl) {
       this.#handleFilterModeEvent(event)
     } else if (event.target === this.filterInput) {
-      this.#handleFilterInputEvent(event)
+      if (event.type === 'keydown') {
+        this.#handleFilterInputKeyDown(event as KeyboardEvent)
+      } else {
+        this.#handleFilterInputEvent(event)
+      }
     } else if (event.target === this.includeSubItemsCheckBox) {
       this.#handleIncludeSubItemsCheckBoxEvent(event)
     } else if (event.target instanceof TreeViewElement || event.target instanceof TreeViewSubTreeNodeElement) {
       this.#handleTreeViewEvent(event)
+    } else if (event.type === 'keydown' && this.treeViewList?.contains(event.target as Node)) {
+      this.#handleTreeKeyDown(event as KeyboardEvent)
     }
   }
 
@@ -227,6 +238,25 @@ export class FilterableTreeViewElement extends HTMLElement {
     }
   }
 
+  #handleFilterInputKeyDown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+
+    const treeitems = [...(this.treeViewList?.querySelectorAll<HTMLElement>('[role=treeitem]') ?? [])]
+    const visibleItems = treeitems.filter(item => !item.closest('[hidden]'))
+
+    if (visibleItems.length === 0) return
+
+    event.preventDefault()
+    const focusTarget = event.key === 'ArrowDown' ? visibleItems[0] : visibleItems[visibleItems.length - 1]
+    focusTarget.focus()
+  }
+
+  #handleTreeKeyDown(event: KeyboardEvent) {
+    if (event.key !== 'Escape') return
+    event.preventDefault()
+    this.filterInput.focus()
+  }
+
   #handleIncludeSubItemsCheckBoxEvent(event: Event) {
     if (!this.treeView) return
     if (event.type !== 'input') return
@@ -372,12 +402,12 @@ export class FilterableTreeViewElement extends HTMLElement {
 
       if (requestWasFiltered) {
         this.#expandAllSubTrees()
-        this.#applyAsyncHighlights(query)
+        if (this.#clientHighlightsEnabled) this.#applyAsyncHighlights(query)
         const hasResults = !!this.treeViewList?.querySelector('[role=treeitem]')
         this.noResultsMessage.toggleAttribute('hidden', hasResults)
         this.treeViewList?.toggleAttribute('hidden', !hasResults)
       } else {
-        this.#removeHighlights()
+        if (this.#clientHighlightsEnabled) this.#removeHighlights()
         this.#restoreExpansionState()
         this.noResultsMessage.setAttribute('hidden', 'hidden')
         this.treeViewList?.removeAttribute('hidden')
@@ -700,7 +730,7 @@ export class FilterableTreeViewElement extends HTMLElement {
       this.treeViewList.removeAttribute('hidden')
       this.noResultsMessage.setAttribute('hidden', 'hidden')
 
-      this.#applyHighlights(allRanges)
+      if (this.#clientHighlightsEnabled) this.#applyHighlights(allRanges)
     }
   }
 

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

@@ -35,7 +35,7 @@ module Primer
       def call
         render(@button) do |button|
           button.with_leading_visual_icon(icon: @icon)
-          content
+          content || I18n.t("button_all_filters")
         end
       end
     end

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

@@ -7,6 +7,14 @@
 
     <%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
 
+    <%= segmented_control %>
+
+    <% if @segmented_control_block.present? %>
+      <%= render(@mobile_segmented_control) do |control| %>
+        <% @segmented_control_block.call(control) %>
+      <% end %>
+    <% end %>
+
     <%= quick_sort %>
     <%= quick_group %>
     <% quick_filters.each do |quick_filter| %>
@@ -15,14 +23,6 @@
 
     <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
     <%= filter_button %>
-
-    <%= segmented_control %>
-
-    <% if @segmented_control_block.present? %>
-      <%= render(@mobile_segmented_control) do |control| %>
-        <% @segmented_control_block.call(control) %>
-      <% end %>
-    <% end %>
   </div>
 
   <div class="SubHeader-middlePane SubHeader-hiddenOnExpand">

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

@@ -131,9 +131,10 @@ module Primer
       # To render custom content, call the `with_filter_component` method and pass a block that returns HTML.
       renders_one :filter_button, types: {
         button: {
-          renders: lambda { |icon_only: false, leading_icon: :filter, mobile_label: I18n.t("button_filter"), **kwargs|
+          renders: lambda { |icon_only: false, leading_icon: :filter, mobile_label: I18n.t("button_all_filters"), **kwargs|
             kwargs[:mr] ||= 2
             kwargs[:icon] = leading_icon
+            kwargs[:scheme] ||= :invisible
 
             kwargs[:aria] ||= merge_aria(
               kwargs,
@@ -226,7 +227,7 @@ module Primer
 
       # @param collapsed_search [Boolean] When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(collapsed_search: false, **system_arguments)
+      def initialize(collapsed_search: true, **system_arguments)
         @collapsed_search = collapsed_search
         @system_arguments = system_arguments
         @system_arguments[:tag] = :"sub-header"

data/app/controllers/primer/view_components/filterable_tree_view_items_controller.rb

@@ -165,15 +165,32 @@ module Primer
       def index
         query = params[:query].to_s.strip
         select_variant = (params[:select_variant].presence || "multiple").to_sym
+        server_highlights = params[:server_highlights] == "true"
         nodes = TREE.filter_map { |node| node.filter(query) }
 
-        render locals: {
-          nodes: nodes,
-          query: query,
-          select_variant: select_variant
-        }
+        if server_highlights && query.present?
+          html = render_to_string locals: { nodes:, query:, select_variant: }
+          render html: inject_highlights(html, query)
+        else
+          render locals: { nodes:, query:, select_variant: }
+        end
       end
 
+      private
+
+      # Post-processes the rendered tree HTML to wrap matching label text in <mark> tags.
+      # This avoids html_safety issues with passing markup through ViewComponent's label slot.
+      # Only called in the demo endpoint when server_highlights=true is requested.
+      def inject_highlights(html, query)
+        escaped_query = Regexp.escape(CGI.escapeHTML(query))
+        html.gsub(
+          /(<span class="TreeViewItemContentText">)([^<]*)(#{escaped_query})([^<]*)(<\/span>)/i,
+          '\1\2<mark>\3</mark>\4\5'
+        ).html_safe
+      end
+
+      public
+
       def async_form_tree
         query = params[:query].to_s.strip
         name = params[:name].to_s.presence || "characters"

data/config/locales/en.yml

@@ -5,6 +5,7 @@ en:
   button_close: "Close"
   button_delete: "Delete"
   button_delete_permanently: "Delete permanently"
+  button_all_filters: "All filters"
   button_filter: "Filter"
   button_save: "Save"
 

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/segmented_control_preview.rb

@@ -58,7 +58,6 @@ module Primer
       # @!endgroup
 
       # @!group Icons and text
-      # @label Size small
       # @snapshot
       def icons_and_text_small
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component|
@@ -69,7 +68,6 @@ module Primer
       end
 
       # @label Size medium
-      # @snapshot
       def icons_and_text_medium
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |component|
           component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -81,7 +79,6 @@ module Primer
 
       # @!group Trailing Label
       # @label Size small
-      # @snapshot
       def trailing_label_width_small
         render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :small)) do |component|
           component.with_item(label: "Monthly")
@@ -92,7 +89,6 @@ module Primer
       end
 
       # @label Size medium
-      # @snapshot
       def trailing_label_width_medium
         render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :medium)) do |component|
           component.with_item(label: "Monthly")

data/previews/primer/open_project/filterable_tree_view_preview/async_server_highlights.html.erb

@@ -0,0 +1,4 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new(
+  show_search_highlighting: false,
+  src: primer_view_components.filterable_tree_view_items_tree_path(select_variant: select_variant, server_highlights: true)
+)) %>

data/previews/primer/open_project/filterable_tree_view_preview/default.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
+<%= render(Primer::OpenProject::FilterableTreeView.new(filter_input_arguments: {autocomplete: "off"})) do |tree| %>
   <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
     <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
       <% ravenclaw.with_leaf(label: "Luna Lovegood") %>

data/previews/primer/open_project/filterable_tree_view_preview.rb

@@ -21,7 +21,7 @@ module Primer
 
       # @label Default
       #
-      # @snapshot interactive
+      # @snapshot
       # @param expanded [Boolean] toggle
       def default(expanded: true)
         render_with_template(locals: {
@@ -123,6 +123,18 @@ module Primer
         })
       end
 
+      # @label Async (with server-side highlighting)
+      #
+      # Demonstrates `show_search_highlighting: false`: the client skips its own highlight logic
+      # and the server is responsible for wrapping matching text in `<mark>` (or other HTML) elements.
+      #
+      # @param select_variant [Symbol] select [multiple, single, none]
+      def async_server_highlights(select_variant: :single)
+        render_with_template(locals: {
+          select_variant: select_variant.to_sym
+        })
+      end
+
       # @label Async form input
       def async_form_input
         render_with_template