openproject-primer_view_components 0.70.5 → 0.72.0

data/app/components/primer/{open_project → alpha}/file_tree_view/directory_node.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class FileTreeView
       class DirectoryNode < TreeView::SubTreeNode
         def initialize(icon_arguments: nil, expanded_icon_arguments: nil, collapsed_icon_arguments: nil, **system_arguments)

data/app/components/primer/{open_project → alpha}/file_tree_view/file_node.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class FileTreeView
       class FileNode < TreeView::LeafNode
         def initialize(icon_arguments: {}, **system_arguments)

data/app/components/primer/{open_project → alpha}/file_tree_view.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class FileTreeView < TreeView
       def with_file(**system_arguments, &block)
         with_leaf(**system_arguments, component_klass: FileNode, &block)

data/app/components/primer/alpha/segmented_control.d.ts

@@ -1,12 +1,12 @@
-declare class SegmentedControlElement extends HTMLElement {
+export declare class SegmentedControlElement extends HTMLElement {
     #private;
     items: HTMLElement[];
     connectedCallback(): void;
     select(event: Event): void;
+    get current(): HTMLElement | null;
 }
 declare global {
     interface Window {
         SegmentedControlElement: typeof SegmentedControlElement;
     }
 }
-export {};

data/app/components/primer/alpha/segmented_control.js

@@ -27,6 +27,17 @@ let SegmentedControlElement = class SegmentedControlElement extends HTMLElement
         }
         button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected');
         button.setAttribute('aria-current', 'true');
+        this.dispatchEvent(new CustomEvent('itemActivated', {
+            bubbles: true,
+            detail: {
+                item: button,
+                checked: false,
+                value: button.querySelector('.Button-label')?.textContent,
+            },
+        }));
+    }
+    get current() {
+        return this.querySelector('[aria-current=true]');
     }
 };
 _SegmentedControlElement_instances = new WeakSet();
@@ -41,6 +52,7 @@ __decorate([
 SegmentedControlElement = __decorate([
     controller
 ], SegmentedControlElement);
+export { SegmentedControlElement };
 if (!window.customElements.get('segmented-control')) {
     window.SegmentedControlElement = SegmentedControlElement;
     window.customElements.define('segmented-control', SegmentedControlElement);

data/app/components/primer/alpha/segmented_control.ts

@@ -1,7 +1,7 @@
 import {controller, targets} from '@github/catalyst'
 
 @controller
-class SegmentedControlElement extends HTMLElement {
+export class SegmentedControlElement extends HTMLElement {
   @targets items: HTMLElement[]
 
   connectedCallback() {
@@ -17,6 +17,21 @@ class SegmentedControlElement extends HTMLElement {
 
     button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected')
     button.setAttribute('aria-current', 'true')
+
+    this.dispatchEvent(
+      new CustomEvent('itemActivated', {
+        bubbles: true,
+        detail: {
+          item: button,
+          checked: false,
+          value: button.querySelector('.Button-label')?.textContent,
+        },
+      }),
+    )
+  }
+
+  get current(): HTMLElement | null {
+    return this.querySelector('[aria-current=true]')
   }
 
   // Updates the button labels to have a data-content attribute with the text

data/app/components/primer/{open_project → alpha}/skeleton_box.css.json

@@ -1,5 +1,5 @@
 {
-  "name": "open_project/skeleton_box",
+  "name": "alpha/skeleton_box",
   "selectors": [
     ".SkeletonBox"
   ]

data/app/components/primer/{open_project → alpha}/skeleton_box.css.map

@@ -1 +1 @@
-{"version":3,"sources":["skeleton_box.pcss"],"names":[],"mappings":"AAAA,mBACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,aAKE,iBAAkB,CAFlB,qCAAsC,CACtC,uCAAwC,CAHxC,aAAc,CACd,WAiBF,CAZE,8CAPF,aAUI,iBAAkB,CAClB,qBAAsB,CACtB,kCAAmC,CAJnC,wDAAqE,CACrE,cAUJ,CANE,CAEA,8BAfF,aAgBI,uBAA8B,CAC9B,mBAEJ,CADE","file":"skeleton_box.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.SkeletonBox {\n  display: block;\n  height: 1rem;\n  background-color: var(--bgColor-muted);\n  border-radius: var(--borderRadius-small);\n  animation: shimmer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);\n    mask-size: 200%;\n    animation: shimmer;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n  }\n\n  @media (forced-colors: active) {\n    outline: 1px solid transparent;\n    outline-offset: -1px;\n  }\n}\n"]}
+{"version":3,"sources":["skeleton_box.pcss"],"names":[],"mappings":"AAAA,mBACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,aAKE,iBAAkB,CAFlB,qCAAsC,CACtC,uCAAwC,CAHxC,aAAc,CACd,WAiBF,CAZE,8CAPF,aAUI,iBAAkB,CAClB,qBAAsB,CACtB,kCAAmC,CAJnC,wDAAoE,CACpE,cAUJ,CANE,CAEA,8BAfF,aAgBI,uBAA8B,CAC9B,mBAEJ,CADE","file":"skeleton_box.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.SkeletonBox {\n  display: block;\n  height: 1rem;\n  background-color: var(--bgColor-muted);\n  border-radius: var(--borderRadius-small);\n  animation: shimmer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);\n    mask-size: 200%;\n    animation: shimmer;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n  }\n\n  @media (forced-colors: active) {\n    outline: 1px solid transparent;\n    outline-offset: -1px;\n  }\n}\n"]}

data/app/components/primer/{open_project → alpha}/skeleton_box.pcss

@@ -16,7 +16,7 @@
   animation: shimmer;
 
   @media (prefers-reduced-motion: no-preference) {
-    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+    mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);
     mask-size: 200%;
     animation: shimmer;
     animation-duration: 1s;

data/app/components/primer/{open_project → alpha}/skeleton_box.rb

@@ -1,10 +1,12 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     # A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images)
     # that are still loading. You can adjust width and height to match the content's dimensions.
     class SkeletonBox < Primer::Component
+      status :alpha
+
       # @param height [String] Any valid CSS height.
       # @param width [String] Any valid CSS width.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

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

@@ -1 +1 @@
-.Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}}
+.Stack{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.Stack[data-padding-narrow=none],.Stack[data-padding=none]{padding:0}.Stack[data-padding-narrow=condensed],.Stack[data-padding=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-narrow=normal],.Stack[data-padding=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-narrow=spacious],.Stack[data-padding=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-narrow=horizontal],.Stack[data-direction=horizontal]{flex-flow:row}.Stack[data-direction-narrow=vertical],.Stack[data-direction=vertical]{flex-flow:column}.Stack[data-gap-narrow=none],.Stack[data-gap=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-narrow=condensed],.Stack[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-narrow=normal],.Stack[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-narrow=spacious],.Stack[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-narrow=start],.Stack[data-align=start]{align-items:flex-start}.Stack[data-align-narrow=center],.Stack[data-align=center]{align-items:center}.Stack[data-align-narrow=end],.Stack[data-align=end]{align-items:flex-end}.Stack[data-align-narrow=baseline],.Stack[data-align=baseline]{align-items:baseline}.Stack[data-justify-narrow=start],.Stack[data-justify=start]{justify-content:flex-start}.Stack[data-justify-narrow=center],.Stack[data-justify=center]{justify-content:center}.Stack[data-justify-narrow=end],.Stack[data-justify=end]{justify-content:flex-end}.Stack[data-justify-narrow=space-between],.Stack[data-justify=space-between]{justify-content:space-between}.Stack[data-justify-narrow=space-evenly],.Stack[data-justify=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-narrow=wrap],.Stack[data-wrap=wrap]{flex-wrap:wrap}.Stack[data-wrap-narrow=nowrap],.Stack[data-wrap=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-narrow=reverse],.Stack[data-wrap=reverse]{flex-wrap:wrap-reverse}@media (min-width:48rem){.Stack[data-padding-regular=none]{padding:0}.Stack[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-regular=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-regular=horizontal]{flex-flow:row}.Stack[data-direction-regular=vertical]{flex-flow:column}.Stack[data-gap-regular=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-regular=start]{align-items:flex-start}.Stack[data-align-regular=center]{align-items:center}.Stack[data-align-regular=end]{align-items:flex-end}.Stack[data-align-regular=baseline]{align-items:baseline}.Stack[data-justify-regular=start]{justify-content:flex-start}.Stack[data-justify-regular=center]{justify-content:center}.Stack[data-justify-regular=end]{justify-content:flex-end}.Stack[data-justify-regular=space-between]{justify-content:space-between}.Stack[data-justify-regular=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-regular=wrap]{flex-wrap:wrap}.Stack[data-wrap-regular=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-regular=reverse]{flex-wrap:wrap-reverse}}@media (min-width:87.5rem){.Stack[data-padding-wide=none]{padding:0}.Stack[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,8px)}.Stack[data-padding-wide=normal]{padding:var(--stack-padding-normal,16px)}.Stack[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,24px)}.Stack[data-direction-wide=horizontal]{flex-flow:row}.Stack[data-direction-wide=vertical]{flex-flow:column}.Stack[data-gap-wide=none]{--stack-gap:var(--stack-gap-none,0)}.Stack[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.Stack[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.Stack[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.Stack[data-align-wide=start]{align-items:flex-start}.Stack[data-align-wide=center]{align-items:center}.Stack[data-align-wide=end]{align-items:flex-end}.Stack[data-align-wide=baseline]{align-items:baseline}.Stack[data-justify-wide=start]{justify-content:flex-start}.Stack[data-justify-wide=center]{justify-content:center}.Stack[data-justify-wide=end]{justify-content:flex-end}.Stack[data-justify-wide=space-between]{justify-content:space-between}.Stack[data-justify-wide=space-evenly]{justify-content:space-evenly}.Stack[data-wrap-wide=wrap]{flex-wrap:wrap}.Stack[data-wrap-wide=nowrap]{flex-wrap:nowrap}.Stack[data-wrap-wide=reverse]{flex-wrap:wrap-reverse}}

data/app/components/primer/alpha/stack.css.json

@@ -44,6 +44,8 @@
     ".Stack[data-wrap=wrap]",
     ".Stack[data-wrap-narrow=nowrap]",
     ".Stack[data-wrap=nowrap]",
+    ".Stack[data-wrap-narrow=reverse]",
+    ".Stack[data-wrap=reverse]",
     ".Stack[data-padding-regular=none]",
     ".Stack[data-padding-regular=condensed]",
     ".Stack[data-padding-regular=normal]",
@@ -65,6 +67,7 @@
     ".Stack[data-justify-regular=space-evenly]",
     ".Stack[data-wrap-regular=wrap]",
     ".Stack[data-wrap-regular=nowrap]",
+    ".Stack[data-wrap-regular=reverse]",
     ".Stack[data-padding-wide=none]",
     ".Stack[data-padding-wide=condensed]",
     ".Stack[data-padding-wide=normal]",
@@ -85,6 +88,7 @@
     ".Stack[data-justify-wide=space-between]",
     ".Stack[data-justify-wide=space-evenly]",
     ".Stack[data-wrap-wide=wrap]",
-    ".Stack[data-wrap-wide=nowrap]"
+    ".Stack[data-wrap-wide=nowrap]",
+    ".Stack[data-wrap-wide=reverse]"
   ]
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["stack.pcss"],"names":[],"mappings":"AAAA,OAIE,wBAAyB,CADzB,mBAAoB,CAFpB,YAAa,CACb,gBAAiB,CAGjB,iDAmSF,CA/RE,2DAEE,SACF,CAEA,qEAGE,0CACF,CAEA,+DAGE,wCACF,CAEA,mEAGE,0CACF,CAEA,2EAEE,aACF,CAEA,uEAEE,gBACF,CAEA,mDAEE,mCACF,CAEA,6DAEE,6CACF,CAEA,uDAEE,wCACF,CAEA,2DAEE,4CACF,CAEA,yDAEE,sBACF,CAEA,2DAEE,kBACF,CAEA,qDAEE,oBACF,CAEA,+DAEE,oBACF,CAEA,6DAEE,0BACF,CAEA,+DAEE,sBACF,CAEA,yDAEE,wBACF,CAEA,6EAEE,6BACF,CAEA,2EAEE,4BACF,CAEA,qDAEE,cACF,CAEA,yDAEE,gBACF,CAGA,yBACE,kCACE,SACF,CAEA,uCAEE,0CACF,CAEA,oCAEE,wCACF,CAEA,sCAEE,0CACF,CAEA,0CACE,aACF,CAEA,wCACE,gBACF,CAEA,8BACE,mCACF,CAEA,mCACE,6CACF,CAEA,gCACE,wCACF,CAEA,kCACE,4CACF,CAEA,iCACE,sBACF,CAEA,kCACE,kBACF,CAEA,+BACE,oBACF,CAEA,oCACE,oBACF,CAEA,mCACE,0BACF,CAEA,oCACE,sBACF,CAEA,iCACE,wBACF,CAEA,2CACE,6BACF,CAEA,0CACE,4BACF,CAEA,+BACE,cACF,CAEA,iCACE,gBACF,CACF,CAGA,2BACE,+BACE,SACF,CAEA,oCAEE,0CACF,CAEA,iCAEE,wCACF,CAEA,mCAEE,0CACF,CAEA,uCACE,aACF,CAEA,qCACE,gBACF,CAEA,2BACE,mCACF,CAEA,gCACE,6CACF,CAEA,6BACE,wCACF,CAEA,+BACE,4CACF,CAEA,8BACE,sBACF,CAEA,+BACE,kBACF,CAEA,4BACE,oBACF,CAEA,iCACE,oBACF,CAEA,gCACE,0BACF,CAEA,iCACE,sBACF,CAEA,8BACE,wBACF,CAEA,wCACE,6BACF,CAEA,uCACE,4BACF,CAEA,4BACE,cACF,CAEA,8BACE,gBACF,CACF","file":"stack.css","sourcesContent":[".Stack {\n  display: flex;\n  flex-flow: column;\n  align-items: stretch;\n  align-content: flex-start;\n  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));\n\n  /* non-responsive values */\n\n  &[data-padding='none'],\n  &[data-padding-narrow='none'] {\n    padding: 0;\n  }\n\n  &[data-padding='condensed'],\n  &[data-padding-narrow='condensed'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-condensed, 8px);\n  }\n\n  &[data-padding='normal'],\n  &[data-padding-narrow='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-normal, 16px);\n  }\n\n  &[data-padding='spacious'],\n  &[data-padding-narrow='spacious'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-spacious, 24px);\n  }\n\n  &[data-direction='horizontal'],\n  &[data-direction-narrow='horizontal'] {\n    flex-flow: row;\n  }\n\n  &[data-direction='vertical'],\n  &[data-direction-narrow='vertical'] {\n    flex-flow: column;\n  }\n\n  &[data-gap='none'],\n  &[data-gap-narrow='none'] {\n    --stack-gap: var(--stack-gap-none, 0);\n  }\n\n  &[data-gap='condensed'],\n  &[data-gap-narrow='condensed'] {\n    --stack-gap: var(--stack-gap-condensed, 0.5rem);\n  }\n\n  &[data-gap='normal'],\n  &[data-gap-narrow='normal'] {\n    --stack-gap: var(--stack-gap-normal, 1rem);\n  }\n\n  &[data-gap='spacious'],\n  &[data-gap-narrow='spacious'] {\n    --stack-gap: var(--stack-gap-spacious, 1.5rem);\n  }\n\n  &[data-align='start'],\n  &[data-align-narrow='start'] {\n    align-items: flex-start;\n  }\n\n  &[data-align='center'],\n  &[data-align-narrow='center'] {\n    align-items: center;\n  }\n\n  &[data-align='end'],\n  &[data-align-narrow='end'] {\n    align-items: flex-end;\n  }\n\n  &[data-align='baseline'],\n  &[data-align-narrow='baseline'] {\n    align-items: baseline;\n  }\n\n  &[data-justify='start'],\n  &[data-justify-narrow='start'] {\n    justify-content: flex-start;\n  }\n\n  &[data-justify='center'],\n  &[data-justify-narrow='center'] {\n    justify-content: center;\n  }\n\n  &[data-justify='end'],\n  &[data-justify-narrow='end'] {\n    justify-content: flex-end;\n  }\n\n  &[data-justify='space-between'],\n  &[data-justify-narrow='space-between'] {\n    justify-content: space-between;\n  }\n\n  &[data-justify='space-evenly'],\n  &[data-justify-narrow='space-evenly'] {\n    justify-content: space-evenly;\n  }\n\n  &[data-wrap='wrap'],\n  &[data-wrap-narrow='wrap'] {\n    flex-wrap: wrap;\n  }\n\n  &[data-wrap='nowrap'],\n  &[data-wrap-narrow='nowrap'] {\n    flex-wrap: nowrap;\n  }\n\n  /* @custom-media --veiwportRange-regular */\n  @media (min-width: 48rem) {\n    &[data-padding-regular='none'] {\n      padding: 0;\n    }\n\n    &[data-padding-regular='condensed'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-condensed, 8px);\n    }\n\n    &[data-padding-regular='normal'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-normal, 16px);\n    }\n\n    &[data-padding-regular='spacious'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-spacious, 24px);\n    }\n\n    &[data-direction-regular='horizontal'] {\n      flex-flow: row;\n    }\n\n    &[data-direction-regular='vertical'] {\n      flex-flow: column;\n    }\n\n    &[data-gap-regular='none'] {\n      --stack-gap: var(--stack-gap-none, 0);\n    }\n\n    &[data-gap-regular='condensed'] {\n      --stack-gap: var(--stack-gap-condensed, 0.5rem);\n    }\n\n    &[data-gap-regular='normal'] {\n      --stack-gap: var(--stack-gap-normal, 1rem);\n    }\n\n    &[data-gap-regular='spacious'] {\n      --stack-gap: var(--stack-gap-spacious, 1.5rem);\n    }\n\n    &[data-align-regular='start'] {\n      align-items: flex-start;\n    }\n\n    &[data-align-regular='center'] {\n      align-items: center;\n    }\n\n    &[data-align-regular='end'] {\n      align-items: flex-end;\n    }\n\n    &[data-align-regular='baseline'] {\n      align-items: baseline;\n    }\n\n    &[data-justify-regular='start'] {\n      justify-content: flex-start;\n    }\n\n    &[data-justify-regular='center'] {\n      justify-content: center;\n    }\n\n    &[data-justify-regular='end'] {\n      justify-content: flex-end;\n    }\n\n    &[data-justify-regular='space-between'] {\n      justify-content: space-between;\n    }\n\n    &[data-justify-regular='space-evenly'] {\n      justify-content: space-evenly;\n    }\n\n    &[data-wrap-regular='wrap'] {\n      flex-wrap: wrap;\n    }\n\n    &[data-wrap-regular='nowrap'] {\n      flex-wrap: nowrap;\n    }\n  }\n\n  /* @custom-media --viewportRange-wide */\n  @media (min-width: 87.5rem) {\n    &[data-padding-wide='none'] {\n      padding: 0;\n    }\n\n    &[data-padding-wide='condensed'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-condensed, 8px);\n    }\n\n    &[data-padding-wide='normal'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-normal, 16px);\n    }\n\n    &[data-padding-wide='spacious'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-spacious, 24px);\n    }\n\n    &[data-direction-wide='horizontal'] {\n      flex-flow: row;\n    }\n\n    &[data-direction-wide='vertical'] {\n      flex-flow: column;\n    }\n\n    &[data-gap-wide='none'] {\n      --stack-gap: var(--stack-gap-none, 0);\n    }\n\n    &[data-gap-wide='condensed'] {\n      --stack-gap: var(--stack-gap-condensed, 0.5rem);\n    }\n\n    &[data-gap-wide='normal'] {\n      --stack-gap: var(--stack-gap-normal, 1rem);\n    }\n\n    &[data-gap-wide='spacious'] {\n      --stack-gap: var(--stack-gap-spacious, 1.5rem);\n    }\n\n    &[data-align-wide='start'] {\n      align-items: flex-start;\n    }\n\n    &[data-align-wide='center'] {\n      align-items: center;\n    }\n\n    &[data-align-wide='end'] {\n      align-items: flex-end;\n    }\n\n    &[data-align-wide='baseline'] {\n      align-items: baseline;\n    }\n\n    &[data-justify-wide='start'] {\n      justify-content: flex-start;\n    }\n\n    &[data-justify-wide='center'] {\n      justify-content: center;\n    }\n\n    &[data-justify-wide='end'] {\n      justify-content: flex-end;\n    }\n\n    &[data-justify-wide='space-between'] {\n      justify-content: space-between;\n    }\n\n    &[data-justify-wide='space-evenly'] {\n      justify-content: space-evenly;\n    }\n\n    &[data-wrap-wide='wrap'] {\n      flex-wrap: wrap;\n    }\n\n    &[data-wrap-wide='nowrap'] {\n      flex-wrap: nowrap;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["stack.pcss"],"names":[],"mappings":"AAAA,OAIE,wBAAyB,CADzB,mBAAoB,CAFpB,YAAa,CACb,gBAAiB,CAGjB,iDAgTF,CA5SE,2DAEE,SACF,CAEA,qEAGE,0CACF,CAEA,+DAGE,wCACF,CAEA,mEAGE,0CACF,CAEA,2EAEE,aACF,CAEA,uEAEE,gBACF,CAEA,mDAEE,mCACF,CAEA,6DAEE,6CACF,CAEA,uDAEE,wCACF,CAEA,2DAEE,4CACF,CAEA,yDAEE,sBACF,CAEA,2DAEE,kBACF,CAEA,qDAEE,oBACF,CAEA,+DAEE,oBACF,CAEA,6DAEE,0BACF,CAEA,+DAEE,sBACF,CAEA,yDAEE,wBACF,CAEA,6EAEE,6BACF,CAEA,2EAEE,4BACF,CAEA,qDAEE,cACF,CAEA,yDAEE,gBACF,CAEA,2DAEE,sBACF,CAGA,yBACE,kCACE,SACF,CAEA,uCAEE,0CACF,CAEA,oCAEE,wCACF,CAEA,sCAEE,0CACF,CAEA,0CACE,aACF,CAEA,wCACE,gBACF,CAEA,8BACE,mCACF,CAEA,mCACE,6CACF,CAEA,gCACE,wCACF,CAEA,kCACE,4CACF,CAEA,iCACE,sBACF,CAEA,kCACE,kBACF,CAEA,+BACE,oBACF,CAEA,oCACE,oBACF,CAEA,mCACE,0BACF,CAEA,oCACE,sBACF,CAEA,iCACE,wBACF,CAEA,2CACE,6BACF,CAEA,0CACE,4BACF,CAEA,+BACE,cACF,CAEA,iCACE,gBACF,CAEA,kCACE,sBACF,CACF,CAGA,2BACE,+BACE,SACF,CAEA,oCAEE,0CACF,CAEA,iCAEE,wCACF,CAEA,mCAEE,0CACF,CAEA,uCACE,aACF,CAEA,qCACE,gBACF,CAEA,2BACE,mCACF,CAEA,gCACE,6CACF,CAEA,6BACE,wCACF,CAEA,+BACE,4CACF,CAEA,8BACE,sBACF,CAEA,+BACE,kBACF,CAEA,4BACE,oBACF,CAEA,iCACE,oBACF,CAEA,gCACE,0BACF,CAEA,iCACE,sBACF,CAEA,8BACE,wBACF,CAEA,wCACE,6BACF,CAEA,uCACE,4BACF,CAEA,4BACE,cACF,CAEA,8BACE,gBACF,CAEA,+BACE,sBACF,CACF","file":"stack.css","sourcesContent":[".Stack {\n  display: flex;\n  flex-flow: column;\n  align-items: stretch;\n  align-content: flex-start;\n  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));\n\n  /* non-responsive values */\n\n  &[data-padding='none'],\n  &[data-padding-narrow='none'] {\n    padding: 0;\n  }\n\n  &[data-padding='condensed'],\n  &[data-padding-narrow='condensed'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-condensed, 8px);\n  }\n\n  &[data-padding='normal'],\n  &[data-padding-narrow='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-normal, 16px);\n  }\n\n  &[data-padding='spacious'],\n  &[data-padding-narrow='spacious'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-spacious, 24px);\n  }\n\n  &[data-direction='horizontal'],\n  &[data-direction-narrow='horizontal'] {\n    flex-flow: row;\n  }\n\n  &[data-direction='vertical'],\n  &[data-direction-narrow='vertical'] {\n    flex-flow: column;\n  }\n\n  &[data-gap='none'],\n  &[data-gap-narrow='none'] {\n    --stack-gap: var(--stack-gap-none, 0);\n  }\n\n  &[data-gap='condensed'],\n  &[data-gap-narrow='condensed'] {\n    --stack-gap: var(--stack-gap-condensed, 0.5rem);\n  }\n\n  &[data-gap='normal'],\n  &[data-gap-narrow='normal'] {\n    --stack-gap: var(--stack-gap-normal, 1rem);\n  }\n\n  &[data-gap='spacious'],\n  &[data-gap-narrow='spacious'] {\n    --stack-gap: var(--stack-gap-spacious, 1.5rem);\n  }\n\n  &[data-align='start'],\n  &[data-align-narrow='start'] {\n    align-items: flex-start;\n  }\n\n  &[data-align='center'],\n  &[data-align-narrow='center'] {\n    align-items: center;\n  }\n\n  &[data-align='end'],\n  &[data-align-narrow='end'] {\n    align-items: flex-end;\n  }\n\n  &[data-align='baseline'],\n  &[data-align-narrow='baseline'] {\n    align-items: baseline;\n  }\n\n  &[data-justify='start'],\n  &[data-justify-narrow='start'] {\n    justify-content: flex-start;\n  }\n\n  &[data-justify='center'],\n  &[data-justify-narrow='center'] {\n    justify-content: center;\n  }\n\n  &[data-justify='end'],\n  &[data-justify-narrow='end'] {\n    justify-content: flex-end;\n  }\n\n  &[data-justify='space-between'],\n  &[data-justify-narrow='space-between'] {\n    justify-content: space-between;\n  }\n\n  &[data-justify='space-evenly'],\n  &[data-justify-narrow='space-evenly'] {\n    justify-content: space-evenly;\n  }\n\n  &[data-wrap='wrap'],\n  &[data-wrap-narrow='wrap'] {\n    flex-wrap: wrap;\n  }\n\n  &[data-wrap='nowrap'],\n  &[data-wrap-narrow='nowrap'] {\n    flex-wrap: nowrap;\n  }\n\n  &[data-wrap='reverse'],\n  &[data-wrap-narrow='reverse'] {\n    flex-wrap: wrap-reverse;\n  }\n\n  /* @custom-media --veiwportRange-regular */\n  @media (min-width: 48rem) {\n    &[data-padding-regular='none'] {\n      padding: 0;\n    }\n\n    &[data-padding-regular='condensed'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-condensed, 8px);\n    }\n\n    &[data-padding-regular='normal'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-normal, 16px);\n    }\n\n    &[data-padding-regular='spacious'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-spacious, 24px);\n    }\n\n    &[data-direction-regular='horizontal'] {\n      flex-flow: row;\n    }\n\n    &[data-direction-regular='vertical'] {\n      flex-flow: column;\n    }\n\n    &[data-gap-regular='none'] {\n      --stack-gap: var(--stack-gap-none, 0);\n    }\n\n    &[data-gap-regular='condensed'] {\n      --stack-gap: var(--stack-gap-condensed, 0.5rem);\n    }\n\n    &[data-gap-regular='normal'] {\n      --stack-gap: var(--stack-gap-normal, 1rem);\n    }\n\n    &[data-gap-regular='spacious'] {\n      --stack-gap: var(--stack-gap-spacious, 1.5rem);\n    }\n\n    &[data-align-regular='start'] {\n      align-items: flex-start;\n    }\n\n    &[data-align-regular='center'] {\n      align-items: center;\n    }\n\n    &[data-align-regular='end'] {\n      align-items: flex-end;\n    }\n\n    &[data-align-regular='baseline'] {\n      align-items: baseline;\n    }\n\n    &[data-justify-regular='start'] {\n      justify-content: flex-start;\n    }\n\n    &[data-justify-regular='center'] {\n      justify-content: center;\n    }\n\n    &[data-justify-regular='end'] {\n      justify-content: flex-end;\n    }\n\n    &[data-justify-regular='space-between'] {\n      justify-content: space-between;\n    }\n\n    &[data-justify-regular='space-evenly'] {\n      justify-content: space-evenly;\n    }\n\n    &[data-wrap-regular='wrap'] {\n      flex-wrap: wrap;\n    }\n\n    &[data-wrap-regular='nowrap'] {\n      flex-wrap: nowrap;\n    }\n\n    &[data-wrap-regular='reverse'] {\n      flex-wrap: wrap-reverse;\n    }\n  }\n\n  /* @custom-media --viewportRange-wide */\n  @media (min-width: 87.5rem) {\n    &[data-padding-wide='none'] {\n      padding: 0;\n    }\n\n    &[data-padding-wide='condensed'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-condensed, 8px);\n    }\n\n    &[data-padding-wide='normal'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-normal, 16px);\n    }\n\n    &[data-padding-wide='spacious'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-spacious, 24px);\n    }\n\n    &[data-direction-wide='horizontal'] {\n      flex-flow: row;\n    }\n\n    &[data-direction-wide='vertical'] {\n      flex-flow: column;\n    }\n\n    &[data-gap-wide='none'] {\n      --stack-gap: var(--stack-gap-none, 0);\n    }\n\n    &[data-gap-wide='condensed'] {\n      --stack-gap: var(--stack-gap-condensed, 0.5rem);\n    }\n\n    &[data-gap-wide='normal'] {\n      --stack-gap: var(--stack-gap-normal, 1rem);\n    }\n\n    &[data-gap-wide='spacious'] {\n      --stack-gap: var(--stack-gap-spacious, 1.5rem);\n    }\n\n    &[data-align-wide='start'] {\n      align-items: flex-start;\n    }\n\n    &[data-align-wide='center'] {\n      align-items: center;\n    }\n\n    &[data-align-wide='end'] {\n      align-items: flex-end;\n    }\n\n    &[data-align-wide='baseline'] {\n      align-items: baseline;\n    }\n\n    &[data-justify-wide='start'] {\n      justify-content: flex-start;\n    }\n\n    &[data-justify-wide='center'] {\n      justify-content: center;\n    }\n\n    &[data-justify-wide='end'] {\n      justify-content: flex-end;\n    }\n\n    &[data-justify-wide='space-between'] {\n      justify-content: space-between;\n    }\n\n    &[data-justify-wide='space-evenly'] {\n      justify-content: space-evenly;\n    }\n\n    &[data-wrap-wide='wrap'] {\n      flex-wrap: wrap;\n    }\n\n    &[data-wrap-wide='nowrap'] {\n      flex-wrap: nowrap;\n    }\n\n    &[data-wrap-wide='reverse'] {\n      flex-wrap: wrap-reverse;\n    }\n  }\n}\n"]}

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

@@ -115,6 +115,11 @@
     flex-wrap: nowrap;
   }
 
+  &[data-wrap='reverse'],
+  &[data-wrap-narrow='reverse'] {
+    flex-wrap: wrap-reverse;
+  }
+
   /* @custom-media --veiwportRange-regular */
   @media (min-width: 48rem) {
     &[data-padding-regular='none'] {
@@ -203,6 +208,10 @@
     &[data-wrap-regular='nowrap'] {
       flex-wrap: nowrap;
     }
+
+    &[data-wrap-regular='reverse'] {
+      flex-wrap: wrap-reverse;
+    }
   }
 
   /* @custom-media --viewportRange-wide */
@@ -293,5 +302,9 @@
     &[data-wrap-wide='nowrap'] {
       flex-wrap: nowrap;
     }
+
+    &[data-wrap-wide='reverse'] {
+      flex-wrap: wrap-reverse;
+    }
   }
 }

data/app/components/primer/alpha/stack.rb

@@ -78,7 +78,8 @@ module Primer
         OPTIONS = [
           nil,
           DEFAULT,
-          :wrap
+          :wrap,
+          :reverse
         ].freeze
 
         def initialize(values)

data/app/components/primer/{open_project → alpha}/tree_view/icon.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # An icon for a `TreeView` node.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class Icon < Primer::Component
         # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.

data/app/components/primer/{open_project → alpha}/tree_view/icon_pair.rb

@@ -1,24 +1,24 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # A pair of icons for a `TreeView` sub-tree that displays distinct icons when the sub-tree is
       # expanded and collapsed.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class IconPair < Primer::Component
         # The expanded icon.
         #
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
         renders_one :expanded_icon, lambda { |**system_arguments|
           Icon.new(**system_arguments)
         }
 
         # The collapsed icon.
         #
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
         renders_one :collapsed_icon, lambda { |**system_arguments|
           Icon.new(**system_arguments)
         }

data/app/components/primer/{open_project → alpha}/tree_view/leading_action.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # The leading action for `TreeView` nodes.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class LeadingAction < Primer::Component
         # @param action [ViewComponent::Base] A component or other renderable to use as the action button etc.

data/app/components/primer/{open_project → alpha}/tree_view/leaf_node.rb

@@ -1,18 +1,18 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # A `TreeView` leaf node.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class LeafNode < Primer::Component
         # @!parse
         #   # Adds a leading visual icon rendered to the left of the node's label.
         #   #
         #   # @param label [String] A label describing the visual, displayed only to screen readers.
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
         #   def with_leading_visual_icon(label: nil, **system_arguments, &block)
         #   end
 
@@ -52,7 +52,7 @@ module Primer
         #   # Adds a trailing visual icon rendered to the right of the node's label.
         #   #
         #   # @param label [String] A label describing the visual, displayed only to screen readers.
-        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Icon) %>.
         #   def with_trailing_visual_icon(label: nil, **system_arguments, &block)
         #   end
 
@@ -69,7 +69,7 @@ module Primer
         delegate :current?, :merge_system_arguments!, to: :@node
 
         # @param label [String] The node's label, i.e. it's textual content.
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Node) %>.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::Node) %>.
         def initialize(label:, **system_arguments)
           @label = label
           @system_arguments = system_arguments
@@ -78,7 +78,7 @@ module Primer
             data: { "node-type": "leaf" }
           )
 
-          @node = Primer::OpenProject::TreeView::Node.new(**@system_arguments)
+          @node = Primer::Alpha::TreeView::Node.new(**@system_arguments)
         end
 
         private

data/app/components/primer/{open_project → alpha}/tree_view/loading_failure_message.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # A `TreeView` loading failure message.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class LoadingFailureMessage < Primer::Component
         DEFAULT_TEXT = "Something went wrong"

data/app/components/primer/{open_project → alpha}/tree_view/node.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # A generic `TreeView` node.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class Node < Primer::Component
-        DEFAULT_NODE_VARIANT = Primer::OpenProject::TreeView::DEFAULT_NODE_VARIANT
+        DEFAULT_NODE_VARIANT = Primer::Alpha::TreeView::DEFAULT_NODE_VARIANT
         NODE_VARIANT_TAG_MAP = { DEFAULT_NODE_VARIANT => :div, :button => :button, :anchor => :a }.freeze
         NODE_VARIANT_TAG_OPTIONS = NODE_VARIANT_TAG_MAP.keys.freeze
 
@@ -48,6 +48,12 @@ module Primer
         # @return [Symbol]
         attr_reader :node_variant
 
+        # Whether or not this node is disabled, i.e. cannot be activated.
+        #
+        # @return [Boolean]
+        attr_reader :disabled
+        alias disabled? disabled
+
         DEFAULT_SELECT_VARIANT = :none
         SELECT_VARIANT_OPTIONS = [
           :multiple,
@@ -62,11 +68,13 @@ module Primer
         ]
 
         # @param path [Array<String>] The node's "path," i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path.
-        # @param node_variant [Symbol] The node variant to use for the node's content, i.e. the `:button` or `:div`. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
+        # @param node_variant [Symbol] The node variant to use for the node's content, i.e. the `:button` or `:div`. <%= one_of(Primer::Alpha::TreeView::NODE_VARIANT_OPTIONS) %>
         # @param href [String] The URL to use as the `href` attribute for this node. If set to a truthy value, the `tag:` parameter is ignored and assumed to be `:a`.
         # @param current [Boolean] Whether or not this node is the current node. The current node is styled differently than regular nodes and is the first element that receives focus when tabbing to the `TreeView` component.
-        # @param select_variant [Symbol] Controls the type of checkbox that appears. <%= one_of(Primer::OpenProject::TreeView::Node::SELECT_VARIANT_OPTIONS) %>
-        # @param checked [Boolean | String] The checked state of the node's checkbox. <%= one_of(Primer::OpenProject::TreeView::Node::CHECKED_STATES) %>
+        # @param select_variant [Symbol] Controls the type of checkbox that appears. <%= one_of(Primer::Alpha::TreeView::Node::SELECT_VARIANT_OPTIONS) %>
+        # @param checked [Boolean | String] The checked state of the node's checkbox. <%= one_of(Primer::Alpha::TreeView::Node::CHECKED_STATES) %>
+        # @param disabled [Boolean] Whether or not the node can be activated. Passing `false` here will cause the node to appear visually disabled but it is still keyboard-focusable.
+        # @param value [String] If this node is checked, this value will be sent to the server on form submission.
         # @param content_arguments [Hash] Arguments attached to the node's content, i.e the `<button>` or `<a>` element. <%= link_to_system_arguments_docs %>
         def initialize(
           path:,
@@ -75,6 +83,8 @@ module Primer
           current: false,
           select_variant: DEFAULT_SELECT_VARIANT,
           checked: DEFAULT_CHECKED_STATE,
+          disabled: false,
+          value: nil,
           **content_arguments
         )
           @system_arguments = {
@@ -89,6 +99,7 @@ module Primer
           @current = current
           @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
           @checked = fetch_or_fallback(CHECKED_STATES, checked, DEFAULT_CHECKED_STATE)
+          @disabled = disabled
           @node_variant = fetch_or_fallback(NODE_VARIANT_TAG_OPTIONS, node_variant, DEFAULT_NODE_VARIANT)
 
           @content_arguments[:tag] = NODE_VARIANT_TAG_MAP[@node_variant]
@@ -103,18 +114,23 @@ module Primer
 
           @content_arguments[:aria] = merge_aria(
             @content_arguments, {
-              aria: {
-                level: level,
-                selected: false,
-                checked: checked,
-                labelledby: content_id
-              }
+            aria: {
+              level: level,
+              selected: false,
+              checked: checked,
+              labelledby: content_id,
+              disabled: disabled?
             }
+          }
           )
 
           @content_arguments[:data] = merge_data(
-            @content_arguments,
-            { data: { path: @path.to_json } }
+            @content_arguments, {
+            data: {
+              value: value,
+              path: @path.to_json
+            }
+          }
           )
 
           return unless current?

data/app/components/primer/{open_project → alpha}/tree_view/skeleton_loader.html.erb

@@ -4,13 +4,13 @@
 
 <%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: @container.path.to_json }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
   <%= render(@container) do %>
-    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :loader], node_variant: :div)) do |node| %>
+    <%= render(Primer::Alpha::TreeView::Node.new(path: [*@container.path, :loader], node_variant: :div)) do |node| %>
       <% node.with_text_content do %>
         <div data-target="tree-view-sub-tree-node.loadingIndicator">
           <% @count.times do %>
             <span class="TreeViewSkeletonItemContainerStyle TreeViewItemSkeleton">
-              <%= render(Primer::OpenProject::SkeletonBox.new(width: "16px")) %>
-              <%= render(Primer::OpenProject::SkeletonBox.new(width: "100%", classes: "TreeItemSkeletonTextStyles")) %>
+              <%= render(Primer::Alpha::SkeletonBox.new(width: "16px")) %>
+              <%= render(Primer::Alpha::SkeletonBox.new(width: "100%", classes: "TreeItemSkeletonTextStyles")) %>
             </span>
           <% end %>
         </div>

data/app/components/primer/{open_project → alpha}/tree_view/skeleton_loader.rb

@@ -1,16 +1,16 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # Renders a loading skeleton for a `TreeView` sub-tree node.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class SkeletonLoader < Primer::Component
         # The failure message that appears if loading nodes from the server fails.
         #
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::LoadingFailureMessage) %>.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::LoadingFailureMessage) %>.
         renders_one :loading_failure_message, lambda { |**system_arguments|
           system_arguments[:retry_button_arguments] ||= {}
           system_arguments[:retry_button_arguments][:data] = merge_data(
@@ -23,7 +23,7 @@ module Primer
 
         # @param src [String] The URL to fetch nodes from.
         # @param count [Integer] The number of skeleton nodes to render.
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::SubTreeContainer) %>.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::SubTreeContainer) %>.
         def initialize(src:, count: 3, **system_arguments)
           @src = src
           @count = count

data/app/components/primer/{open_project → alpha}/tree_view/spinner_loader.html.erb

@@ -4,14 +4,14 @@
 
 <%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: @container.path.to_json }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
   <%= render(@container) do %>
-    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :loader], data: { target: "tree-view-sub-tree-node.loadingIndicator" }, node_variant: :div)) do |node| %>
+    <%= render(Primer::Alpha::TreeView::Node.new(path: [*@container.path, :loader], data: { target: "tree-view-sub-tree-node.loadingIndicator" }, node_variant: :div)) do |node| %>
       <% node.with_text_content { "Loading..." } %>
       <% node.with_leading_visual do %>
         <%= render(Primer::Beta::Spinner.new(size: :small, wrapper_arguments: { classes: "TreeViewItemVisual" })) %>
       <% end %>
     <% end %>
 
-    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :failure_msg], data: { target: "tree-view-sub-tree-node.loadingFailureMessage" }, hidden: true, node_variant: :div)) do |node| %>
+    <%= render(Primer::Alpha::TreeView::Node.new(path: [*@container.path, :failure_msg], data: { target: "tree-view-sub-tree-node.loadingFailureMessage" }, hidden: true, node_variant: :div)) do |node| %>
       <% node.with_text_content do %>
         <%= loading_failure_message %>
       <% end %>

data/app/components/primer/{open_project → alpha}/tree_view/spinner_loader.rb

@@ -1,16 +1,16 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     class TreeView
       # Renders a loading spinner for a `TreeView` sub-tree node.
       #
-      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # This component is part of the <%= link_to_component(Primer::Alpha::TreeView) %> component and should
       # not be used directly.
       class SpinnerLoader < Primer::Component
         # The failure message that appears if loading nodes from the server fails.
         #
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::LoadingFailureMessage) %>.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::LoadingFailureMessage) %>.
         renders_one :loading_failure_message, lambda { |**system_arguments|
           system_arguments[:retry_button_arguments] ||= {}
           system_arguments[:retry_button_arguments][:data] = merge_data(
@@ -22,7 +22,7 @@ module Primer
         }
 
         # @param src [String] The URL to fetch nodes from.
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::SubTreeContainer) %>.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::TreeView::SubTreeContainer) %>.
         def initialize(src:, **system_arguments)
           @src = src
           @container = SubTreeContainer.new(**system_arguments, expanded: true)

data/app/components/primer/{open_project → alpha}/tree_view/sub_tree.html.erb

@@ -7,7 +7,7 @@
 
   <%= render(@container) do %>
     <% if nodes.empty? %>
-      <%= render(Primer::OpenProject::TreeView::Node.new(path: path, data: { "no-items": true }, node_variant: :div)) do |node| %>
+      <%= render(Primer::Alpha::TreeView::Node.new(path: path, data: { "no-items": true }, node_variant: :div)) do |node| %>
         <% node.with_text_content do %>
           <%= no_items_message %>
         <% end %>