openproject-primer_view_components 0.89.1 → 0.90.1

data/app/components/primer/open_project/border_box/collapsible_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["collapsible_header.pcss"],"names":[],"mappings":"AAEA,mBAEE,2CAA4C,CAC5C,0BAA2B,CAF3B,aAGF,CAEA,wCACE,2BAA4B,CAC5B,4BAA6B,CAC7B,8CAOF,CALE,wJAGE,YACF,CAGF,+BAKE,kBAAmB,CACnB,kCAAmC,CALnC,cAAe,CAEf,YAAa,CACb,gBAAiB,CAIjB,eAAgB,CADhB,0BAA2B,CAL3B,wBAAiB,CAAjB,gBAWF,CAHE,kDACE,MACF,CAGF,wDACE,+BAEE,sBAAuB,CADvB,qBAEF,CAEA,kEACE,YACF,CAEA,+BACE,UACF,CACF,CAGE,8DAEE,sBAAuB,CADvB,qBAEF,CAEA,gGACE,YACF,CAEA,8DACE,gBAAiB,CACjB,kBAAsB,CACtB,kBAAmB,CACnB,UACF,CAGF,8BAGE,kBAAmB,CADnB,YAAa,CADb,cAAe,CAGf,8BAA+B,CAE/B,cAAe,CADf,eAEF,CAEA,+BACE,MAAO,CACP,WAAY,CACZ,eAAgB,CAChB,sBAAuB,CAEvB,wBAAiB,CAAjB,gBAAiB,CADjB,kBAEF","file":"collapsible_header.css","sourcesContent":["/* CSS for BorderBox::CollapsibleHeader  */\n\n.CollapsibleHeader {\n  display: block;\n  container-name: collapsible-header-container;\n  container-type: inline-size;\n}\n\n.Box:has(.CollapsibleHeader--collapsed) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-bottom-width: var(--borderWidth-thicker);\n\n  & .Box-list,\n  & .Box-body,\n  & .Box-footer {\n    display: none;\n  }\n}\n\n.CollapsibleHeader-triggerArea {\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  column-gap: var(--stack-gap-normal);\n  row-gap: var(--base-size-4);\n  overflow: hidden;\n\n  .CollapsibleHeader > & {\n    flex: 1;\n  }\n}\n\n@container collapsible-header-container (width < 544px) {\n  .CollapsibleHeader-triggerArea {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {\n    display: none;\n  }\n\n  .CollapsibleHeader-description {\n    width: 100%;\n  }\n}\n\n.CollapsibleHeader--multi-line {\n  .CollapsibleHeader-triggerArea {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {\n    display: none;\n  }\n\n  .CollapsibleHeader-description {\n    overflow: visible;\n    text-overflow: initial;\n    white-space: normal;\n    width: 100%;\n  }\n}\n\n.CollapsibleHeader-title-line {\n  flex-basis: 66%;\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n.CollapsibleHeader-description {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: text;\n}\n"]}
+{"version":3,"sources":["collapsible_header.pcss"],"names":[],"mappings":"AAIA,mBACE,aAAc,CACd,2CAA4C,CAC5C,0BACF,CAEA,wCACE,2BAA4B,CAC5B,4BAA6B,CAC7B,8CAOF,CALE,6EAGE,YACF,CAGF,+BACE,cAAe,CACf,wBAAiB,CAAjB,gBAAiB,CACjB,YAAa,CACb,gBAAiB,CACjB,kBAAmB,CACnB,kCAAmC,CACnC,0BAA2B,CAC3B,eAKF,CAHE,kDACE,MACF,CAGF,wDACE,+BACE,qBAAsB,CACtB,sBACF,CAEA,kEACE,YACF,CAEA,+BACE,UACF,CACF,CAGE,8DACE,qBAAsB,CACtB,sBACF,CAEA,gGACE,YACF,CAEA,8DACE,gBAAiB,CACjB,kBAAmB,CACnB,kBAAmB,CACnB,UACF,CAGF,8BACE,cAAe,CACf,YAAa,CACb,kBAAmB,CACnB,8BAA+B,CAC/B,eAAgB,CAChB,cACF,CAEA,+BACE,MAAO,CACP,WAAY,CACZ,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CACnB,wBAAiB,CAAjB,gBACF","file":"collapsible_header.css","sourcesContent":["/* CSS for BorderBox::CollapsibleHeader  */\n\n/* stylelint-disable selector-nested-pattern -- component nests descendant class selectors (and `.X > &`) inside container queries, not &-prefixed selectors */\n\n.CollapsibleHeader {\n  display: block;\n  container-name: collapsible-header-container;\n  container-type: inline-size;\n}\n\n.Box:has(.CollapsibleHeader--collapsed) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-bottom-width: var(--borderWidth-thicker);\n\n  & .Box-list,\n  & .Box-body,\n  & .Box-footer {\n    display: none;\n  }\n}\n\n.CollapsibleHeader-triggerArea {\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  column-gap: var(--stack-gap-normal);\n  row-gap: var(--base-size-4);\n  overflow: hidden;\n\n  .CollapsibleHeader > & {\n    flex: 1;\n  }\n}\n\n@container collapsible-header-container (width < 544px) {\n  .CollapsibleHeader-triggerArea {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {\n    display: none;\n  }\n\n  .CollapsibleHeader-description {\n    width: 100%;\n  }\n}\n\n.CollapsibleHeader--multi-line {\n  .CollapsibleHeader-triggerArea {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {\n    display: none;\n  }\n\n  .CollapsibleHeader-description {\n    overflow: visible;\n    text-overflow: clip;\n    white-space: normal;\n    width: 100%;\n  }\n}\n\n.CollapsibleHeader-title-line {\n  flex-basis: 66%;\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n.CollapsibleHeader-description {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: text;\n}\n"]}

data/app/components/primer/open_project/border_box/collapsible_header.html.erb

@@ -5,7 +5,7 @@
       <% if count? %>
         <%= count %>
       <% end %>
-      <%= render(Primer::BaseComponent.new(tag: :div)) do %>
+      <%= render(Primer::Beta::Button.new(**@toggle_button_arguments)) do %>
         <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", hidden: @collapsed, data: { target: "collapsible-header.arrowUp" })) %>
         <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: !@collapsed, data: { target: "collapsible-header.arrowDown" })) %>
       <% end %>

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

@@ -1,5 +1,7 @@
 /* CSS for BorderBox::CollapsibleHeader  */
 
+/* stylelint-disable selector-nested-pattern -- component nests descendant class selectors (and `.X > &`) inside container queries, not &-prefixed selectors */
+
 .CollapsibleHeader {
   display: block;
   container-name: collapsible-header-container;
@@ -60,7 +62,7 @@
 
   .CollapsibleHeader-description {
     overflow: visible;
-    text-overflow: initial;
+    text-overflow: clip;
     white-space: normal;
     width: 100%;
   }

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

@@ -16,6 +16,7 @@ module Primer
         # @param tag [Symbol] <%= one_of(Primer::OpenProject::BorderBox::CollapsibleHeader::TITLE_TAG_OPTIONS) %>
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :title, lambda { |tag: TITLE_TAG_DEFAULT, **system_arguments|
+          system_arguments[:id] ||= @heading_id
           system_arguments[:classes] = class_names(
             system_arguments[:classes],
             "CollapsibleHeader-title",
@@ -29,7 +30,6 @@ module Primer
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :count, lambda { |**system_arguments|
-          system_arguments[:mr] ||= 2
           system_arguments[:scheme] ||= :primary
           system_arguments[:classes] = class_names(
             system_arguments[:classes],
@@ -65,6 +65,7 @@ module Primer
 
           @collapsed = collapsed
           @collapsible_id = collapsible_id
+          @heading_id = "#{id}-heading"
 
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :"collapsible-header"
@@ -87,16 +88,16 @@ module Primer
           end
 
           @trigger_area_arguments = { tag: :div }
-          @trigger_area_arguments[:role] = "button"
-          @trigger_area_arguments[:tabindex] = 0
           @trigger_area_arguments[:classes] = "CollapsibleHeader-triggerArea"
-          @trigger_area_arguments[:aria] = {
-            controls: @collapsible_id,
-            expanded: !@collapsed
-          }
           @trigger_area_arguments[:data] = {
-            target: "collapsible-header.triggerElement",
-            action: "click:collapsible-header#toggle keydown:collapsible-header#toggleViaKeyboard"
+            action: "click:collapsible-header#toggle"
+          }
+
+          @toggle_button_arguments = {
+            scheme: :invisible,
+            type: :button,
+            data: { target: "collapsible-header.triggerElement", "collapsible-toggle": "" },
+            aria: { expanded: !@collapsed, controls: @collapsible_id, labelledby: @heading_id }
           }
         end
 

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

@@ -1 +1 @@
-.BorderGrid{border-collapse:collapse;border-style:hidden;display:table;margin-bottom:-16px;margin-top:-16px;table-layout:fixed;width:100%}.BorderGrid .BorderGrid-cell{padding-bottom:16px;padding-top:16px}.BorderGrid--spacious{margin-bottom:-24px;margin-top:-24px}.BorderGrid--spacious .BorderGrid-cell{padding-bottom:24px;padding-top:24px}.BorderGrid-row{display:table-row}.BorderGrid-cell{border:1px solid var(--borderColor-muted);display:table-cell}
+.BorderGrid{display:table;width:100%;margin-top:calc(var(--base-size-16)*-1);margin-bottom:calc(var(--base-size-16)*-1);table-layout:fixed;border-collapse:collapse;border-style:hidden}.BorderGrid .BorderGrid-cell{padding-top:var(--base-size-16);padding-bottom:var(--base-size-16)}.BorderGrid--spacious{margin-top:calc(var(--base-size-24)*-1);margin-bottom:calc(var(--base-size-24)*-1)}.BorderGrid--spacious .BorderGrid-cell{padding-top:var(--base-size-24);padding-bottom:var(--base-size-24)}.BorderGrid-row{display:table-row}.BorderGrid-cell{display:table-cell;border:var(--borderWidth-thin) solid var(--borderColor-muted)}

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

@@ -1 +1 @@
-{"version":3,"sources":["border_grid.pcss"],"names":[],"mappings":"AAEA,YAMI,wBAAyB,CACzB,mBAAmB,CANnB,aAAc,CAGd,mBAAoB,CADpB,gBAAiB,CAEjB,kBAAmB,CAHnB,UAMJ,CAEA,6BAEI,mBAAmB,CADnB,gBAEJ,CAEA,sBAEI,mBAAmB,CADnB,gBAEJ,CAEA,uCAEI,mBAAmB,CADnB,gBAEJ,CAEA,gBACI,iBACJ,CAEA,iBAEI,yCAAyC,CADzC,kBAEJ","file":"border_grid.css","sourcesContent":["/* CSS for BorderGrid  */\n\n.BorderGrid {\n    display: table;\n    width: 100%;\n    margin-top: -16px;\n    margin-bottom: -16px;\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-style: hidden\n}\n\n.BorderGrid .BorderGrid-cell {\n    padding-top: 16px;\n    padding-bottom: 16px\n}\n\n.BorderGrid--spacious {\n    margin-top: -24px;\n    margin-bottom: -24px\n}\n\n.BorderGrid--spacious .BorderGrid-cell {\n    padding-top: 24px;\n    padding-bottom: 24px\n}\n\n.BorderGrid-row {\n    display: table-row\n}\n\n.BorderGrid-cell {\n    display: table-cell;\n    border: 1px solid var(--borderColor-muted)\n}\n"]}
+{"version":3,"sources":["border_grid.pcss"],"names":[],"mappings":"AAEA,YACI,aAAc,CACd,UAAW,CACX,uCAA0C,CAC1C,0CAA6C,CAC7C,kBAAmB,CAEnB,wBAAyB,CAEzB,mBACJ,CAEA,6BACI,+BAAgC,CAChC,kCACJ,CAEA,sBACI,uCAA0C,CAC1C,0CACJ,CAEA,uCACI,+BAAgC,CAChC,kCACJ,CAEA,gBACI,iBACJ,CAEA,iBACI,kBAAmB,CACnB,6DACJ","file":"border_grid.css","sourcesContent":["/* CSS for BorderGrid  */\n\n.BorderGrid {\n    display: table;\n    width: 100%;\n    margin-top: calc(-1 * var(--base-size-16));\n    margin-bottom: calc(-1 * var(--base-size-16));\n    table-layout: fixed;\n    /* stylelint-disable-next-line primer/borders -- table border-collapse keyword, not a border size */\n    border-collapse: collapse;\n    /* stylelint-disable-next-line primer/borders -- table border-style keyword, not a border size */\n    border-style: hidden\n}\n\n.BorderGrid .BorderGrid-cell {\n    padding-top: var(--base-size-16);\n    padding-bottom: var(--base-size-16)\n}\n\n.BorderGrid--spacious {\n    margin-top: calc(-1 * var(--base-size-24));\n    margin-bottom: calc(-1 * var(--base-size-24))\n}\n\n.BorderGrid--spacious .BorderGrid-cell {\n    padding-top: var(--base-size-24);\n    padding-bottom: var(--base-size-24)\n}\n\n.BorderGrid-row {\n    display: table-row\n}\n\n.BorderGrid-cell {\n    display: table-cell;\n    border: var(--borderWidth-thin) solid var(--borderColor-muted)\n}\n"]}

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

@@ -3,26 +3,28 @@
 .BorderGrid {
     display: table;
     width: 100%;
-    margin-top: -16px;
-    margin-bottom: -16px;
+    margin-top: calc(-1 * var(--base-size-16));
+    margin-bottom: calc(-1 * var(--base-size-16));
     table-layout: fixed;
+    /* stylelint-disable-next-line primer/borders -- table border-collapse keyword, not a border size */
     border-collapse: collapse;
+    /* stylelint-disable-next-line primer/borders -- table border-style keyword, not a border size */
     border-style: hidden
 }
 
 .BorderGrid .BorderGrid-cell {
-    padding-top: 16px;
-    padding-bottom: 16px
+    padding-top: var(--base-size-16);
+    padding-bottom: var(--base-size-16)
 }
 
 .BorderGrid--spacious {
-    margin-top: -24px;
-    margin-bottom: -24px
+    margin-top: calc(-1 * var(--base-size-24));
+    margin-bottom: calc(-1 * var(--base-size-24))
 }
 
 .BorderGrid--spacious .BorderGrid-cell {
-    padding-top: 24px;
-    padding-bottom: 24px
+    padding-top: var(--base-size-24);
+    padding-bottom: var(--base-size-24)
 }
 
 .BorderGrid-row {
@@ -31,5 +33,5 @@
 
 .BorderGrid-cell {
     display: table-cell;
-    border: 1px solid var(--borderColor-muted)
+    border: var(--borderWidth-thin) solid var(--borderColor-muted)
 }

data/app/components/primer/open_project/collapsible.d.ts

@@ -5,7 +5,7 @@ export declare abstract class CollapsibleElement extends HTMLElement {
     collapsibleElements: HTMLElement[];
     collapsed: boolean;
     toggleViaKeyboard(event: KeyboardEvent): void;
-    toggle(): void;
+    toggle(event?: Event): void;
     attributeChangedCallback(name: string): void;
     hideAll(): void;
     expandAll(): void;

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

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { attr, target, targets } from '@github/catalyst';
-// eslint-disable-next-line custom-elements/expose-class-on-global
 export class CollapsibleElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -13,11 +12,16 @@ export class CollapsibleElement extends HTMLElement {
     }
     toggleViaKeyboard(event) {
         if (event.code === 'Enter' || event.code === 'Space') {
-            event.preventDefault();
-            this.toggle();
+            this.toggle(event);
         }
     }
-    toggle() {
+    toggle(event) {
+        if (event &&
+            event.target instanceof Element &&
+            !event.target.closest('[data-collapsible-toggle]') &&
+            event.target.closest('a, button'))
+            return;
+        event?.preventDefault();
         this.collapsed = !this.collapsed;
     }
     attributeChangedCallback(name) {

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

@@ -1,6 +1,5 @@
 import {attr, target, targets} from '@github/catalyst'
 
-// eslint-disable-next-line custom-elements/expose-class-on-global
 export abstract class CollapsibleElement extends HTMLElement {
   @target arrowDown: Element
   @target arrowUp: Element
@@ -11,12 +10,19 @@ export abstract class CollapsibleElement extends HTMLElement {
 
   toggleViaKeyboard(event: KeyboardEvent) {
     if (event.code === 'Enter' || event.code === 'Space') {
-      event.preventDefault()
-      this.toggle()
+      this.toggle(event)
     }
   }
 
-  toggle() {
+  toggle(event?: Event) {
+    if (
+      event &&
+      event.target instanceof Element &&
+      !event.target.closest('[data-collapsible-toggle]') &&
+      event.target.closest('a, button')
+    )
+      return
+    event?.preventDefault()
     this.collapsed = !this.collapsed
   }
 

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

@@ -2,23 +2,19 @@
   <%= render(Primer::OpenProject::FlexLayout.new) do |flex| %>
     <%= flex.with_row(classes: "CollapsibleSection--triggerArea",
                       id: @title_id,
-                      tabindex: 0,
-                      role: "button",
-                      data: {
-                        action: "click:collapsible-section#toggle keydown:collapsible-section#toggleViaKeyboard",
-                        target: "collapsible-section.triggerElement"
-                      },
-                      aria: { expanded: !@collapsed, controls: @content_id }) do %>
+                      data: { action: "click:collapsible-section#toggle" }) do %>
       <%= render(Primer::OpenProject::FlexLayout.new(display: :flex, align_items: :center)) do |header| %>
-        <%= header.with_column do %>
+        <%= header.with_column(id: @heading_id) do %>
           <%= title %>
         <% end %>
         <%= header.with_column do %>
           <%= caption %>
         <% end %>
         <%= header.with_column do %>
-          <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", hidden: @collapsed, data: { target: "collapsible-section.arrowUp" })) %>
-          <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: !@collapsed, data: { target: "collapsible-section.arrowDown" })) %>
+          <%= render(Primer::Beta::Button.new(**@toggle_button_arguments)) do %>
+            <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", hidden: @collapsed, data: { target: "collapsible-section.arrowUp" })) %>
+            <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: !@collapsed, data: { target: "collapsible-section.arrowDown" })) %>
+          <% end %>
         <% end %>
         <%= header.with_column(flex: 1, text_align: :right) do %>
           <%= additional_information %>

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

@@ -53,6 +53,7 @@ module Primer
       def initialize(id: self.class.generate_id, collapsed: false, **system_arguments)
         @title_id = "#{id}-title"
         @content_id = "#{id}-content"
+        @heading_id = "#{id}-heading"
         @collapsed = collapsed
 
         @system_arguments = deny_tag_argument(**system_arguments)
@@ -66,6 +67,13 @@ module Primer
 
         @system_arguments[:data] ||= {}
         @system_arguments[:data][:collapsed] = true if @collapsed
+
+        @toggle_button_arguments = {
+          scheme: :invisible,
+          type: :button,
+          data: { target: "collapsible-section.triggerElement", "collapsible-toggle": "" },
+          aria: { expanded: !@collapsed, controls: @content_id, labelledby: @heading_id }
+        }
       end
 
       private

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

@@ -1 +1 @@
-.DragHandle{color:var(--fgColor-muted);cursor:move}
+.DragHandle{cursor:move;color:var(--fgColor-muted)}

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

@@ -1 +1 @@
-{"version":3,"sources":["drag_handle.pcss"],"names":[],"mappings":"AAEA,YAEI,0BAA2B,CAD3B,WAEJ","file":"drag_handle.css","sourcesContent":["/* CSS for DragHandle  */\n\n.DragHandle {\n    cursor: move;\n    color: var(--fgColor-muted);\n}\n"]}
+{"version":3,"sources":["drag_handle.pcss"],"names":[],"mappings":"AAEA,YACI,WAAY,CACZ,0BACJ","file":"drag_handle.css","sourcesContent":["/* CSS for DragHandle  */\n\n.DragHandle {\n    cursor: move;\n    color: var(--fgColor-muted);\n}\n"]}

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(--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}
+filterable-tree-view{display:flex;flex-direction:column;overflow:hidden;max-height:inherit}.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,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"]}
+{"version":3,"sources":["filterable_tree_view.pcss"],"names":[],"mappings":"AAYA,qBACE,YAAa,CACb,qBAAsB,CACtB,eAAgB,CAChB,kBACF,CAEA,0BACE,MAAO,CACP,YACF,CAEA,iCACE,MAAO,CACP,YAAa,CACb,eACF,CAGA,wDAEE,8CACF,CAIA,0BAEE,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  /* stylelint-disable-next-line primer/no-display-colors, primer/colors -- intentional yellow search-match highlight; no Primer semantic token exists for this */\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  /* stylelint-disable-next-line primer/no-display-colors, primer/colors -- intentional yellow search-match highlight; no Primer semantic token exists for this */\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.html.erb

@@ -28,11 +28,15 @@
         <% end %>
       <% end %>
       <div class="FilterableTreeViewLoadingSkeleton" aria-hidden="true">
-        <% [0, 8, 8, 16, 8, 0, 8, 8].each do |indent| %>
-          <span class="TreeViewSkeletonItemContainerStyle" style="padding-left: <%= indent %>px">
-            <%= render(Primer::Alpha::SkeletonBox.new(width: "16px")) %>
-            <%= render(Primer::Alpha::SkeletonBox.new(classes: "TreeItemSkeletonTextStyles")) %>
-          </span>
+        <% if loading_indicator? %>
+          <%= loading_indicator %>
+        <% else %>
+          <% [0, 8, 8, 16, 8, 0, 8, 8].each do |indent| %>
+            <span class="TreeViewSkeletonItemContainerStyle" style="padding-left: <%= indent %>px">
+              <%= render(Primer::Alpha::SkeletonBox.new(width: "16px")) %>
+              <%= render(Primer::Alpha::SkeletonBox.new(classes: "TreeItemSkeletonTextStyles")) %>
+            </span>
+          <% end %>
         <% end %>
       </div>
       <%= render(@tree_view) %>

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

@@ -30,12 +30,14 @@ filterable-tree-view {
 
 /* Highlight style for CSS Custom Highlight API */
 ::highlight(primer-filterable-tree-view-search-results) {
+  /* stylelint-disable-next-line primer/no-display-colors, primer/colors -- intentional yellow search-match highlight; no Primer semantic token exists for this */
   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 {
+  /* stylelint-disable-next-line primer/no-display-colors, primer/colors -- intentional yellow search-match highlight; no Primer semantic token exists for this */
   background-color: var(--display-yellow-scale-2);
   color: inherit;
 }

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

@@ -133,11 +133,19 @@ module Primer
     # ```erb
     # <%= render(Primer::OpenProject::FilterableTreeView.new(
     #   src: my_path
-    # )) %>
+    # )) do |tree_view| %>
+    #   <% tree_view.with_loading_indicator do %>
+    #     <%= render(Primer::Beta::Spinner.new) %>
+    #   <% end %>
+    # <% end %>
     # ```
     class FilterableTreeView < Primer::Component
       delegate :with_leaf, :with_sub_tree, to: :@tree_view
 
+      # An optional loading indicator shown while an async filter request is in progress. When omitted, a skeleton
+      # loader is rendered. This slot is only used when `src` is set.
+      renders_one :loading_indicator
+
       SUPPORTED_SELECT_VARIANTS = %i[multiple single none].freeze
 
       DEFAULT_FILTER_INPUT_ARGUMENTS = {

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

@@ -1 +1 @@
-.InlineMessage{align-items:start;color:var(--inline-message-fgColor);column-gap:.5rem;display:grid;font-size:var(--inline-message-fontSize);grid-template-columns:auto 1fr;line-height:var(--inline-message-lineHeight)}.InlineMessage[data-size=small]{--inline-message-fontSize:var(--text-body-size-small);--inline-message-lineHeight:var(--text-body-lineHeight-small,1.6666)}.InlineMessage[data-size=medium]{--inline-message-fontSize:var(--text-body-size-medium);--inline-message-lineHeight:var(--text-body-lineHeight-medium,1.4285)}.InlineMessage[data-variant=warning]{--inline-message-fgColor:var(--fgColor-attention)}.InlineMessage[data-variant=critical]{--inline-message-fgColor:var(--fgColor-danger)}.InlineMessage[data-variant=success]{--inline-message-fgColor:var(--fgColor-success)}.InlineMessage[data-variant=unavailable]{--inline-message-fgColor:var(--fgColor-muted)}.InlineMessageIcon{min-height:calc(var(--inline-message-lineHeight)*var(--inline-message-fontSize))}
+.InlineMessage{display:grid;font-size:var(--inline-message-fontSize);line-height:var(--inline-message-lineHeight);color:var(--inline-message-fgColor);column-gap:.5rem;grid-template-columns:auto 1fr;align-items:start}.InlineMessage[data-size=small]{--inline-message-fontSize:var(--text-body-size-small);--inline-message-lineHeight:var(--text-body-lineHeight-small,1.6666)}.InlineMessage[data-size=medium]{--inline-message-fontSize:var(--text-body-size-medium);--inline-message-lineHeight:var(--text-body-lineHeight-medium,1.4285)}.InlineMessage[data-variant=warning]{--inline-message-fgColor:var(--fgColor-attention)}.InlineMessage[data-variant=critical]{--inline-message-fgColor:var(--fgColor-danger)}.InlineMessage[data-variant=success]{--inline-message-fgColor:var(--fgColor-success)}.InlineMessage[data-variant=unavailable]{--inline-message-fgColor:var(--fgColor-muted)}.InlineMessageIcon{min-height:calc(var(--inline-message-lineHeight)*var(--inline-message-fontSize))}

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

@@ -1 +1 @@
-{"version":3,"sources":["inline_message.pcss"],"names":[],"mappings":"AAAA,eAUE,iBAAkB,CAHlB,mCAAoC,CACpC,gBAAkB,CAPlB,YAAa,CAEb,wCAAyC,CAMzC,8BAA+B,CAJ/B,4CAgCF,CAzBE,gCACE,qDAAsD,CACtD,oEACF,CAEA,iCACE,sDAAuD,CACvD,qEACF,CAEA,qCACE,iDACF,CAEA,sCACE,8CACF,CAEA,qCACE,+CACF,CAEA,yCACE,6CACF,CAGF,mBACE,gFACF","file":"inline_message.css","sourcesContent":[".InlineMessage {\n  display: grid;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--inline-message-fontSize);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--inline-message-lineHeight);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--inline-message-fgColor);\n  column-gap: 0.5rem;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n\n  &[data-size='small'] {\n    --inline-message-fontSize: var(--text-body-size-small);\n    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);\n  }\n\n  &[data-size='medium'] {\n    --inline-message-fontSize: var(--text-body-size-medium);\n    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);\n  }\n\n  &[data-variant='warning'] {\n    --inline-message-fgColor: var(--fgColor-attention);\n  }\n\n  &[data-variant='critical'] {\n    --inline-message-fgColor: var(--fgColor-danger);\n  }\n\n  &[data-variant='success'] {\n    --inline-message-fgColor: var(--fgColor-success);\n  }\n\n  &[data-variant='unavailable'] {\n    --inline-message-fgColor: var(--fgColor-muted);\n  }\n}\n\n.InlineMessageIcon {\n  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));\n}"]}
+{"version":3,"sources":["inline_message.pcss"],"names":[],"mappings":"AAAA,eACE,YAAa,CAEb,wCAAyC,CAEzC,4CAA6C,CAE7C,mCAAoC,CACpC,gBAAkB,CAClB,8BAA+B,CAC/B,iBA2BF,CAzBE,gCACE,qDAAsD,CACtD,oEACF,CAEA,iCACE,sDAAuD,CACvD,qEACF,CAEA,qCACE,iDACF,CAEA,sCACE,8CACF,CAEA,qCACE,+CACF,CAEA,yCACE,6CACF,CAGF,mBACE,gFACF","file":"inline_message.css","sourcesContent":[".InlineMessage {\n  display: grid;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--inline-message-fontSize);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--inline-message-lineHeight);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--inline-message-fgColor);\n  column-gap: 0.5rem;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n\n  &[data-size='small'] {\n    --inline-message-fontSize: var(--text-body-size-small);\n    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);\n  }\n\n  &[data-size='medium'] {\n    --inline-message-fontSize: var(--text-body-size-medium);\n    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);\n  }\n\n  &[data-variant='warning'] {\n    --inline-message-fgColor: var(--fgColor-attention);\n  }\n\n  &[data-variant='critical'] {\n    --inline-message-fgColor: var(--fgColor-danger);\n  }\n\n  &[data-variant='success'] {\n    --inline-message-fgColor: var(--fgColor-success);\n  }\n\n  &[data-variant='unavailable'] {\n    --inline-message-fgColor: var(--fgColor-muted);\n  }\n}\n\n.InlineMessageIcon {\n  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));\n}"]}

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

@@ -19,7 +19,7 @@ module Primer
           end
         end
 
-        def render_in(view_context, &block)
+        def render_in(view_context, **_kwargs, &block)
           super(view_context) do
             block&.call(@dialog, @button)
           end

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

@@ -19,7 +19,7 @@ module Primer
           end
         end
 
-        def render_in(view_context, &block)
+        def render_in(view_context, **_kwargs, &block)
           super(view_context) do
             block&.call(@menu, @button)
           end

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

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 auto;font-size:var(--text-body-size-medium)}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:var(--base-size-2)}.PageHeader-parentLink{flex:1 1 auto}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{line-height:var(--control-small-size)}.PageHeader--noBreadcrumb .PageHeader-actions{height:var(--control-small-size)}
+.PageHeader{display:flex;padding-bottom:var(--base-size-8);margin-bottom:var(--base-size-16);border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);flex-flow:column}.PageHeader--withTabNav{border-bottom:none;padding-bottom:0;margin-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{display:flex;flex-flow:row;justify-content:flex-end;align-items:center;margin-bottom:var(--base-size-8)}.PageHeader-title{font-size:var(--text-title-size-medium);flex:1 1 auto}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{font-size:var(--text-body-size-medium);color:var(--fgColor-muted);flex:1 auto}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{justify-content:flex-end;display:flex;align-items:center}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-top:var(--base-size-2);margin-right:var(--base-size-4)}.PageHeader-parentLink{flex:1 1 auto}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{line-height:var(--control-small-size)}.PageHeader--noBreadcrumb .PageHeader-actions{height:var(--control-small-size)}

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

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF,CAGA,uCACE,iDACE,YACF,CACF,CAIE,+CACE,qCACF,CAEA,8CACE,gCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n  height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 auto;\n}\n\n.PageHeader-description--underlined-links a {\n  /* Ensure the accessibility is met, given that the description is written in light grey */\n  text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: var(--base-size-2); /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n\n/* Hide the context bar on desktop when no breadcrumb is visible */\n@media screen and (min-width: 543.98px) {\n  .PageHeader--noBreadcrumb .PageHeader-contextBar {\n    display: none;\n  }\n}\n\n/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb {\n  & .PageHeader-titleBar {\n    line-height: var(--control-small-size);\n  }\n\n  & .PageHeader-actions {\n    height: var(--control-small-size);\n  }\n}"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YACE,YAAa,CACb,iCAAkC,CAClC,iCAAkC,CAClC,oEAAqE,CACrE,gBACF,CAEA,wBACE,kBAAmB,CACnB,gBAAiB,CACjB,eACF,CAEA,uBAME,gCACF,CAEA,4CARE,YAAa,CACb,aAAc,CACd,wBAAyB,CACzB,kBAAmB,CACnB,gCAUF,CAEA,kBACE,uCAAwC,CACxC,aACF,CAEA,yBACE,sCACF,CAGA,wBACE,sCAAuC,CACvC,0BAA2B,CAC3B,WACF,CAGA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBACE,wBAAyB,CACzB,YAAa,CACb,kBACF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BACE,6BAA8B,CAC9B,+BACF,CAEA,uBACE,aACF,CAGA,uCACE,iDACE,YACF,CACF,CAIE,+CAEE,qCACF,CAEA,8CACE,gCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n  height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 auto;\n}\n\n/* stylelint-disable-next-line selector-max-type -- description holds rich text; links can only be targeted by the `a` type selector */\n.PageHeader-description--underlined-links a {\n  /* Ensure the accessibility is met, given that the description is written in light grey */\n  text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: var(--base-size-2); /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n\n/* Hide the context bar on desktop when no breadcrumb is visible */\n@media screen and (min-width: 543.98px) {\n  .PageHeader--noBreadcrumb .PageHeader-contextBar {\n    display: none;\n  }\n}\n\n/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb {\n  & .PageHeader-titleBar {\n    /* stylelint-disable-next-line primer/typography -- control size var intentionally matches the toggle-menu button height for vertical alignment */\n    line-height: var(--control-small-size);\n  }\n\n  & .PageHeader-actions {\n    height: var(--control-small-size);\n  }\n}"]}

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

@@ -47,6 +47,7 @@
   flex: 1 auto;
 }
 
+/* stylelint-disable-next-line selector-max-type -- description holds rich text; links can only be targeted by the `a` type selector */
 .PageHeader-description--underlined-links a {
   /* Ensure the accessibility is met, given that the description is written in light grey */
   text-decoration: underline;
@@ -94,6 +95,7 @@
 /* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
 .PageHeader--noBreadcrumb {
   & .PageHeader-titleBar {
+    /* stylelint-disable-next-line primer/typography -- control size var intentionally matches the toggle-menu button height for vertical alignment */
     line-height: var(--control-small-size);
   }
 

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

@@ -1 +1 @@
-.Page{align-items:center;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default);cursor:pointer;display:inline-flex;height:var(--base-size-32);justify-content:center;margin-right:var(--base-size-4);min-width:var(--base-size-32);padding:var(--base-size-8) var(--base-size-6);transition:background-color .2s cubic-bezier(.3,0,.5,1);vertical-align:middle;white-space:nowrap}.Page[rel=next]>svg,.Page[rel=prev]>svg{height:var(--base-size-16);width:var(--base-size-16)}.Page[rel=prev]>svg{margin-inline-end:var(--base-size-4)}.Page[rel=next]>svg{margin-inline-start:var(--base-size-4)}.Page:last-child{margin-right:0}.Page:focus,.Page:hover{background-color:var(--control-transparent-bgColor-hover);outline:0;-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.Page:focus-visible{outline:2px solid var(--bgColor-accent-emphasis)}.Page:active{border-color:var(--borderColor-muted)}.Page[rel=next],.Page[rel=prev]{color:var(--fgColor-accent)}.Page[aria-current],.Page[aria-current]:hover{background-color:var(--bgColor-accent-emphasis);border-color:#0000;color:var(--fgColor-onEmphasis)}.Page[aria-current]:focus-visible{box-shadow:inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);outline:2px solid var(--bgColor-accent-emphasis)}.Page[aria-hidden],.Page[aria-hidden]:hover,.Page[role=presentation],.Page[role=presentation]:hover{background-color:initial;color:var(--fgColor-disabled);cursor:default}.PaginationContainer{margin:var(--base-size-16) 0;text-align:center}@media (max-width:543.98px){.Page:not([rel=prev]):not([rel=next]){display:none}}
+.Page{min-width:var(--base-size-32);height:var(--base-size-32);padding:var(--base-size-8) var(--base-size-6);margin-right:var(--base-size-4);color:var(--fgColor-default);white-space:nowrap;vertical-align:middle;cursor:pointer;border-radius:var(--borderRadius-medium);transition:background-color .2s cubic-bezier(.3,0,.5,1);display:inline-flex;align-items:center;justify-content:center}.Page[rel=next]>svg,.Page[rel=prev]>svg{height:var(--base-size-16);width:var(--base-size-16)}.Page[rel=prev]>svg{margin-inline-end:var(--base-size-4)}.Page[rel=next]>svg{margin-inline-start:var(--base-size-4)}.Page:last-child{margin-right:0}.Page:focus,.Page:hover{-webkit-text-decoration:none;text-decoration:none;background-color:var(--control-transparent-bgColor-hover);outline:0;transition-duration:.1s}.Page:focus-visible{outline:2px solid var(--bgColor-accent-emphasis)}.Page:active{border-color:var(--borderColor-muted)}.Page[rel=next],.Page[rel=prev]{color:var(--fgColor-accent)}.Page[aria-current],.Page[aria-current]:hover{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-accent-emphasis);border-color:#0000}.Page[aria-current]:focus-visible{outline:2px solid var(--bgColor-accent-emphasis);box-shadow:inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis)}.Page[aria-hidden],.Page[aria-hidden]:hover,.Page[role=presentation],.Page[role=presentation]:hover{color:var(--fgColor-disabled);cursor:default;background-color:initial}.PaginationContainer{margin:var(--base-size-16) 0;text-align:center}@media (max-width:543.98px){.Page:not([rel=prev]):not([rel=next]){display:none}}

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

@@ -1 +1 @@
-{"version":3,"sources":["pagination.pcss"],"names":[],"mappings":"AAAA,MAYE,kBAAmB,CAHnB,gDAAiD,CAJjD,4BAA6B,CAG7B,cAAe,CAGf,mBAAoB,CATpB,0BAA2B,CAW3B,sBAAuB,CATvB,+BAAgC,CAHhC,6BAA8B,CAE9B,6CAA8C,CAO9C,uDAA8D,CAH9D,qBAAsB,CADtB,kBAQF,CAEA,wCAEE,0BAA2B,CAC3B,yBACF,CAEA,oBACE,oCACF,CAEA,oBACE,sCACF,CAEA,iBACE,cACF,CAEA,wBAGE,yDAA0D,CAC1D,SAAU,CAFV,4BAAqB,CAArB,oBAAqB,CAGrB,uBACF,CAEA,oBACE,gDACF,CAEA,aACE,qCACF,CAEA,gCAEE,2BACF,CAEA,8CAGE,+CAAgD,CAChD,kBAAyB,CAFzB,+BAGF,CAEA,kCAEE,mEAAoE,CADpE,gDAEF,CAEA,oGAME,wBAA6B,CAF7B,6BAA8B,CAC9B,cAEF,CAEA,qBACE,4BAA6B,CAC7B,iBACF,CAEA,4BACE,sCACE,YACF,CACF","file":"pagination.css","sourcesContent":[".Page {\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  padding: var(--base-size-8) var(--base-size-6);\n  margin-right: var(--base-size-4);\n  color: var(--fgColor-default);\n  white-space: nowrap;\n  vertical-align: middle;\n  cursor: pointer;\n  border-radius: var(--borderRadius-medium,.375rem);\n  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Page[rel='prev'] > svg,\n.Page[rel='next'] > svg {\n  height: var(--base-size-16);\n  width: var(--base-size-16);\n}\n\n.Page[rel='prev'] > svg {\n  margin-inline-end: var(--base-size-4);\n}\n\n.Page[rel='next'] > svg {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Page:last-child {\n  margin-right: 0;\n}\n\n.Page:hover,\n.Page:focus {\n  text-decoration: none;\n  background-color: var(--control-transparent-bgColor-hover);\n  outline: 0;\n  transition-duration: 0.1s;\n}\n\n.Page:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n}\n\n.Page:active {\n  border-color: var(--borderColor-muted);\n}\n\n.Page[rel='prev'],\n.Page[rel='next'] {\n  color: var(--fgColor-accent);\n}\n\n.Page[aria-current],\n.Page[aria-current]:hover {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-accent-emphasis);\n  border-color: transparent;\n}\n\n.Page[aria-current]:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n  box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);\n}\n\n.Page[aria-hidden],\n.Page[aria-hidden]:hover,\n.Page[role='presentation'],\n.Page[role='presentation']:hover {\n  color: var(--fgColor-disabled);\n  cursor: default;\n  background-color: transparent;\n}\n\n.PaginationContainer {\n  margin: var(--base-size-16) 0;\n  text-align: center;\n}\n\n@media (max-width: 543.98px){\n  .Page:not([rel='prev']):not([rel='next']) {\n    display: none;\n  }\n}\n"]}
+{"version":3,"sources":["pagination.pcss"],"names":[],"mappings":"AAEA,MACE,6BAA8B,CAC9B,0BAA2B,CAC3B,6CAA8C,CAC9C,+BAAgC,CAChC,4BAA6B,CAC7B,kBAAmB,CACnB,qBAAsB,CACtB,cAAe,CACf,wCAAyC,CACzC,uDAA8D,CAC9D,mBAAoB,CACpB,kBAAmB,CACnB,sBACF,CAEA,wCAEE,0BAA2B,CAC3B,yBACF,CAEA,oBACE,oCACF,CAEA,oBACE,sCACF,CAEA,iBACE,cACF,CAEA,wBAEE,4BAAqB,CAArB,oBAAqB,CACrB,yDAA0D,CAC1D,SAAU,CACV,uBACF,CAEA,oBACE,gDACF,CAEA,aACE,qCACF,CAEA,gCAEE,2BACF,CAEA,8CAEE,+BAAgC,CAChC,+CAAgD,CAChD,kBACF,CAEA,kCACE,gDAAiD,CAEjD,mEACF,CAEA,oGAIE,6BAA8B,CAC9B,cAAe,CACf,wBACF,CAEA,qBACE,4BAA6B,CAC7B,iBACF,CAEA,4BACE,sCACE,YACF,CACF","file":"pagination.css","sourcesContent":["/* stylelint-disable selector-max-type -- pagination arrows are styled via `.Page[rel] > svg`; the svg icon can only be targeted by its type selector */\n\n.Page {\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  padding: var(--base-size-8) var(--base-size-6);\n  margin-right: var(--base-size-4);\n  color: var(--fgColor-default);\n  white-space: nowrap;\n  vertical-align: middle;\n  cursor: pointer;\n  border-radius: var(--borderRadius-medium);\n  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Page[rel='prev'] > svg,\n.Page[rel='next'] > svg {\n  height: var(--base-size-16);\n  width: var(--base-size-16);\n}\n\n.Page[rel='prev'] > svg {\n  margin-inline-end: var(--base-size-4);\n}\n\n.Page[rel='next'] > svg {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Page:last-child {\n  margin-right: 0;\n}\n\n.Page:hover,\n.Page:focus {\n  text-decoration: none;\n  background-color: var(--control-transparent-bgColor-hover);\n  outline: 0;\n  transition-duration: 0.1s;\n}\n\n.Page:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n}\n\n.Page:active {\n  border-color: var(--borderColor-muted);\n}\n\n.Page[rel='prev'],\n.Page[rel='next'] {\n  color: var(--fgColor-accent);\n}\n\n.Page[aria-current],\n.Page[aria-current]:hover {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-accent-emphasis);\n  border-color: transparent;\n}\n\n.Page[aria-current]:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n  /* stylelint-disable-next-line primer/box-shadow -- custom focus-ring built from Primer size/color primitives; no single Primer box-shadow token matches */\n  box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);\n}\n\n.Page[aria-hidden],\n.Page[aria-hidden]:hover,\n.Page[role='presentation'],\n.Page[role='presentation']:hover {\n  color: var(--fgColor-disabled);\n  cursor: default;\n  background-color: transparent;\n}\n\n.PaginationContainer {\n  margin: var(--base-size-16) 0;\n  text-align: center;\n}\n\n@media (max-width: 543.98px){\n  .Page:not([rel='prev']):not([rel='next']) {\n    display: none;\n  }\n}\n"]}

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

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-max-type -- pagination arrows are styled via `.Page[rel] > svg`; the svg icon can only be targeted by its type selector */
+
 .Page {
   min-width: var(--base-size-32);
   height: var(--base-size-32);
@@ -7,7 +9,7 @@
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
-  border-radius: var(--borderRadius-medium,.375rem);
+  border-radius: var(--borderRadius-medium);
   transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
   display: inline-flex;
   align-items: center;
@@ -62,6 +64,7 @@
 
 .Page[aria-current]:focus-visible {
   outline: 2px solid var(--bgColor-accent-emphasis);
+  /* stylelint-disable-next-line primer/box-shadow -- custom focus-ring built from Primer size/color primitives; no single Primer box-shadow token matches */
   box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);
 }
 

data/app/components/primer/open_project/side_panel/section.css

@@ -1 +1 @@
-.SidePanel-sectionHeader{align-items:center;display:flex;height:32px;margin-bottom:8px}.SidePanel-sectionCounter{margin-left:8px}.SidePanel-sectionAction{display:flex;flex:1;justify-content:right}.SidePanel-sectionContent,.SidePanel-sectionDescription{margin-top:0}:is(.SidePanel-sectionContent,.SidePanel-sectionDescription):not(:last-child){margin-bottom:16px}
+.SidePanel-sectionHeader{display:flex;align-items:center;height:32px;margin-bottom:var(--base-size-8)}.SidePanel-sectionCounter{margin-left:var(--base-size-8)}.SidePanel-sectionAction{justify-content:right;flex:1;display:flex}.SidePanel-sectionContent,.SidePanel-sectionDescription{margin-top:0}:is(.SidePanel-sectionContent,.SidePanel-sectionDescription):not(:last-child){margin-bottom:var(--base-size-16)}

data/app/components/primer/open_project/side_panel/section.css.map

@@ -1 +1 @@
-{"version":3,"sources":["section.pcss"],"names":[],"mappings":"AAEA,yBAEE,kBAAmB,CADnB,YAAa,CAEb,WAAY,CACZ,iBACF,CAEA,0BACE,eACF,CAEA,yBAGE,YAAa,CADb,MAAO,CADP,qBAGF,CAEA,wDAEE,YAKF,CAHE,8EACE,kBACF","file":"section.css","sourcesContent":["/* CSS for OpenProject::SidePanel::Section  */\n\n.SidePanel-sectionHeader {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  margin-bottom: 8px;\n}\n\n.SidePanel-sectionCounter {\n  margin-left: 8px;\n}\n\n.SidePanel-sectionAction {\n  justify-content: right;\n  flex: 1;\n  display: flex;\n}\n\n.SidePanel-sectionContent,\n.SidePanel-sectionDescription {\n  margin-top: 0;\n\n  &:not(:last-child) {\n    margin-bottom: 16px;\n  }\n}\n"]}
+{"version":3,"sources":["section.pcss"],"names":[],"mappings":"AAEA,yBACE,YAAa,CACb,kBAAmB,CACnB,WAAY,CACZ,gCACF,CAEA,0BACE,8BACF,CAEA,yBACE,qBAAsB,CACtB,MAAO,CACP,YACF,CAEA,wDAEE,YAKF,CAHE,8EACE,iCACF","file":"section.css","sourcesContent":["/* CSS for OpenProject::SidePanel::Section  */\n\n.SidePanel-sectionHeader {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  margin-bottom: var(--base-size-8);\n}\n\n.SidePanel-sectionCounter {\n  margin-left: var(--base-size-8);\n}\n\n.SidePanel-sectionAction {\n  justify-content: right;\n  flex: 1;\n  display: flex;\n}\n\n.SidePanel-sectionContent,\n.SidePanel-sectionDescription {\n  margin-top: 0;\n\n  &:not(:last-child) {\n    margin-bottom: var(--base-size-16);\n  }\n}\n"]}

data/app/components/primer/open_project/side_panel/section.pcss

@@ -4,11 +4,11 @@
   display: flex;
   align-items: center;
   height: 32px;
-  margin-bottom: 8px;
+  margin-bottom: var(--base-size-8);
 }
 
 .SidePanel-sectionCounter {
-  margin-left: 8px;
+  margin-left: var(--base-size-8);
 }
 
 .SidePanel-sectionAction {
@@ -22,6 +22,6 @@
   margin-top: 0;
 
   &:not(:last-child) {
-    margin-bottom: 16px;
+    margin-bottom: var(--base-size-16);
   }
 }

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

@@ -1 +1 @@
-.SubHeader{align-items:baseline;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:var(--base-size-16)}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center;white-space:nowrap}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;flex-wrap:wrap;grid-area:left;row-gap:var(--base-size-16);width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;flex-basis:max-content;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction{display:none}@media (max-width:767.98px){.SubHeader{grid-template-areas:"left right" "middle middle" "bottom bottom";grid-template-columns:1fr auto}.SubHeader--expandedSearch{grid-template-areas:"left left" "middle middle" "bottom bottom"}.SubHeader--expandedSearch .SubHeader-hiddenOnExpand{display:none!important}.SubHeader--emptyLeftPane{grid-template-areas:"middle middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto}.SubHeader--emptyLeftPane .SubHeader-middlePane{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SubHeader-middlePane{text-align:left}.SubHeader-middlePane:has(>*){margin-top:var(--base-size-16)}}
+.SubHeader{display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;align-items:baseline;margin-bottom:var(--base-size-16)}.SubHeader-rightPane{grid-area:right;display:flex;align-items:center;column-gap:12px}.SubHeader-middlePane{grid-area:middle;text-align:center;white-space:nowrap}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{grid-area:left;display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--base-size-16);width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;flex-basis:max-content;width:100%;gap:8px}.SubHeader-filterInput_hiddenClearButton+.FormControl-input-trailingAction{display:none}@media (max-width:767.98px){.SubHeader{grid-template-areas:"left right" "middle middle" "bottom bottom";grid-template-columns:1fr auto}.SubHeader--expandedSearch{grid-template-areas:"left left" "middle middle" "bottom bottom"}.SubHeader--expandedSearch .SubHeader-hiddenOnExpand{display:none!important}.SubHeader--emptyLeftPane{grid-template-areas:"middle middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto}.SubHeader--emptyLeftPane .SubHeader-middlePane{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.SubHeader-middlePane{text-align:left}.SubHeader-middlePane:has(>*){margin-top:var(--base-size-16)}}

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

@@ -1 +1 @@
-{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,oBAAqB,CAHrB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,iCACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBAAkB,CAClB,kBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAEb,cAAe,CAHf,cAAe,CAIf,2BAA4B,CAC5B,UASJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CACb,sBAAuB,CAEvB,OAAQ,CADR,UAEJ,CAEA,2EACE,YACF,CAEA,4BACI,WACI,gEAAiE,CACjE,8BACJ,CAEA,2BACI,+DACJ,CAEA,qDACI,sBACJ,CAEA,0BACI,gEAAiE,CACjE,mCACJ,CAEA,gDAGI,eAAgB,CADhB,sBAAuB,CADvB,kBAGJ,CAEA,sBACI,eACJ,CAEA,8BACI,8BACJ,CACJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: baseline;\n    margin-bottom: var(--base-size-16);\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n    white-space: nowrap;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    row-gap: var(--base-size-16);\n    width: 100%;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    flex-basis: max-content;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {\n  display: none;\n}\n\n@media (max-width: 767.98px) {\n    .SubHeader {\n        grid-template-areas: \"left right\" \"middle middle\" \"bottom bottom\";\n        grid-template-columns: 1fr auto;\n    }\n\n    .SubHeader--expandedSearch {\n        grid-template-areas: \"left left\" \"middle middle\" \"bottom bottom\";\n    }\n\n    .SubHeader--expandedSearch .SubHeader-hiddenOnExpand {\n        display: none !important;\n    }\n\n    .SubHeader--emptyLeftPane {\n        grid-template-areas: \"middle middle right\" \"bottom bottom bottom\";\n        grid-template-columns: auto 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane .SubHeader-middlePane {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    }\n\n    .SubHeader-middlePane {\n        text-align: left;\n    }\n\n    .SubHeader-middlePane:has(> *) {\n        margin-top: var(--base-size-16);\n    }\n}\n"]}
+{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WACI,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CACpC,oBAAqB,CACrB,iCACJ,CAEA,qBACI,eAAgB,CAChB,YAAa,CACb,kBAAmB,CACnB,eACJ,CAEA,sBACI,gBAAiB,CACjB,iBAAkB,CAClB,kBACJ,CAEA,sBACI,gBACJ,CAEA,oBACI,cAAe,CACf,YAAa,CACb,kBAAmB,CACnB,cAAe,CACf,2BAA4B,CAC5B,UASJ,CAJQ,gGACI,WACJ,CAIR,2BACI,YAAa,CACb,sBAAuB,CACvB,UAAW,CACX,OACJ,CAEA,2EACE,YACF,CAEA,4BACI,WACI,gEAAiE,CACjE,8BACJ,CAEA,2BACI,+DACJ,CAEA,qDACI,sBACJ,CAEA,0BACI,gEAAiE,CACjE,mCACJ,CAEA,gDACI,kBAAmB,CACnB,sBAAuB,CACvB,eACJ,CAEA,sBACI,eACJ,CAEA,8BACI,8BACJ,CACJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: baseline;\n    margin-bottom: var(--base-size-16);\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n    white-space: nowrap;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    row-gap: var(--base-size-16);\n    width: 100%;\n\n    /* Since the container is not full width (due to the grid around it)\n     we want it to grow, and then be limited by the max-width of the \"FormControl-input-width--xy\" class */\n    & [class*='FormControl-input-width--'] {\n        &:not(.FormControl-input-width--auto) {\n            width: 100vw;\n        }\n    }\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    flex-basis: max-content;\n    width: 100%;\n    gap: 8px;\n}\n\n.SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction {\n  display: none;\n}\n\n@media (max-width: 767.98px) {\n    .SubHeader {\n        grid-template-areas: \"left right\" \"middle middle\" \"bottom bottom\";\n        grid-template-columns: 1fr auto;\n    }\n\n    .SubHeader--expandedSearch {\n        grid-template-areas: \"left left\" \"middle middle\" \"bottom bottom\";\n    }\n\n    .SubHeader--expandedSearch .SubHeader-hiddenOnExpand {\n        display: none !important;\n    }\n\n    .SubHeader--emptyLeftPane {\n        grid-template-areas: \"middle middle right\" \"bottom bottom bottom\";\n        grid-template-columns: auto 1fr auto;\n    }\n\n    .SubHeader--emptyLeftPane .SubHeader-middlePane {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n    }\n\n    .SubHeader-middlePane {\n        text-align: left;\n    }\n\n    .SubHeader-middlePane:has(> *) {\n        margin-top: var(--base-size-16);\n    }\n}\n"]}

data/app/lib/primer/forms/acts_as_component.rb

@@ -10,7 +10,7 @@ module Primer
       module InstanceMethods
         delegate :render, :content_tag, :output_buffer, :capture, to: :@view_context
 
-        def render_in(view_context, &block)
+        def render_in(view_context, **_kwargs, &block)
           @view_context = view_context
           before_render
           perform_render(&block)

data/app/lib/primer/forms/dsl/input.rb

@@ -76,7 +76,6 @@ module Primer
           @input_arguments = system_arguments
           @input_arguments.delete(:id) unless @input_arguments[:id].present?
           @label_arguments = @input_arguments.delete(:label_arguments) || {}
-          @label_arguments[:for] = id if id.present?
 
           @label_arguments[:class] = class_names(
             @label_arguments[:class],
@@ -121,6 +120,11 @@ module Primer
           end
           # rubocop:enable Style/IfUnlessModifier
 
+          # Only set `for` when the id is known. Otherwise leave it unset so
+          # Rails generates the scoped id for both label and input; passing
+          # `for: nil` would suppress that and drop the association.
+          @label_arguments[:for] = @input_arguments[:id] if @input_arguments[:id].present?
+
           # Whether or not to wrap the component in a FormControl, which renders a
           # label above and validation message beneath the input.
           @form_control = @input_arguments.delete(:form_control) { true }

data/app/lib/primer/forms/toggle_switch_form.rb

@@ -69,7 +69,7 @@ module Primer
       # assumes the presence of a builder so we create our own here. A builder
       # cannot be constructed without a corresponding view context, which is why
       # we have to override render_in and can't create it in the initializer.
-      def render_in(view_context, &block)
+      def render_in(view_context, **_kwargs, &block)
         @builder = Primer::Forms::Builder.new(
           nil, nil, view_context, {}
         )