Bump primer upstream 0.50.0

.changeset/bright-chefs-swim.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Blankslate: Add `text-wrap: balance` to heading and description

.changeset/fast-cougars-repeat.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Remove newline in file to revert accidental visual regression of Button

.changeset/metal-dots-attend.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Dialog: Fixes issue in `dialog_helper.ts` where focus could be lost

.changeset/nasty-moles-sip.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+chore(treeview): add treeitem role to shadow dom node

.changeset/rare-jokes-scream.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Chore: add custom "invokerClicked" selectpanel event

.changeset/slow-maps-lie.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+Change `ToggleSwitch` ViewComponent `type` to `button`

.changeset/tiny-pianos-deny.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Update Catalyst to version 1.8.0 and hard-code controller/custom-element names via their @controller('...') decorators to allow for better minification

.github/workflows/demo-production-deploy.yml

@@ -72,7 +72,7 @@ jobs:
       with:
         ruby-version: '3.3'
         bundler-cache: true
-    - uses: actions/cache@v5.0.2
+    - uses: actions/cache@v5.0.3
       with:
         path: demo/gemfiles/vendor/bundle
         key: gems-build-kuby-main-ruby-3.3.x-${{ hashFiles('demo/gemfiles/kuby.gemfile.lock') }}

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
     - uses: actions/checkout@v6
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/changed-files@e0021407031f5be11a464abee9a0776171c79891
+      uses: tj-actions/changed-files@8cba46e29c11878d930bca7870bb54394d3e8b21
       with:
         files: |
           docs/**/*.md
@@ -42,7 +42,7 @@ jobs:
     - uses: actions/checkout@v6
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/changed-files@e0021407031f5be11a464abee9a0776171c79891
+      uses: tj-actions/changed-files@8cba46e29c11878d930bca7870bb54394d3e8b21
       with:
         files: |
           app/**/*.rb
@@ -62,7 +62,7 @@ jobs:
     - uses: actions/checkout@v6
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@e0021407031f5be11a464abee9a0776171c79891
+      uses: tj-actions/changed-files@8cba46e29c11878d930bca7870bb54394d3e8b21
       with:
         files: |
           app/components/**/*.erb
@@ -79,7 +79,7 @@ jobs:
     - uses: actions/checkout@v6
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@e0021407031f5be11a464abee9a0776171c79891
+      uses: tj-actions/changed-files@8cba46e29c11878d930bca7870bb54394d3e8b21
       with:
         files: |
           app/components/**/*.ts
@@ -99,7 +99,7 @@ jobs:
     - uses: actions/checkout@v6
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@e0021407031f5be11a464abee9a0776171c79891
+      uses: tj-actions/changed-files@8cba46e29c11878d930bca7870bb54394d3e8b21
       with:
         files: |
           app/components/**/*.pcss

.github/workflows/release.yml

@@ -90,7 +90,7 @@ jobs:
 
       - name: Create release pull request or publish to npm
         id: changesets
-        uses: changesets/action@v1.4.10
+        uses: changesets/action@v1.6.0
         with:
           title: Release Tracking
           version: npm run changeset:version

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_failure/aria-snapshot--after-interaction.yml

@@ -1,6 +1,7 @@
 - tree:
   - treeitem "primer" [expanded] [level=1] [selected]
-  - group:
-    - treeitem "Something went wrong Retry" [level=2]:
-      - text: Something went wrong
-      - button "Retry"
+  - treeitem:
+    - group:
+      - treeitem "Something went wrong Retry" [level=2]:
+        - text: Something went wrong
+        - button "Retry"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_skeleton/aria-snapshot--after-interaction.yml

@@ -1,4 +1,5 @@
 - tree:
   - treeitem "primer" [expanded] [level=1] [selected]
-  - group:
-    - treeitem [level=2]
+  - treeitem:
+    - group:
+      - treeitem [level=2]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/loading_spinner/aria-snapshot--after-interaction.yml

@@ -1,4 +1,5 @@
 - tree:
   - treeitem "primer" [expanded] [level=1] [selected]
-  - group:
-    - treeitem "Loading Loading..." [level=2]
+  - treeitem:
+    - group:
+      - treeitem "Loading Loading..." [level=2]

Gemfile

@@ -72,7 +72,7 @@ group :development do
   gem "rubocop-rails-accessibility", "~> 1.0"
   gem "selenium-webdriver", "~> 4.40"
   gem "simplecov", "~> 0.22.0"
-  gem "simplecov-console", "~> 0.9.4"
+  gem "simplecov-console", "~> 0.9.5"
   gem "sprockets"
   gem "sprockets-rails"
   gem "thor"

Gemfile.lock

@@ -152,7 +152,7 @@ GEM
     nio4r (2.7.5)
     nokogiri (1.18.9-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-linux-gnu)
+    nokogiri (1.19.1-x86_64-linux-gnu)
       racc (~> 1.4)
     openproject-octicons (19.32.0)
     parallel (1.27.0)
@@ -170,7 +170,7 @@ GEM
     puma (7.1.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (3.2.4)
+    rack (3.2.5)
     rack-cors (3.0.0)
       logger
       rack (>= 3.0.14)
@@ -257,7 +257,7 @@ GEM
       docile (~> 1.1)
       simplecov-html (~> 0.11)
       simplecov_json_formatter (~> 0.1)
-    simplecov-console (0.9.4)
+    simplecov-console (0.9.5)
       ansi
       simplecov
       terminal-table
@@ -350,7 +350,7 @@ DEPENDENCIES
   rubocop-rails-accessibility (~> 1.0)
   selenium-webdriver (~> 4.40)
   simplecov (~> 0.22.0)
-  simplecov-console (~> 0.9.4)
+  simplecov-console (~> 0.9.5)
   sourcemap (~> 0.1)
   sprockets
   sprockets-rails

app/components/primer/alpha/action_bar_element.ts

@@ -27,7 +27,7 @@ enum ItemType {
   Divider,
 }
 
-@controller
+@controller('action-bar')
 class ActionBarElement extends HTMLElement {
   @targets items: HTMLElement[]
   @target itemContainer: HTMLElement

app/components/primer/alpha/action_list.ts

@@ -39,7 +39,7 @@ export class ActionListTruncationObserver {
   }
 }
 
-@controller
+@controller('action-list')
 export class ActionListElement extends HTMLElement {
   #truncationObserver: ActionListTruncationObserver
 

app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -13,7 +13,7 @@ type SelectedItem = {
   element: Element
 }
 
-@controller
+@controller('action-menu')
 export class ActionMenuElement extends HTMLElement {
   @target includeFragment: IncludeFragmentElement
   @target overlay: AnchoredPositionElement

app/components/primer/alpha/layout.rb

@@ -12,7 +12,11 @@ module Alpha
     #
     # @accessibility
     #   Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
-    #   `main` or `sidebar` comes first in code. The code order won’t affect the visual position.
+    #   `main` or `sidebar` comes first in code. The code order won't affect the visual position.
+    #
+    #   When using `row_placement: :none` on the sidebar, the sidebar content will be hidden at narrow viewports.
+    #   This may cause WCAG 1.4.10 Reflow failures if the sidebar contains essential content. Only use `:none`
+    #   when the sidebar content is non-essential or available elsewhere on the page.
     class Layout < Primer::Component
       status :alpha
 
@@ -60,7 +64,7 @@ class Layout < Primer::Component
       #
       # @param width [Symbol] <%= one_of(Primer::Alpha::Layout::SIDEBAR_WIDTH_OPTIONS) %>
       # @param col_placement [Symbol] Sidebar placement when `Layout` is in column modes. <%= one_of(Primer::Alpha::Layout::SIDEBAR_COL_PLACEMENT_OPTIONS) %>
-      # @param row_placement [Symbol] Sidebar placement when `Layout` is in row mode. <%= one_of(Primer::Alpha::Layout::SIDEBAR_ROW_PLACEMENT_OPTIONS) %>
+      # @param row_placement [Symbol] Sidebar placement when `Layout` is in row mode. <%= one_of(Primer::Alpha::Layout::SIDEBAR_ROW_PLACEMENT_OPTIONS) %> **Note:** Using `:none` hides the sidebar at narrow viewports, which may cause WCAG 1.4.10 Reflow issues if the sidebar contains essential content.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :sidebar, lambda { |
         width: SIDEBAR_WIDTH_DEFAULT,

app/components/primer/alpha/segmented_control.ts

@@ -1,6 +1,6 @@
 import {controller, targets} from '@github/catalyst'
 
-@controller
+@controller('segmented-control')
 export class SegmentedControlElement extends HTMLElement {
   @targets items: HTMLElement[]
 

app/components/primer/alpha/select_panel_element.ts

@@ -64,7 +64,7 @@ const updateWhenVisible = (() => {
   }
 })()
 
-@controller
+@controller('select-panel')
 export class SelectPanelElement extends HTMLElement {
   @target includeFragment: IncludeFragmentElement
   @target dialog: HTMLDialogElement
@@ -813,6 +813,9 @@ export class SelectPanelElement extends HTMLElement {
   }
 
   #handleInvokerActivated(event: Event) {
+    // Let listeners observe the invoker was clicked
+    this.invokerElement?.dispatchEvent(new CustomEvent('invokerClicked', {bubbles: true}))
+
     event.preventDefault()
 
     // eslint-disable-next-line no-restricted-syntax

app/components/primer/alpha/toggle_switch.rb

@@ -39,6 +39,7 @@ class ToggleSwitch < Primer::Component
       #   Only customize this label if it makes the toggle’s state more meaningful
       #   in its specific context. For example, for a "Show images" setting,
       #   you might use "Show" when the switch is OFF.
+      # @param button_type [Symbol] The type attribute for the underlying button element. If `nil`, the button will not have a type attribute, which means it will default to "submit" if it's inside a form and "button" otherwise.
 
       def initialize(
         src: nil,
@@ -51,6 +52,7 @@ def initialize(
         autofocus: nil,
         on_label: nil,
         off_label: nil,
+        button_type: nil,
         **system_arguments
       )
         @src = src
@@ -75,6 +77,7 @@ def initialize(
         )
 
         @button_arguments = {
+          type: button_type,
           aria: merge_aria(
             @system_arguments,
             aria: { pressed: on? }

app/components/primer/alpha/toggle_switch.ts

@@ -1,6 +1,6 @@
 import {controller, target, attr} from '@github/catalyst'
 
-@controller
+@controller('toggle-switch')
 class ToggleSwitchElement extends HTMLElement {
   @target switch: HTMLElement
   @target loadingSpinner: HTMLElement

app/components/primer/alpha/tree_view/tree_view.ts

@@ -3,7 +3,7 @@ import {SelectStrategy, SelectVariant, TreeViewSubTreeNodeElement} from './tree_
 import {useRovingTabIndex} from './tree_view_roving_tab_index'
 import type {TreeViewCheckedValue, TreeViewNodeInfo, TreeViewNodeType} from '../../shared_events'
 
-@controller
+@controller('tree-view')
 export class TreeViewElement extends HTMLElement {
   @target formInputContainer: HTMLElement
   @target formInputPrototype: HTMLInputElement

app/components/primer/alpha/tree_view/tree_view_icon_pair_element.ts

@@ -1,7 +1,7 @@
 import {controller, target} from '@github/catalyst'
 import {observeMutationsUntilConditionMet} from '../../utils'
 
-@controller
+@controller('tree-view-icon-pair')
 export class TreeViewIconPairElement extends HTMLElement {
   @target expandedIcon: HTMLElement
   @target collapsedIcon: HTMLElement

app/components/primer/alpha/tree_view/tree_view_include_fragment_element.ts

@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {IncludeFragmentElement} from '@github/include-fragment-element'
 
-@controller
+@controller('tree-view-include-fragment')
 export class TreeViewIncludeFragmentElement extends IncludeFragmentElement {
   request(): Request {
     const originalRequest = super.request()

app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.ts

@@ -11,7 +11,7 @@ export type SelectStrategy = 'self' | 'descendants' | 'mixed_descendants'
 
 export type SelectVariant = 'none' | 'single' | 'multiple'
 
-@controller
+@controller('tree-view-sub-tree-node')
 export class TreeViewSubTreeNodeElement extends HTMLElement {
   @target node: HTMLElement
   @target subTree: HTMLElement
@@ -188,6 +188,12 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
       // sub-tree and no node in the entire tree can be focused
       const previousNode = this.subTree.querySelector("[tabindex='0']")
       previousNode?.setAttribute('tabindex', '-1')
+
+      // Also check if the subtree element itself is an include-fragment with role="treeitem" and has focus
+      if (this.#isIncludeFragment() && this.subTree.getAttribute('tabindex') === '0') {
+        this.subTree.setAttribute('tabindex', '-1')
+      }
+
       this.node.setAttribute('tabindex', '0')
 
       this.treeView.dispatchEvent(
@@ -279,6 +285,10 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
       // request succeeded but element has not yet been replaced
       case 'include-fragment-replace':
         this.#activeElementIsLoader = document.activeElement === this.loadingIndicator.closest('[role=treeitem]')
+        // Also check if the include-fragment itself has focus (when it has role="treeitem")
+        if (!this.#activeElementIsLoader && document.activeElement === this.subTree && this.#isIncludeFragment()) {
+          this.#activeElementIsLoader = true
+        }
         this.loadingState = 'success'
         break
 
@@ -432,6 +442,13 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
   #update() {
     if (this.expanded) {
       if (this.subTree) this.subTree.hidden = false
+      if (this.#isIncludeFragment()) {
+        this.subTree.setAttribute('role', 'treeitem')
+        // Ensure the include-fragment can participate in roving tab index
+        if (!this.subTree.hasAttribute('tabindex')) {
+          this.subTree.setAttribute('tabindex', '-1')
+        }
+      }
       this.node.setAttribute('aria-expanded', 'true')
       this.treeView?.expandAncestorsForNode(this)
 
@@ -445,6 +462,11 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
       }
     } else {
       if (this.subTree) this.subTree.hidden = true
+      if (this.#isIncludeFragment()) {
+        this.subTree.removeAttribute('role')
+        // Remove tabindex when role is removed
+        this.subTree.removeAttribute('tabindex')
+      }
       this.node.setAttribute('aria-expanded', 'false')
 
       if (this.iconPair) {
@@ -475,6 +497,10 @@ export class TreeViewSubTreeNodeElement extends HTMLElement {
     }
   }
 
+  #isIncludeFragment(): boolean {
+    return this.subTree?.getAttribute('data-target')?.includes('tree-view-sub-tree-node.includeFragment') ?? false
+  }
+
   get #checkboxElement(): HTMLElement | null {
     return this.querySelector('.TreeViewItemCheckbox')
   }

app/components/primer/alpha/x_banner.ts

@@ -6,7 +6,7 @@ declare global {
   }
 }
 
-@controller
+@controller('x-banner')
 class XBannerElement extends HTMLElement {
   @target titleText: HTMLElement