openproject-primer_view_components 0.89.2 → 0.91.0

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/filterable_tree_view.css.map

@@ -1 +1 @@
-{"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,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.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/page_header.css.map

@@ -1 +1 @@
-{"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,CAEA,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,+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{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,.375rem);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}}
+.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,MACE,6BAA8B,CAC9B,0BAA2B,CAC3B,6CAA8C,CAC9C,+BAAgC,CAChC,4BAA6B,CAC7B,kBAAmB,CACnB,qBAAsB,CACtB,cAAe,CACf,gDAAiD,CACjD,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,CACjD,mEACF,CAEA,oGAIE,6BAA8B,CAC9B,cAAe,CACf,wBACF,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{display:flex;align-items:center;height:32px;margin-bottom:8px}.SidePanel-sectionCounter{margin-left:8px}.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: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,yBACE,YAAa,CACb,kBAAmB,CACnB,WAAY,CACZ,iBACF,CAEA,0BACE,eACF,CAEA,yBACE,qBAAsB,CACtB,MAAO,CACP,YACF,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/controllers/primer/view_components/tree_view_items_controller.rb

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

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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# Primer::SafeHrefHelper
+#
+# Detects unsafe URI schemes (e.g. `javascript:`) in `href` values so they can
+# be neutralized before being rendered into HTML attributes. Without this check,
+# a caller that forwards untrusted input into a component's `href:` argument can
+# trigger XSS when the user clicks the rendered anchor.
+module Primer
+  # :nodoc:
+  module SafeHrefHelper
+    # URI schemes that can execute script in the browser and are never valid
+    # destinations for a Primer-rendered link.
+    DISALLOWED_HREF_SCHEMES = %w[javascript vbscript].freeze
+
+    # Returns true when `href` starts with a disallowed URI scheme.
+    #
+    # Mirrors browser URL parsing by stripping ASCII whitespace and control
+    # characters (including tab/CR/LF) before extracting the scheme. This
+    # prevents bypasses such as `j\tavascript:...`, ` JaVaScRiPt:...`, or a
+    # leading null byte, all of which browsers happily execute.
+    def self.unsafe_href?(href)
+      return false if href.nil?
+
+      normalized = href.to_s.gsub(/[\u0000-\u0020]/, "")
+      scheme = normalized[/\A([a-z][a-z0-9+\-.]*):/i, 1]
+      return false unless scheme
+
+      DISALLOWED_HREF_SCHEMES.include?(scheme.downcase)
+    end
+
+    def unsafe_href?(href)
+      SafeHrefHelper.unsafe_href?(href)
+    end
+  end
+end

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

@@ -1,21 +1,21 @@
 <%= render(Primer::Alpha::TreeView::SubTree.new(path: ["primer"], node_variant: :div)) do |tree| %>
-  <% tree.with_sub_tree(label: "alpha") do |sub_tree| %>
+  <% tree.with_sub_tree(label: "alpha", 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) %>
     <% end %>
 
-    <% sub_tree.with_sub_tree(label: "action_menu", expanded: action_menu_expanded) do |sub_tree| %>
+    <% 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_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) %>
       <% end %>
 
-      <% sub_tree.with_leaf(label: "group.rb") do |item| %>
+      <% sub_tree.with_leaf(label: "group.rb", select_variant: select_variant) do |item| %>
         <% item.with_leading_visual_icon(icon: :file) %>
       <% end %>
 
-      <% sub_tree.with_leaf(label: "heading.rb") do |item| %>
+      <% sub_tree.with_leaf(label: "heading.rb", select_variant: select_variant) do |item| %>
         <% item.with_leading_visual_icon(icon: :file) %>
       <% end %>
     <% end %>

data/lib/primer/static/generate_previews.rb

@@ -10,7 +10,7 @@ module Primer
     module GeneratePreviews
       class << self
         def call
-          Lookbook.previews.filter_map do |preview|
+          Lookbook.previews.sort_by(&:lookup_path).filter_map do |preview|
             next if preview.preview_class == Primer::FormsPreview
             next if Primer::Accessibility.ignore_preview?(preview.preview_class)
 

data/lib/primer/view_components/version.rb

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

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

@@ -1,12 +1,12 @@
 <div style="max-width: 400px">
   <%= render(Primer::Alpha::TreeView.new) do |tree_view| %>
-    <% tree_view.with_sub_tree(label: "primer") do |sub_tree| %>
+    <% tree_view.with_sub_tree(label: "primer", 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) %>
       <% end %>
 
-      <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(action_menu_expanded: action_menu_expanded)) %>
+      <% 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)) %>
     <% end %>
   <% end %>
 </div>

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

@@ -0,0 +1,16 @@
+<%= form_with(url: primer_view_components.generic_form_submission_path(format: :json)) do |f| %>
+  <%= render(Primer::Alpha::Stack.new) do %>
+    <%= render(Primer::Alpha::TreeView.new(form_arguments: { builder: f, name: "folder_structure" })) do |tree| %>
+      <% tree.with_sub_tree(label: "primer", 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) %>
+        <% end %>
+
+        <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(select_variant: select_variant)) %>
+      <% end %>
+    <% end %>
+
+    <%= render(Primer::Alpha::SubmitButton.new(name: :submit, label: "Submit")) %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/tree_view_preview.rb

@@ -114,9 +114,11 @@ module Primer
       # @label Async alpha
       #
       # @param action_menu_expanded [Boolean] toggle
-      def async_alpha(action_menu_expanded: false)
+      # @param select_variant [Symbol] select [none, single, multiple]
+      def async_alpha(action_menu_expanded: false, select_variant: :none)
         render_with_template(locals: {
-          action_menu_expanded: coerce_bool(action_menu_expanded)
+          action_menu_expanded: coerce_bool(action_menu_expanded),
+          select_variant: select_variant.to_sym
         })
       end
 
@@ -197,6 +199,15 @@ module Primer
         })
       end
 
+      # @label Async form input
+      # @hidden
+      # @param select_variant [Symbol] select [single, multiple]
+      def async_form_input(select_variant: :single)
+        render_with_template(locals: {
+          select_variant: select_variant.to_sym
+        })
+      end
+
       # @label Doubled paths
       # @hidden
       def doubled_path

data/previews/primer/open_project/collapsible_section_preview/with_link_in_title.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+  <% section.with_title { render(Primer::Beta::Link.new(href: "#")) { "Feedback" } } %>
+  <% section.with_collapsible_content do %>
+    <%= render(Primer::Alpha::Banner.new(mb: 3)) { "Please take one minute to answer this question" } %>
+  <% end %>
+<% end %>

data/previews/primer/open_project/collapsible_section_preview.rb

@@ -52,6 +52,15 @@ module Primer
           locals: { }
         )
       end
+
+      # @label With link in title
+      # @hidden
+      def with_link_in_title
+        render_with_template(
+          template: "primer/open_project/collapsible_section_preview/with_link_in_title",
+          locals: { }
+        )
+      end
     end
   end
 end

data/static/classes.json

@@ -560,6 +560,9 @@
   "Popover-message": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--bottom": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--bottom-left": [
     "Primer::Beta::Popover"
   ],
@@ -569,9 +572,27 @@
   "Popover-message--large": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--left": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--left-bottom": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--left-top": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--no-caret": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--right": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--right-bottom": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--right-top": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--top-left": [
     "Primer::Beta::Popover"
   ],