openproject-primer_view_components 0.91.2 → 0.91.4

data/app/components/primer/alpha/tree_view/sub_tree.html.erb

@@ -2,12 +2,12 @@
   <%= loader %>
 <% else %>
   <% unless no_items_message? %>
-    <% with_no_items_message { "No items" }  # set the default %>
+    <% with_no_items_message_content(I18n.t("tree_view.label_empty_sub_tree"))  # Set the default %>
   <% end %>
 
   <%= render(@container) do %>
     <% if nodes.empty? %>
-      <%= render(Primer::Alpha::TreeView::Node.new(path: path, data: { "no-items": true }, node_variant: :div)) do |node| %>
+      <%= render(Primer::Alpha::TreeView::Node.new(path: no_items_message_path, node_variant: :div, disabled: true)) do |node| %>
         <% node.with_text_content do %>
           <%= no_items_message %>
         <% end %>

data/app/components/primer/alpha/tree_view/sub_tree.rb

@@ -107,6 +107,12 @@ module Primer
         def defer?
           loader?
         end
+
+        private
+
+        def no_items_message_path
+          path + %w(no_items)
+        end
       end
     end
   end

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

@@ -1 +1 @@
-.TreeViewRootUlStyles{padding:0;margin:0;list-style:none}.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;position:relative;display:grid;width:100%;font-size:var(--text-body-size-medium);color:var(--fgColor-default);border-radius:var(--borderRadius-medium);grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);grid-template-areas:"spacer leadingAction toggle content trailingAction";--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{cursor:default;background-color:initial}@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{position:absolute;top:calc(50% - var(--base-size-12));left:calc(var(--base-size-8)*-1);width:.25rem;height:1.5rem;content:"";background-color:var(--fgColor-accent);border-radius:var(--borderRadius-medium)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:HighlightText}}.TreeViewRootUlStyles .TreeViewItemToggle{display:flex;height:100%;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12)/2);color:var(--fgColor-muted);grid-area:toggle;justify-content:center;align-items:flex-start;cursor:pointer}.TreeViewRootUlStyles .TreeViewItemToggleHover:hover{background-color:var(--control-transparent-bgColor-hover)}.TreeViewRootUlStyles .TreeViewItemToggleEnd{border-top-left-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.TreeViewRootUlStyles :is(a.TreeViewItemContent:hover,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{display:flex;align-items:center;height:100%;padding:0 var(--base-size-8);outline:none;cursor:pointer;padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));grid-area:content;gap:var(--stack-gap-condensed)}.TreeViewRootUlStyles .TreeViewItemContent,:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{text-align:left;-webkit-user-select:none;user-select:none;background-color:initial;border:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{position:relative;color:var(--control-fgColor-rest);border-radius:var(--borderRadius-medium);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{visibility:visible;transition:visibility 0s linear 0s;animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}[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{visibility:visible;mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;clip-path:none}[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{cursor:not-allowed;background-color:initial}}.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{display:flex;align-self:baseline;height:var(--custom-line-height,1.3rem);color:var(--fgColor-muted);align-items:center}.TreeViewRootUlStyles .TreeViewItemLeadingAction{grid-area:leadingAction}.TreeViewRootUlStyles .TreeViewItemTrailingAction{grid-area:trailingAction}.TreeViewRootUlStyles :is(.TreeViewItemLeadingAction,.TreeViewItemTrailingAction){display:flex;color:var(--fgColor-muted);padding-top:calc(var(--min-item-height)/2 - var(--custom-line-height, 1.3rem)/2 - 6px);padding-bottom: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{width:100%;height:100%;border-color:var(--borderColor-muted);border-right:var(--borderWidth-thin) solid}@media (hover:hover){.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:#0000}.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine,.TreeViewRootUlStyles:hover .TreeViewItemLevelLine{border-color:var(--borderColor-muted)}}.TreeViewRootUlStyles .TreeViewVisuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.TreeViewSkeletonItemContainerStyle{display:flex;align-items:center;column-gap:.5rem;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{display:grid;grid-template-columns:auto 1fr;gap:.5rem;width:100%;align-items:center}
+.TreeViewRootUlStyles{padding:0;margin:0;list-style:none}.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;position:relative;display:grid;width:100%;font-size:var(--text-body-size-medium);color:var(--fgColor-default);border-radius:var(--borderRadius-medium);grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr var(--trailing-action-width);grid-template-areas:"spacer leadingAction toggle content trailingAction";--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{cursor:default;background-color:initial}@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{position:absolute;top:calc(50% - var(--base-size-12));left:calc(var(--base-size-8)*-1);width:.25rem;height:1.5rem;content:"";background-color:var(--fgColor-accent);border-radius:var(--borderRadius-medium)}@media (forced-colors:active){:is(.TreeViewRootUlStyles .TreeViewItem>.TreeViewItemContainer:has(.TreeViewItemContent[aria-current=true])):after{background-color:HighlightText}}.TreeViewRootUlStyles .TreeViewItemToggle{display:flex;height:100%;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12)/2);color:var(--fgColor-muted);grid-area:toggle;justify-content:center;align-items:flex-start;cursor:pointer}.TreeViewRootUlStyles .TreeViewItemToggleHover:hover{background-color:var(--control-transparent-bgColor-hover)}.TreeViewRootUlStyles .TreeViewItemToggleEnd{border-top-left-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.TreeViewRootUlStyles :is(a.TreeViewItemContent:hover,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{display:flex;align-items:center;height:100%;padding:0 var(--base-size-8);outline:none;cursor:pointer;padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));grid-area:content;gap:var(--stack-gap-condensed)}.TreeViewRootUlStyles .TreeViewItemContent,:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{text-align:left;-webkit-user-select:none;user-select:none;background-color:initial;border:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}:is(.TreeViewRootUlStyles .TreeViewItemContent) .TreeViewItemCheckbox{position:relative;color:var(--control-fgColor-rest);border-radius:var(--borderRadius-medium);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{visibility:visible;transition:visibility 0s linear 0s;animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}[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{visibility:visible;mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;clip-path:none}[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{cursor:not-allowed;background-color:initial}}.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{display:flex;align-self:flex-start;height:var(--custom-line-height,1.3rem);color:var(--fgColor-muted);align-items:center}.TreeViewRootUlStyles .TreeViewItemLeadingAction{grid-area:leadingAction}.TreeViewRootUlStyles .TreeViewItemTrailingAction{grid-area:trailingAction}.TreeViewRootUlStyles :is(.TreeViewItemLeadingAction,.TreeViewItemTrailingAction){display:flex;color:var(--fgColor-muted);padding-top:calc(var(--min-item-height)/2 - var(--custom-line-height, 1.3rem)/2 - 6px);padding-bottom: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{width:100%;height:100%;border-color:var(--borderColor-muted);border-right:var(--borderWidth-thin) solid}@media (hover:hover){.TreeViewRootUlStyles .TreeViewItemLevelLine{border-color:#0000}.TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine,.TreeViewRootUlStyles:hover .TreeViewItemLevelLine{border-color:var(--borderColor-muted)}}.TreeViewRootUlStyles .TreeViewVisuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.TreeViewSkeletonItemContainerStyle{display:flex;align-items:center;column-gap:.5rem;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{display:grid;grid-template-columns:auto 1fr;gap:.5rem;width:100%;align-items:center}

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

@@ -1 +1 @@
-{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"AAEA,sBACE,SAAU,CACV,QAAS,CACT,eAgWF,CAjVE,oCACE,YAWF,CATE,2DACE,uDAOF,CALE,8BAHF,2DAII,+BAAgC,CAEhC,iBAEJ,CADE,CAIJ,6CACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAEvB,iBAAkB,CAClB,YAAa,CACb,UAAW,CACX,sCAAuC,CACvC,4BAA6B,CAC7B,wCAAyC,CACzC,0HAA2H,CAC3H,wEAAyE,CAEzE,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,qFACE,cAAe,CACf,wBAKF,CAHE,8BAJF,qFAKI,YAEJ,CADE,CAGF,qFACE,uDACF,CAGF,4EACE,+BACF,CAGA,wGACE,4DAwBF,CApBE,mHACE,iBAAkB,CAClB,mCAAoC,CACpC,gCAAmC,CACnC,YAAc,CACd,aAAc,CACd,UAAW,CAOX,sCAAuC,CACvC,wCAKF,CAHE,8BAhBF,mHAiBI,8BAEJ,CADE,CAIJ,0CACE,YAAa,CACb,WAAY,CAKZ,kEAAuE,CACvE,0BAA2B,CAC3B,gBAAiB,CACjB,sBAAuB,CACvB,sBAAuB,CACvB,cACF,CAEA,qDACE,yDACF,CAEA,6CACE,iDAAkD,CAClD,oDACF,CAGA,wFACE,iCAA0B,CAA1B,yBAA0B,CAC1B,iDACF,CAEA,qEACE,kBACF,CAEA,2CACE,YAAa,CACb,kBAAmB,CACnB,WAAY,CACZ,4BAA6B,CAC7B,YAAa,CAOb,cAAe,CAIf,gFAAmF,CAEnF,mFAAsF,CACtF,+EAAkF,CAClF,iBAAkB,CAClB,8BAuFF,CArFE,iHAjBA,eAAgB,CAChB,wBAAiB,CAAjB,gBAAiB,CACjB,wBAA6B,CAC7B,WAAY,CACZ,yBAA0B,CAC1B,uCAuBA,CAXA,sEACE,iBAAkB,CAClB,iCAAkC,CAKlC,wCAAyC,CACzC,qCAGF,CAGE,yFACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EAQF,CALE,qGACE,kBAAmB,CACnB,kCAAmC,CACnC,kEACF,CAMF,wGACE,iBACF,CAIA,0FACE,8CAA+C,CAC/C,oDAAqD,CACrD,0EASF,CANE,sGACE,kBAAmB,CACnB,wUAAia,CACja,kEAAwE,CACxE,cACF,CAIJ,oEACE,mBAgCF,CA9BE,6FACE,qCACF,CAME,yLACE,oCACF,CAKA,qBAEE,qGACE,kBACF,CAMF,0EACE,kBAAmB,CACnB,wBACF,CARA,CAaN,+CACE,iCAAkC,CAClC,aAAc,CACd,OACF,CAEA,gFACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,iFAEE,qBACF,CAEA,0CACE,YAAa,CAIb,mBAAoB,CACpB,uCAAyC,CACzC,0BAA2B,CAC3B,kBACF,CAEA,iDACE,uBACF,CAEA,kDACE,wBACF,CAEA,kFAEE,YAAa,CACb,0BAA2B,CAG3B,sFAA0F,CAE1F,yFAKF,CAHE,+GACE,aACF,CAGF,6CACE,UAAW,CACX,WAAY,CAMZ,qCAAsC,CACtC,0CACF,CAQA,qBACE,6CACE,kBACF,CAEA,6GAEE,qCACF,CACF,CAEA,8CACE,iBAAkB,CAClB,SAAU,CACV,UAAW,CACX,SAAU,CAEV,WAAY,CACZ,eAAgB,CAEhB,kBAAsB,CACtB,kBAAmB,CACnB,cACF,CAGF,oCACE,YAAa,CACb,kBAAmB,CACnB,gBAAkB,CAClB,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,wBACE,YAAa,CACb,8BAA+B,CAC/B,SAAW,CACX,UAAW,CACX,kBACF","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    /* stylelint-disable-next-line property-no-deprecated -- `clip` is the widely-supported visually-hidden idiom; kept for older-browser screen-reader support */\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":"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","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: flex-start;\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    /* stylelint-disable-next-line property-no-deprecated -- `clip` is the widely-supported visually-hidden idiom; kept for older-browser screen-reader support */\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,7 +284,7 @@
 
     /* 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;
+    align-self: flex-start;
     height: var(--custom-line-height, 1.3rem);
     color: var(--fgColor-muted);
     align-items: center;

data/app/components/primer/beta/border_box.css

@@ -1 +1 @@
-.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.btn-octicon:is(.Box--condensed .Box-btn-octicon){padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);line-height:1.25}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{padding:var(--stack-padding-spacious);line-height:1.25}.Box--spacious .Box-title{font-size:var(--text-title-size-medium)}.Box--spacious .Box-body,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious)}.btn-octicon:is(.Box--spacious .Box-btn-octicon){padding:var(--stack-padding-spacious);margin:calc(var(--stack-gap-spacious)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious)}.Box-header{padding:var(--stack-padding-normal);margin:calc(var(--borderWidth-thin)*-1) calc(var(--borderWidth-thin)*-1) 0;background-color:var(--bgColor-muted);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}.Box-body{padding:var(--stack-padding-normal);border-bottom:var(--borderWidth-thin) solid var(--borderColor-default)}.Box-body:last-of-type{margin-bottom:calc(var(--borderWidth-thin)*-1);border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.Box-row{padding:var(--stack-padding-normal);margin-top:calc(var(--borderWidth-thin)*-1);list-style-type:none;border-top:var(--borderWidth-thin) solid var(--borderColor-muted)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-row:last-of-type{border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted)}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted)}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted)}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted)}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default)}.Box-row-link,.Box-row-link:hover{-webkit-text-decoration:none;text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent)}}.Box-row--drag-button{opacity:0}.Box-footer{padding:var(--stack-padding-normal);margin-top:calc(var(--borderWidth-thin)*-1);border-top:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted)}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted)}.Box--danger,:is(.Box--danger .Box-body):last-of-type,:is(.Box--danger .Box-row):first-of-type{border-color:var(--borderColor-danger-emphasis)}.Box-header--blue{background-color:var(--bgColor-accent-muted);border-color:var(--borderColor-accent-muted)}.Box-row--yellow{background-color:var(--bgColor-attention-muted)}.Box-row--blue{background-color:var(--bgColor-accent-muted)}.Box-row--gray{background-color:var(--bgColor-muted)}.Box-btn-octicon.btn-octicon{padding:var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-small-gap-spacious)*-1);line-height:var(--text-title-lineHeight-large)}
+.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.btn-octicon:is(.Box--condensed .Box-btn-octicon){padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);line-height:1.25}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{padding:var(--stack-padding-spacious);line-height:1.25}.Box--spacious .Box-title{font-size:var(--text-title-size-medium)}.Box--spacious .Box-body,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious)}.btn-octicon:is(.Box--spacious .Box-btn-octicon){padding:var(--stack-padding-spacious);margin:calc(var(--stack-gap-spacious)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious)}.Box-header{padding:var(--stack-padding-normal);margin:calc(var(--borderWidth-thin)*-1) calc(var(--borderWidth-thin)*-1) 0;background-color:var(--bgColor-muted);border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}.Box-body{padding:var(--stack-padding-normal);border-bottom:var(--borderWidth-thin) solid var(--borderColor-default)}.Box-body:first-child{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-body:last-child,.Box-header:last-child{margin-bottom:calc(var(--borderWidth-thin)*-1);border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.Box-row{padding:var(--stack-padding-normal);margin-top:calc(var(--borderWidth-thin)*-1);list-style-type:none;border-top:var(--borderWidth-thin) solid var(--borderColor-muted)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted)}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted)}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted)}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted)}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default)}.Box-row-link,.Box-row-link:hover{-webkit-text-decoration:none;text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent)}}.Box-row--drag-button{opacity:0}.Box-footer{padding:var(--stack-padding-normal);margin-top:calc(var(--borderWidth-thin)*-1);border-top:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.Box-list--roundedTop>.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium)}.Box-list--roundedBottom>.Box-row:last-of-type{border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted)}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted)}.Box--danger,:is(.Box--danger .Box-body):last-of-type,:is(.Box--danger .Box-row):first-of-type{border-color:var(--borderColor-danger-emphasis)}.Box-header--blue{background-color:var(--bgColor-accent-muted);border-color:var(--borderColor-accent-muted)}.Box-row--yellow{background-color:var(--bgColor-attention-muted)}.Box-row--blue{background-color:var(--bgColor-accent-muted)}.Box-row--gray{background-color:var(--bgColor-muted)}.Box-btn-octicon.btn-octicon{padding:var(--control-medium-paddingInline-spacious);margin:calc(var(--controlStack-small-gap-spacious)*-1);line-height:var(--text-title-lineHeight-large)}

data/app/components/primer/beta/border_box.css.json

@@ -17,10 +17,10 @@
     ".Box-header",
     ".Box-title",
     ".Box-body",
-    ".Box-body:last-of-type",
+    ".Box-body:first-child",
+    ".Box-body:last-child",
+    ".Box-header:last-child",
     ".Box-row",
-    ".Box-row:first-of-type",
-    ".Box-row:last-of-type",
     ".Box-row.Box-row--unread",
     ".Box-row.unread",
     ".Box-row.navigation-focus .Box-row--drag-button",
@@ -36,6 +36,8 @@
     ".Box-row-link:hover",
     ".Box-row--drag-button",
     ".Box-footer",
+    ".Box-list--roundedTop>.Box-row:first-of-type",
+    ".Box-list--roundedBottom>.Box-row:last-of-type",
     ".Box--scrollable",
     ".Box--blue",
     ".Box--blue .Box-header",

data/app/components/primer/beta/border_box.css.map

@@ -1 +1 @@
-{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAMA,KACE,uCAAwC,CACxC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,wCACF,CAGA,gBACE,gBAyBF,CAfE,kFACE,kEACF,CAGE,kDACE,kGAAmG,CACnG,wGAA6G,CAC7G,gBACF,CAGF,yBACE,kEACF,CAIA,2BACE,qCAAsC,CACtC,gBACF,CAEA,0BACE,uCACF,CAMA,oDACE,qCACF,CAGE,iDACE,qCAAsC,CACtC,yCACF,CAGF,wBACE,qCACF,CAGF,YACE,mCAAoC,CACpC,0EAA+E,CAC/E,qCAAsC,CACtC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,iDAAkD,CAClD,kDACF,CAEA,WACE,sCAAuC,CACvC,4CACF,CAEA,UACE,mCAAoC,CACpC,sEAQF,CALE,uBACE,8CAAiD,CACjD,qDAAsD,CACtD,oDACF,CAIF,SACE,mCAAoC,CACpC,2CAA8C,CAC9C,oBAAqB,CAGrB,iEAiDF,CA/CE,uBACE,iDAAkD,CAClD,kDACF,CAEA,sBACE,qDAAsD,CACtD,oDACF,CAIA,yCAIE,2DACF,CAIE,gDACE,2BAA4B,CAC5B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,qCAMF,CAHE,6DACE,SACF,CAMJ,sCACE,qCACF,CAIA,sCACE,4CACF,CAIA,2BACE,qCACF,CAIA,2BACE,4CACF,CAOA,yBADF,cAEI,4BAQJ,CALI,kCAFA,4BAAqB,CAArB,oBAKA,CAHA,oBACE,2BAEF,CACF,CAKF,sBACE,SACF,CAEA,YACE,mCAAoC,CACpC,2CAA8C,CAG9C,mEAAyC,CACzC,uEACF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,4CAKA,CAHA,uBACE,4CAEF,CAUA,gEACE,4CACF,CAeE,+FACE,+CACF,CAIJ,kBACE,4CAA6C,CAC7C,4CACF,CAIA,iBACE,+CACF,CAEA,eACE,4CACF,CAEA,eACE,qCACF,CAKE,6BACE,oDAAqD,CACrD,sDAAyD,CACzD,8CACF","file":"border_box.css","sourcesContent":["/* stylelint-disable primer/spacing */\n/* stylelint-disable primer/typography */\n\n/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n  background-color: var(--bgColor-default);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--stack-padding-spacious);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--text-title-size-medium);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--stack-padding-spacious);\n      margin: calc(var(--stack-gap-spacious) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-spacious);\n  }\n}\n\n.Box-header {\n  padding: var(--stack-padding-normal);\n  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;\n  background-color: var(--bgColor-muted);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-top-left-radius: var(--borderRadius-medium);\n  border-top-right-radius: var(--borderRadius-medium);\n}\n\n.Box-title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Box-body {\n  padding: var(--stack-padding-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--borderWidth-thin) * -1);\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--borderColor-muted);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n\n  &:first-of-type {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-top-right-radius: var(--borderRadius-medium);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--fgColor-accent);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--bgColor-muted);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--bgColor-muted);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--fgColor-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--fgColor-accent);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--borderColor-default);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--borderColor-accent-muted);\n\n  & .Box-header {\n    background-color: var(--bgColor-accent-muted);\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--borderColor-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--borderColor-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--bgColor-attention-muted);\n}\n\n.Box-row--blue {\n  background-color: var(--bgColor-accent-muted);\n}\n\n.Box-row--gray {\n  background-color: var(--bgColor-muted);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--control-medium-paddingInline-spacious);\n    margin: calc(var(--controlStack-small-gap-spacious) * -1);\n    line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */\n  }\n}\n"]}
+{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAMA,KACE,uCAAwC,CACxC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,wCACF,CAGA,gBACE,gBAyBF,CAfE,kFACE,kEACF,CAGE,kDACE,kGAAmG,CACnG,wGAA6G,CAC7G,gBACF,CAGF,yBACE,kEACF,CAIA,2BACE,qCAAsC,CACtC,gBACF,CAEA,0BACE,uCACF,CAMA,oDACE,qCACF,CAGE,iDACE,qCAAsC,CACtC,yCACF,CAGF,wBACE,qCACF,CAGF,YACE,mCAAoC,CACpC,0EAA+E,CAC/E,qCAAsC,CACtC,uCAAwC,CACxC,kBAAmB,CACnB,oCAAqC,CACrC,iDAAkD,CAClD,kDACF,CAEA,WACE,sCAAuC,CACvC,4CACF,CAEA,UACE,mCAAoC,CACpC,sEACF,CAGA,sBACE,iDAAkD,CAClD,kDACF,CAGA,4CACE,8CAAiD,CACjD,qDAAsD,CACtD,oDACF,CAGA,SACE,mCAAoC,CACpC,2CAA8C,CAC9C,oBAAqB,CAGrB,iEAuCF,CAnCE,yCAIE,2DACF,CAIE,gDACE,2BAA4B,CAC5B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,qCAMF,CAHE,6DACE,SACF,CAMJ,sCACE,qCACF,CAIA,sCACE,4CACF,CAIA,2BACE,qCACF,CAIA,2BACE,4CACF,CAOA,yBADF,cAEI,4BAQJ,CALI,kCAFA,4BAAqB,CAArB,oBAKA,CAHA,oBACE,2BAEF,CACF,CAKF,sBACE,SACF,CAEA,YACE,mCAAoC,CACpC,2CAA8C,CAG9C,mEAAyC,CACzC,uEACF,CAQA,6CACE,iDAAkD,CAClD,kDACF,CAGA,+CACE,qDAAsD,CACtD,oDACF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,4CAKA,CAHA,uBACE,4CAEF,CAUA,gEACE,4CACF,CAeE,+FACE,+CACF,CAIJ,kBACE,4CAA6C,CAC7C,4CACF,CAIA,iBACE,+CACF,CAEA,eACE,4CACF,CAEA,eACE,qCACF,CAKE,6BACE,oDAAqD,CACrD,sDAAyD,CACzD,8CACF","file":"border_box.css","sourcesContent":["/* stylelint-disable primer/spacing */\n/* stylelint-disable primer/typography */\n\n/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n  background-color: var(--bgColor-default);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--stack-padding-spacious);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--text-title-size-medium);\n  }\n\n  & .Box-body {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-footer {\n    padding: var(--stack-padding-spacious);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--stack-padding-spacious);\n      margin: calc(var(--stack-gap-spacious) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--stack-padding-spacious);\n  }\n}\n\n.Box-header {\n  padding: var(--stack-padding-normal);\n  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;\n  background-color: var(--bgColor-muted);\n  border-color: var(--borderColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-top-left-radius: var(--borderRadius-medium);\n  border-top-right-radius: var(--borderRadius-medium);\n}\n\n.Box-title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Box-body {\n  padding: var(--stack-padding-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n/* Ensures a top border/background doesn't poke out when the body is the first element. */\n.Box-body:first-child {\n  border-top-left-radius: var(--borderRadius-medium);\n  border-top-right-radius: var(--borderRadius-medium);\n}\n\n/* Ensures bottom-border doesn't poke out when the element is the last element. */\n.Box-header:last-child, .Box-body:last-child {\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  border-bottom-right-radius: var(--borderRadius-medium);\n  border-bottom-left-radius: var(--borderRadius-medium);\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--borderColor-muted);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--fgColor-accent);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--bgColor-muted);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--bgColor-muted);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--bgColor-muted);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--bgColor-accent-muted);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--fgColor-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--fgColor-accent);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--stack-padding-normal);\n  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--borderColor-default);\n  border-top-style: solid;\n  border-top-width: var(--borderWidth-thin);\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n/* Outer corners for rows.\n** The list only claims a corner when Ruby says it sits at that edge of the box\n** (`Box-list--roundedTop` / `Box-list--roundedBottom`, set in\n** BorderBox#before_render), so header/body/footer automatically win when present. */\n\n/* First row of a list that starts the box */\n.Box-list--roundedTop > .Box-row:first-of-type {\n  border-top-left-radius: var(--borderRadius-medium);\n  border-top-right-radius: var(--borderRadius-medium);\n}\n\n/* Last row of a list that ends the box */\n.Box-list--roundedBottom > .Box-row:last-of-type {\n  border-bottom-right-radius: var(--borderRadius-medium);\n  border-bottom-left-radius: var(--borderRadius-medium);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--borderColor-accent-muted);\n\n  & .Box-header {\n    background-color: var(--bgColor-accent-muted);\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--borderColor-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--borderColor-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--borderColor-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--borderColor-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--bgColor-attention-muted);\n}\n\n.Box-row--blue {\n  background-color: var(--bgColor-accent-muted);\n}\n\n.Box-row--gray {\n  background-color: var(--bgColor-muted);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--control-medium-paddingInline-spacious);\n    margin: calc(var(--controlStack-small-gap-spacious) * -1);\n    line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */\n  }\n}\n"]}

data/app/components/primer/beta/border_box.pcss

@@ -90,13 +90,19 @@
 .Box-body {
   padding: var(--stack-padding-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
 
-  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
-  &:last-of-type {
-    margin-bottom: calc(var(--borderWidth-thin) * -1);
-    border-bottom-right-radius: var(--borderRadius-medium);
-    border-bottom-left-radius: var(--borderRadius-medium);
-  }
+/* Ensures a top border/background doesn't poke out when the body is the first element. */
+.Box-body:first-child {
+  border-top-left-radius: var(--borderRadius-medium);
+  border-top-right-radius: var(--borderRadius-medium);
+}
+
+/* Ensures bottom-border doesn't poke out when the element is the last element. */
+.Box-header:last-child, .Box-body:last-child {
+  margin-bottom: calc(var(--borderWidth-thin) * -1);
+  border-bottom-right-radius: var(--borderRadius-medium);
+  border-bottom-left-radius: var(--borderRadius-medium);
 }
 
 /* Box rows */
@@ -108,16 +114,6 @@
   border-top-style: solid;
   border-top-width: var(--borderWidth-thin);
 
-  &:first-of-type {
-    border-top-left-radius: var(--borderRadius-medium);
-    border-top-right-radius: var(--borderRadius-medium);
-  }
-
-  &:last-of-type {
-    border-bottom-right-radius: var(--borderRadius-medium);
-    border-bottom-left-radius: var(--borderRadius-medium);
-  }
-
   /* Adds a blue vertical line to the left of the row
   ** For indicating a row item is unread */
   &.Box-row--unread,
@@ -211,6 +207,23 @@
   border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
 }
 
+/* Outer corners for rows.
+** The list only claims a corner when Ruby says it sits at that edge of the box
+** (`Box-list--roundedTop` / `Box-list--roundedBottom`, set in
+** BorderBox#before_render), so header/body/footer automatically win when present. */
+
+/* First row of a list that starts the box */
+.Box-list--roundedTop > .Box-row:first-of-type {
+  border-top-left-radius: var(--borderRadius-medium);
+  border-top-right-radius: var(--borderRadius-medium);
+}
+
+/* Last row of a list that ends the box */
+.Box-list--roundedBottom > .Box-row:last-of-type {
+  border-bottom-right-radius: var(--borderRadius-medium);
+  border-bottom-left-radius: var(--borderRadius-medium);
+}
+
 /* Option for a box with scrolling content */
 .Box--scrollable {
   max-height: 324px;

data/app/components/primer/beta/border_box.rb

@@ -100,6 +100,12 @@ module Primer
       private
 
       def before_render
+        @list_arguments[:classes] = class_names(
+          @list_arguments[:classes],
+          "Box-list--roundedTop" => header.blank? && body.blank?,
+          "Box-list--roundedBottom" => footer.blank?
+        )
+
         return unless header
 
         @list_arguments[:aria] = merge_aria(

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

@@ -46,7 +46,7 @@ module Primer
 
         render(
           locals: {
-            action_menu_expanded: params[:action_menu_expanded] == "true",
+            nested_children_expanded: params[:nested_children_expanded] == "true",
             select_variant: (params[:select_variant] || :none).to_sym
           }
         )

data/app/lib/primer/forms/text_field.html.erb

@@ -13,9 +13,13 @@
       <%= builder.text_field(@input.name, **@input.input_arguments) %>
     <% end %>
     <% if @input.show_clear_button? %>
-      <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="<%= @input.clear_button_label || 'Clear' %>" data-action="click:primer-text-field#clearContents">
-        <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
-      </button>
+      <%= render(Primer::Beta::IconButton.new(size: :small,
+                                              scheme: :invisible,
+                                              icon: :"x-circle-fill",
+                                              "aria-label": @input.clear_button_label || I18n.t(:button_clear),
+                                              id: @input.clear_button_id,
+                                              classes: "FormControl-input-trailingAction",
+                                              data: { action: "click:primer-text-field#clearContents" })) %>
     <% end %>
     <% if @input.trailing_visual %>
       <div class="FormControl-input-trailingVisualWrap">

data/app/views/primer/view_components/tree_view_items/async_alpha.html_fragment.erb

@@ -5,7 +5,7 @@
       <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
     <% end %>
 
-    <% sub_tree.with_sub_tree(label: "action_menu", expanded: action_menu_expanded, select_variant: select_variant, select_strategy: :self) do |sub_tree| %>
+    <% sub_tree.with_sub_tree(label: "action_menu", expanded: nested_children_expanded, select_variant: select_variant, select_strategy: :self) do |sub_tree| %>
       <% sub_tree.with_leading_visual_icons do |icons| %>
         <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
         <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>

data/config/locales/en.yml

@@ -39,3 +39,6 @@ en:
     next_page: "Next Page"
     page: "Page %{number}"
     page_with_more: "Page %{number}..."
+
+  tree_view:
+    label_empty_sub_tree: "No items"

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 91
-      PATCH = 2
+      PATCH = 4
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/file_tree_view_preview.rb

@@ -4,6 +4,8 @@ module Primer
   module Alpha
     # @label FileTreeView
     class FileTreeViewPreview < ViewComponent::Preview
+      include Primer::PreviewHelpers
+
       # @label Default
       #
       # @snapshot interactive
@@ -30,19 +32,6 @@ module Primer
 
       private
 
-      def coerce_bool(value)
-        case value
-        when true, false
-          value
-        when "true"
-          true
-        when "false"
-          false
-        else
-          false
-        end
-      end
-
       def populate(node, data, node_arguments)
         return unless data
 

data/previews/primer/alpha/tree_view_preview/async_alpha.html.erb

@@ -6,7 +6,7 @@
         <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
       <% end %>
 
-      <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(action_menu_expanded: action_menu_expanded, select_variant: select_variant)) %>
+      <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(nested_children_expanded: nested_children_expanded, select_variant: select_variant)) %>
     <% end %>
   <% end %>
 </div>

data/previews/primer/alpha/tree_view_preview.rb

@@ -4,6 +4,8 @@ module Primer
   module Alpha
     # @label TreeView
     class TreeViewPreview < ViewComponent::Preview
+      include Primer::PreviewHelpers
+
       # @label Default
       #
       # @snapshot interactive
@@ -113,11 +115,11 @@ module Primer
 
       # @label Async alpha
       #
-      # @param action_menu_expanded [Boolean] toggle
+      # @param nested_children_expanded [Boolean] toggle
       # @param select_variant [Symbol] select [none, single, multiple]
-      def async_alpha(action_menu_expanded: false, select_variant: :none)
+      def async_alpha(nested_children_expanded: false, select_variant: :none)
         render_with_template(locals: {
-          action_menu_expanded: coerce_bool(action_menu_expanded),
+          nested_children_expanded: coerce_bool(nested_children_expanded),
           select_variant: select_variant.to_sym
         })
       end
@@ -216,19 +218,6 @@ module Primer
 
       private
 
-      def coerce_bool(value)
-        case value
-        when true, false
-          value
-        when "true"
-          true
-        when "false"
-          false
-        else
-          false
-        end
-      end
-
       def populate(node, data, node_arguments)
         return unless data
 

data/previews/primer/beta/border_box_preview.rb

@@ -4,6 +4,8 @@ module Primer
   module Beta
     # @label BorderBox
     class BorderBoxPreview < ViewComponent::Preview
+      include Primer::PreviewHelpers
+
       # @label Playground
       #
       # @param list_id text
@@ -57,6 +59,28 @@ module Primer
         end
       end
 
+      # Only the first and last element may round the corners of the box.
+      # Toggle the slots to check that the rounding follows.
+      #
+      # @label Roundedness playground
+      # @hidden
+      # @param header [Boolean] toggle
+      # @param body [Boolean] toggle
+      # @param rows [Boolean] toggle
+      # @param footer [Boolean] toggle
+      def roundedness_playground(header: true, body: false, rows: true, footer: false)
+        render(Primer::Beta::BorderBox.new) do |component|
+          component.with_header { "Header" } if coerce_bool(header)
+          component.with_body { "Body" } if coerce_bool(body)
+          if coerce_bool(rows)
+            component.with_row { "Row one" }
+            component.with_row { "Row two" }
+            component.with_row { "Row three" }
+          end
+          component.with_footer { "Footer" } if coerce_bool(footer)
+        end
+      end
+
       # @!group Padding
       #
       # @label Default

data/previews/primer/open_project/border_box/collapsible_header_preview.rb

@@ -8,6 +8,8 @@ module Primer
     module BorderBox
       # @label CollapsibleHeader
       class CollapsibleHeaderPreview < ViewComponent::Preview
+        include Primer::PreviewHelpers
+
         # @label Playground
         # @param title [String]
         # @param description [String]
@@ -91,18 +93,6 @@ module Primer
             }
           )
         end
-
-        private
-
-        # URL params are always strings; coerce to actual booleans before passing to the component.
-        def coerce_bool(value)
-          case value
-          when true, false then value
-          when "true" then true
-          when "false" then false
-          else false
-          end
-        end
       end
     end
   end

data/previews/primer/open_project/filterable_tree_view_preview.rb

@@ -4,6 +4,8 @@ module Primer
   module OpenProject
     # @label FilterableTreeView
     class FilterableTreeViewPreview < ViewComponent::Preview
+      include Primer::PreviewHelpers
+
       # @label Playground
       #
       # @param expanded [Boolean] toggle
@@ -170,21 +172,6 @@ module Primer
           expanded: coerce_bool(expanded)
         })
       end
-
-      private
-
-      def coerce_bool(value)
-        case value
-        when true, false
-          value
-        when "true"
-          true
-        when "false"
-          false
-        else
-          false
-        end
-      end
     end
   end
 end

data/previews/primer/preview_helpers.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module PreviewHelpers
+    # Lookbook toggle params arrive as the strings "true"/"false" rather than actual booleans.
+    def coerce_bool(value)
+      case value
+      when true, false then value
+      when "true" then true
+      when "false" then false
+      else false
+      end
+    end
+  end
+end

data/static/classes.json

@@ -148,6 +148,12 @@
   "Box-header--blue": [
     "Primer::Beta::BorderBox"
   ],
+  "Box-list--roundedBottom": [
+    "Primer::Beta::BorderBox"
+  ],
+  "Box-list--roundedTop": [
+    "Primer::Beta::BorderBox"
+  ],
   "Box-row": [
     "Primer::Beta::BorderBox"
   ],

data/static/classnames.cjs

@@ -72,6 +72,8 @@ module.exports = new Set([
   'Box-footer',
   'Box-header',
   'Box-header--blue',
+  'Box-list--roundedBottom',
+  'Box-list--roundedTop',
   'Box-row',
   'Box-row--blue',
   'Box-row--drag-button',

data/static/classnames.js

@@ -72,6 +72,8 @@ const classNames = new Set([
   'Box-footer',
   'Box-header',
   'Box-header--blue',
+  'Box-list--roundedBottom',
+  'Box-list--roundedTop',
   'Box-row',
   'Box-row--blue',
   'Box-row--drag-button',