openproject-primer_view_components 0.71.0 → 0.72.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["tree_view.pcss"],"names":[],"mappings":"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","file":"tree_view.css","sourcesContent":["/* stylelint-disable selector-max-type -- Copied from primer/react */\n\n.TreeViewRootUlStyles {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  /*\n   * WARNING: This is a performance optimization.\n   *\n   * We define styles for the tree items at the root level of the tree\n   * to avoid recomputing the styles for each item when the tree updates.\n   * We're sacrificing maintainability for performance because TreeView\n   * needs to be performant enough to handle large trees (thousands of items).\n   *\n   * This is intended to be a temporary solution until we can improve the\n   * performance of our styling patterns.\n   *\n   * Do NOT copy this pattern without understanding the tradeoffs.\n   */\n  & .TreeViewItem {\n    outline: none;\n\n    &:focus-visible > div {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n      @media (forced-colors: active) {\n        outline: 2px solid HighlightText;\n        /* stylelint-disable-next-line declaration-property-value-no-unknown -- Copied from primer/react */\n        outline-offset: -2;\n      }\n    }\n\n    &[data-has-leading-action] {\n      --has-leading-action: 1;\n    }\n  }\n\n  & .TreeViewItemContainer {\n    --level: 1;\n    --toggle-width: 1rem;\n    --min-item-height: 2rem;\n\n    position: relative;\n    display: grid;\n    width: 100%;\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-default);\n    border-radius: var(--borderRadius-medium);\n    grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n    grid-template-areas: 'spacer leadingAction toggle content';\n\n    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n    &:hover {\n      background-color: var(--control-transparent-bgColor-hover);\n\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n      }\n    }\n\n    @media (pointer: coarse) {\n      --toggle-width: 1.5rem;\n      --min-item-height: 2.75rem;\n    }\n\n    &:has(.TreeViewFailureMessage):hover {\n      cursor: default;\n      background-color: transparent;\n\n      @media (forced-colors: active) {\n        outline: none;\n      }\n    }\n\n    &:has([role='treeitem']:focus-visible) {\n      box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n    }\n  }\n\n  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr;\n  }\n\n  /* stylelint-disable-next-line selector-max-specificity */\n  & .TreeViewItem > .TreeViewItemContainer:has(.TreeViewItemContent[aria-current='true']) {\n    background-color: var(--control-transparent-bgColor-selected);\n\n    /* Current item indicator */\n    /* stylelint-disable-next-line selector-max-specificity -- Copied from primer/react */\n    &::after {\n      position: absolute;\n      top: calc(50% - var(--base-size-12));\n      left: calc(-1 * var(--base-size-8));\n      width: 0.25rem;\n      height: 1.5rem;\n      content: '';\n\n      /*\n       * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n       */\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--fgColor-accent);\n      border-radius: var(--borderRadius-medium);\n\n      @media (forced-colors: active) {\n        background-color: HighlightText;\n      }\n    }\n  }\n\n  & .TreeViewItemToggle {\n    display: flex;\n    height: 100%;\n\n    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n    color: var(--fgColor-muted);\n    grid-area: toggle;\n    justify-content: center;\n    align-items: flex-start;\n    cursor: pointer;\n  }\n\n  & .TreeViewItemToggleHover:hover {\n    background-color: var(--control-transparent-bgColor-hover);\n  }\n\n  & .TreeViewItemToggleEnd {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  & a.TreeViewItemContent:hover, button.TreeViewItemContent:hover {\n    text-decoration: underline;\n    text-decoration-color: var(--control-fgColor-rest);\n  }\n\n  & :has(.TreeViewItemContent[aria-disabled=\"true\"]) {\n    cursor: not-allowed;\n  }\n\n  & .TreeViewItemContent {\n    display: flex;\n    height: 100%;\n    padding: 0 var(--base-size-8);\n    outline: none;\n    text-align: left;\n    user-select: none;\n    background-color: transparent;\n    border: none;\n    touch-action: manipulation;\n    -webkit-tap-highlight-color: transparent;\n    cursor: pointer;\n\n    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n    /* stylelint-disable-next-line primer/spacing */\n    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n    grid-area: content;\n    gap: var(--stack-gap-condensed);\n\n    & .TreeViewItemCheckbox {\n      position: relative;\n      color: var(--control-fgColor-rest);\n      text-align: left;\n      user-select: none;\n      background-color: transparent;\n      border: none;\n      border-radius: var(--borderRadius-medium);\n      transition: background 33.333ms linear;\n      touch-action: manipulation;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    &[aria-checked='true'] {\n      & .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          transition: visibility 0s linear 0s;\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n        }\n      }\n    }\n\n    &[aria-checked='mixed'] {\n      & .FormControl-checkbox {\n        background: var(--control-checked-bgColor-rest);\n        border-color: var(--control-checked-borderColor-rest);\n        transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity -- Copied from primer/react */\n        &::before {\n          visibility: visible;\n          mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n          animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n          clip-path: none;\n        }\n      }\n    }\n\n    &[aria-disabled='true'] {\n      pointer-events: none;\n\n      & .TreeViewItemContentText {\n        color: var(--control-fgColor-disabled);\n      }\n\n      & .TreeViewItemVisual {\n        fill: var(--control-fgColor-disabled);\n\n        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */\n        & svg {\n          fill: var(--control-fgColor-disabled);\n        }\n      }\n\n      & .FormControl-checkbox {\n        /* stylelint-disable-next-line max-nesting-depth */\n        @media (hover: hover) {\n          /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */\n          &:hover {\n            cursor: not-allowed;\n          }\n        }\n      }\n\n      @media (hover: hover) {\n        /* stylelint-disable-next-line max-nesting-depth */\n        &:hover {\n          cursor: not-allowed;\n          background-color: transparent;\n        }\n      }\n    }\n  }\n\n  & .TreeViewItemContentText {\n    color: var(--control-fgColor-rest);\n    flex: 1 1 auto;\n    width: 0;\n  }\n\n  &:where([data-truncate-text='true']) .TreeViewItemContentText {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate-text='false']) .TreeViewItemContentText {\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- Copied from primer/react */\n    word-break: break-word;\n  }\n\n  & .TreeViewItemVisual {\n    display: flex;\n\n    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n    across more lines. */\n    height: var(--custom-line-height, 1.3rem);\n    color: var(--fgColor-muted);\n    align-items: center;\n  }\n\n  & .TreeViewItemLeadingAction {\n    display: flex;\n    color: var(--fgColor-muted);\n    grid-area: leadingAction;\n\n    & > button {\n      flex-shrink: 1;\n    }\n  }\n\n  & .TreeViewItemLevelLine {\n    width: 100%;\n    height: 100%;\n\n    /*\n     * On devices without hover, the nesting indicator lines\n     * appear at all times.\n     */\n    border-color: var(--borderColor-muted);\n    border-right: var(--borderWidth-thin) solid;\n  }\n\n  /*\n   * On devices with :hover support, the nesting indicator lines\n   * fade in when the user mouses over the entire component,\n   * or when there's focus inside the component. This makes\n   * sure the component remains simple when not in use.\n   */\n  @media (hover: hover) {\n    .TreeViewItemLevelLine {\n      border-color: transparent;\n    }\n\n    &:hover .TreeViewItemLevelLine,\n    &:focus-within .TreeViewItemLevelLine {\n      border-color: var(--borderColor-muted);\n    }\n  }\n\n  & .TreeViewVisuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n  height: 2rem;\n\n  @media (pointer: coarse) {\n    height: 2.75rem;\n  }\n\n  &:nth-of-type(5n + 1) {\n    --tree-item-loading-width: 67%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --tree-item-loading-width: 47%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --tree-item-loading-width: 73%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --tree-item-loading-width: 64%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --tree-item-loading-width: 50%;\n  }\n}\n\n.TreeItemSkeletonTextStyles {\n  width: var(--tree-item-loading-width, 67%);\n}\n\n.TreeViewFailureMessage {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.5rem;\n  width: 100%;\n  align-items: center;\n}\n"]}

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

@@ -3,6 +3,7 @@
     <%= @form_arguments[:builder].hidden_field(@form_arguments[:name], multiple: true, skip_default_ids: true, form: "", data: { target: "tree-view.formInputPrototype" }) %>
     <div data-target="tree-view.formInputContainer"></div>
   <% end %>
+
   <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
     <% nodes.each do |node| %>
       <%= node %>

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

@@ -143,7 +143,7 @@
     text-decoration-color: var(--control-fgColor-rest);
   }
 
-  & :has(.TreeViewItemContent[aria-disabled=true]) {
+  & :has(.TreeViewItemContent[aria-disabled="true"]) {
     cursor: not-allowed;
   }
 
@@ -213,7 +213,7 @@
       }
     }
 
-    &[aria-disabled="true"] {
+    &[aria-disabled='true'] {
       pointer-events: none;
 
       & .TreeViewItemContentText {
@@ -223,13 +223,16 @@
       & .TreeViewItemVisual {
         fill: var(--control-fgColor-disabled);
 
+        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */
         & svg {
           fill: var(--control-fgColor-disabled);
         }
       }
 
       & .FormControl-checkbox {
+        /* stylelint-disable-next-line max-nesting-depth */
         @media (hover: hover) {
+          /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */
           &:hover {
             cursor: not-allowed;
           }
@@ -237,31 +240,19 @@
       }
 
       @media (hover: hover) {
+        /* stylelint-disable-next-line max-nesting-depth */
         &:hover {
           cursor: not-allowed;
           background-color: transparent;
         }
       }
     }
-
-    & ::highlight(primer-filterable-tree-view-search-results) {
-      background-color: var(--label-yellow-bgColor-active);
-      color: var(--fgColor-default);
-    }
-
-    & mark {
-      background-color: var(--label-yellow-bgColor-active);
-      color: var(--fgColor-default);
-    }
   }
 
   & .TreeViewItemContentText {
     color: var(--control-fgColor-rest);
     flex: 1 1 auto;
     width: 0;
-    /* Do not remove, as otherwise the filter result of the filterableTreeView will not be shown in Safari
-       see: https://bugs.webkit.org/show_bug.cgi?id=278455 */
-    -webkit-user-select: auto;
   }
 
   &:where([data-truncate-text='true']) .TreeViewItemContentText {

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

@@ -6,7 +6,7 @@
 # following describes how the components fit together at a high level, using React-like syntax. Each element
 # in the diagram corresponds to one of three types of object:
 #
-# 1. Elements with TitleCase tags represent components in the Primer::OpenProject::TreeView namespace, eg. <LeafNode>.
+# 1. Elements with TitleCase tags represent components in the Primer::Alpha::TreeView namespace, eg. <LeafNode>.
 # 2. Elements with dasherized-tags are web components/custom elements, eg. <tree-view>.
 # 3. Elements with lowercase tags are regular 'ol HTML elements, eg. <ul>.
 #
@@ -143,7 +143,7 @@
 # </SubTree>
 
 module Primer
-  module OpenProject
+  module Alpha
     # TreeView is a hierarchical list of items that may have a parent-child relationship where children
     # can be toggled into view by expanding or collapsing their parent item.
     #
@@ -169,7 +169,7 @@ module Primer
     # Providing items statically is done using the `leaf` and `sub_tree` slots:
     #
     # ```erb
-    # <%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+    # <%= render(Primer::Alpha::TreeView.new) do |tree| %>
     #   <% tree.with_sub_tree(label: "Directory") do |sub_tree| %>
     #     <% sub_tree.with_leaf(label: "File 1")
     #   <% end %>
@@ -186,7 +186,7 @@ module Primer
     # the URL to fetch nodes from:
     #
     # ```erb
-    # <%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+    # <%= render(Primer::Alpha::TreeView.new) do |tree| %>
     #   <% tree.with_sub_tree(label: "Directory") do |sub_tree| %>
     #     <% sub_tree.with_loading_spinner(src: primer_view_components.tree_view_items_path) %>
     #   <% end %>
@@ -212,10 +212,10 @@ module Primer
     # Mime::Type.register("text/fragment+html", :html_fragment)
     # ```
     #
-    # Render a `Primer::OpenProject::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:
+    # Render a `Primer::Alpha::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:
     #
     # ```erb
-    # <%= render(Primer::OpenProject::TreeView::SubTree.new(path: @path, node_variant: :div)) do |tree| %>
+    # <%= render(Primer::Alpha::TreeView::SubTree.new(path: @path, node_variant: :div)) do |tree| %>
     #   <% tree.with_leaf(...) %>
     #   <% tree.with_sub_tree(...) do |sub_tree| %>
     #     ...
@@ -355,22 +355,24 @@ module Primer
     # both the `treeViewNodeChecked` and `treeViewBeforeNodeChecked` events provide an array of `TreeViewNodeInfo`
     # objects, which contain entries for every modified node in the tree.
     class TreeView < Primer::Component
+      status :alpha
+
       DEFAULT_NODE_VARIANT = :div
       NODE_VARIANT_OPTIONS = [DEFAULT_NODE_VARIANT, :anchor, :button].freeze
 
       # @!parse
       #   # Adds an leaf node to the tree. Leaf nodes are nodes that do not have children.
       #   #
-      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::OpenProject::TreeView::LeafNode) %>
-      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::OpenProject::TreeView::LeafNode) %>, or whatever class is passed as the `component_klass` argument.
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::TreeView::LeafNode) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::TreeView::LeafNode) %>, or whatever class is passed as the `component_klass` argument.
       #   def with_leaf(**system_arguments, &block)
       #   end
 
       # @!parse
       #   # Adds a sub-tree node to the tree. Sub-trees are nodes that have children, which can be both leaf nodes and other sub-trees.
       #   #
-      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::OpenProject::TreeView::SubTreeNode) %>
-      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::OpenProject::TreeView::SubTreeNode) %>, or whatever class is passed as the `component_klass` argument.
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::TreeView::SubTreeNode) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::TreeView::SubTreeNode) %>, or whatever class is passed as the `component_klass` argument.
       #   def with_sub_tree(**system_arguments, &block)
       #   end
 
@@ -404,7 +406,8 @@ module Primer
 
       attr_reader :node_variant
 
-      # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
+      # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::Alpha::TreeView::NODE_VARIANT_OPTIONS) %>
+      # @param form_arguments [Hash] These arguments allow the selections made within a `TreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
       def initialize(node_variant: DEFAULT_NODE_VARIANT, form_arguments: {}, **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)

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

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;max-width:100%}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}
+.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .15em 0 .5em;transform:rotate(15deg) translateY(.0625em)}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}

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

@@ -3,7 +3,6 @@
   "selectors": [
     ".breadcrumb-item",
     ".breadcrumb-item:after",
-    ".breadcrumb-item:first-child",
     ":is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after",
     ".breadcrumb-item-selected a"
   ]

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

@@ -1 +1 @@
-{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CADhB,kBAAoB,CAEpB,cAgBF,CAdE,uBAOE,2DAA6D,CAF7D,UAAW,CAJX,oBAAqB,CACrB,WAAa,CAEb,aAAe,CAIf,2CACF,CAEA,6BACE,aACF,CAKA,8FACE,YACF,CAIF,4BACE,4BAA6B,CAE7B,wBAA0B,CAD1B,sCAAgC,CAAhC,8BAEF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -0.35em;\n  list-style: none;\n  max-width: 100%;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.5em;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  text-decoration: none !important;\n  cursor: default !important;\n}\n"]}
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CACrB,eAAgB,CAChB,cAYF,CAVE,uBAOE,2DAA6D,CAF7D,UAAW,CAJX,oBAAqB,CACrB,WAAa,CAEb,qBAAwB,CAIxB,2CACF,CAKA,8FACE,YACF,CAIF,4BACE,4BAA6B,CAE7B,wBAA0B,CAD1B,sCAAgC,CAAhC,8BAEF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  list-style: none;\n  max-width: 100%;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.15em 0 0.5em;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  text-decoration: none !important;\n  cursor: default !important;\n}"]}

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

@@ -1,7 +1,5 @@
 .breadcrumb-item {
   display: inline-block;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: -0.35em;
   list-style: none;
   max-width: 100%;
 
@@ -9,16 +7,12 @@
     display: inline-block;
     height: 0.8em;
     /* stylelint-disable-next-line primer/spacing */
-    margin: 0 0.5em;
+    margin: 0 0.15em 0 0.5em;
     content: '';
     /* stylelint-disable-next-line primer/borders */
     border-right: 0.1em solid var(--borderColor-neutral-emphasis);
     transform: rotate(15deg) translateY(0.0625em);
   }
-
-  &:first-child {
-    margin-left: 0;
-  }
 }
 
 .breadcrumb-item-selected,
@@ -33,4 +27,4 @@
   color: var(--fgColor-default);
   text-decoration: none !important;
   cursor: default !important;
-}
+}

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

@@ -1 +1 @@
-.Progress{background-color:var(--bgColor-neutral-muted);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}
+.Progress{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}

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

@@ -1 +1 @@
-{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,6CAA8C,CAC9C,wCAAyC,CAJzC,YAAa,CACb,UAAW,CAIX,uBAA8B,CAH9B,eAIF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eACE,uBACF,CAEA,8BACE,8BACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n  display: flex;\n  height: 8px;\n  overflow: hidden;\n  background-color: var(--bgColor-neutral-muted);\n  border-radius: var(--borderRadius-medium);\n  outline: 1px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress--large {\n  height: 10px;\n}\n\n.Progress--small {\n  height: 5px;\n}\n\n.Progress-item {\n  outline: 2px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress-item + .Progress-item {\n  margin-left: var(--base-size-2);\n}\n"]}
+{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,iDAAkD,CAClD,wCAAyC,CAJzC,YAAa,CACb,UAAW,CAIX,sDAAuD,CACvD,mBAAoB,CAJpB,eAKF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eACE,uBACF,CAEA,8BACE,8BACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n  display: flex;\n  height: 8px;\n  overflow: hidden;\n  background-color: var(--progressBar-track-bgColor);\n  border-radius: var(--borderRadius-medium);\n  outline: solid 1px var(--progressBar-track-borderColor);\n  outline-offset: -1px;\n}\n\n.Progress--large {\n  height: 10px;\n}\n\n.Progress--small {\n  height: 5px;\n}\n\n.Progress-item {\n  outline: 2px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress-item + .Progress-item {\n  margin-left: var(--base-size-2);\n}\n"]}

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

@@ -4,9 +4,10 @@
   display: flex;
   height: 8px;
   overflow: hidden;
-  background-color: var(--bgColor-neutral-muted);
+  background-color: var(--progressBar-track-bgColor);
   border-radius: var(--borderRadius-medium);
-  outline: 1px solid transparent; /* Support Firefox custom colors */
+  outline: solid 1px var(--progressBar-track-borderColor);
+  outline-offset: -1px;
 }
 
 .Progress--large {

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

@@ -102,6 +102,7 @@ module Primer
       # @param lang [String] The language to use.
       # @param title [String] Provide a custom title to the element.
       # @param no_title [Boolean] Removes the `title` attribute provided on the element by default.
+      # @param aria_hidden [Boolean] Set if the element is hidden or not.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         datetime:,
@@ -122,6 +123,7 @@ module Primer
         lang: nil,
         title: nil,
         no_title: false,
+        aria_hidden: nil,
         **system_arguments
       )
         @system_arguments = deny_tag_argument(**system_arguments)
@@ -143,6 +145,7 @@ module Primer
         @system_arguments[:lang] = lang if lang.present?
         @system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
         @system_arguments[:"format-style"] = format_style if format_style.present?
+        @system_arguments[:"aria-hidden"] = aria_hidden if aria_hidden.present?
         if datetime.present? && datetime.respond_to?(:iso8601)
           @datetime = datetime
           @system_arguments[:datetime] = datetime.iso8601

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

@@ -7,7 +7,7 @@ module Primer
       #
       # This component is part of the <%= link_to_component(Primer::OpenProject::FilterableTreeView) %> component and
       # should not be used directly.
-      class SubTree < Primer::OpenProject::TreeView::SubTree
+      class SubTree < Primer::Alpha::TreeView::SubTree
         def with_sub_tree(**system_arguments, &block)
           super(
             sub_tree_component_klass: self.class,

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

@@ -1,6 +1,6 @@
 import { SegmentedControlElement } from '../alpha/segmented_control';
-import { TreeViewElement } from './tree_view/tree_view';
-import { TreeViewSubTreeNodeElement } from './tree_view/tree_view_sub_tree_node_element';
+import { TreeViewElement } from '../alpha/tree_view/tree_view';
+import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
 export type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null;
 export declare class FilterableTreeViewElement extends HTMLElement {
     #private;

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

@@ -19,7 +19,7 @@
       <% end %>
     <% end %>
     <%= render(Primer::BaseComponent.new(tag: :div, hidden: true, data: { target: "filterable-tree-view.noResultsMessage" })) do %>
-      <%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+      <%= render(Primer::Alpha::TreeView.new) do |tree| %>
         <% tree.with_leaf(**@no_results_node_arguments) %>
       <% end %>
     <% end %>

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

@@ -17,8 +17,8 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
 import { controller, target } from '@github/catalyst';
-import { TreeViewElement } from './tree_view/tree_view';
-import { TreeViewSubTreeNodeElement } from './tree_view/tree_view_sub_tree_node_element';
+import { TreeViewElement } from '../alpha/tree_view/tree_view';
+import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
 let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElement {
     constructor() {
         super(...arguments);

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

@@ -150,12 +150,12 @@ module Primer
 
       DEFAULT_NO_RESULTS_NODE_ARGUMENTS.freeze
 
-      # @param tree_view_arguments [Hash] Arguments that will be passed to the underlying <%= link_to_component(Primer::OpenProject::TreeView) %> component.
-      # @param form_arguments [Hash] Form arguments that will be passed to the underlying <%= link_to_component(Primer::OpenProject::TreeView) %> component. These arguments allow the selections made within a `FilterableTreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
+      # @param tree_view_arguments [Hash] Arguments that will be passed to the underlying <%= link_to_component(Primer::Alpha::TreeView) %> component.
+      # @param form_arguments [Hash] Form arguments that will be passed to the underlying <%= link_to_component(Primer::Alpha::TreeView) %> component. These arguments allow the selections made within a `FilterableTreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
       # @param filter_input_arguments [Hash] Arguments that will be passed to the <%= link_to_component(Primer::Alpha::TextField) %> component.
       # @param filter_mode_control_arguments [Hash] Arguments that will be passed to the <%= link_to_component(Primer::Alpha::SegmentedControl) %> component.
       # @param include_sub_items_check_box_arguments [Hash] Arguments that will be passed to the <%= link_to_component(Primer::Alpha::CheckBox) %> component.
-      # @param no_results_node_arguments [Hash] Arguments that will be passed to a <%= link_to_component(Primer::OpenProject::TreeView::LeafNode) %> component that appears when no items match the filter criteria.
+      # @param no_results_node_arguments [Hash] Arguments that will be passed to a <%= link_to_component(Primer::Alpha::TreeView::LeafNode) %> component that appears when no items match the filter criteria.
       def initialize(
         tree_view_arguments: {},
         form_arguments: {},
@@ -171,7 +171,7 @@ module Primer
           }
         )
 
-        @tree_view = Primer::OpenProject::TreeView.new(
+        @tree_view = Primer::Alpha::TreeView.new(
           form_arguments: form_arguments,
           **tree_view_arguments
         )

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

@@ -1,7 +1,7 @@
 import {controller, target} from '@github/catalyst'
 import {SegmentedControlElement} from '../alpha/segmented_control'
-import {TreeViewElement} from './tree_view/tree_view'
-import {TreeViewSubTreeNodeElement} from './tree_view/tree_view_sub_tree_node_element'
+import {TreeViewElement} from '../alpha/tree_view/tree_view'
+import {TreeViewSubTreeNodeElement} from '../alpha/tree_view/tree_view_sub_tree_node_element'
 import {TreeViewNodeInfo} from '../shared_events'
 
 // This function is expected to return the following values:

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

@@ -26,6 +26,10 @@ import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
 import './beta/details_toggle_element';
+import './alpha/tree_view/tree_view';
+import './alpha/tree_view/tree_view_icon_pair_element';
+import './alpha/tree_view/tree_view_sub_tree_node_element';
+import './alpha/tree_view/tree_view_include_fragment_element';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
@@ -33,8 +37,4 @@ import './open_project/danger_dialog_form_helper';
 import './open_project/collapsible';
 import './open_project/border_box/collapsible_header';
 import './open_project/collapsible_section';
-import './open_project/tree_view/tree_view';
-import './open_project/tree_view/tree_view_icon_pair_element';
-import './open_project/tree_view/tree_view_sub_tree_node_element';
-import './open_project/tree_view/tree_view_include_fragment_element';
 import './open_project/filterable_tree_view';

data/app/components/primer/primer.js

@@ -26,6 +26,10 @@ import '../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
 import './alpha/select_panel_element';
 import './beta/details_toggle_element';
+import './alpha/tree_view/tree_view';
+import './alpha/tree_view/tree_view_icon_pair_element';
+import './alpha/tree_view/tree_view_sub_tree_node_element';
+import './alpha/tree_view/tree_view_include_fragment_element';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';
@@ -33,8 +37,4 @@ import './open_project/danger_dialog_form_helper';
 import './open_project/collapsible';
 import './open_project/border_box/collapsible_header';
 import './open_project/collapsible_section';
-import './open_project/tree_view/tree_view';
-import './open_project/tree_view/tree_view_icon_pair_element';
-import './open_project/tree_view/tree_view_sub_tree_node_element';
-import './open_project/tree_view/tree_view_include_fragment_element';
 import './open_project/filterable_tree_view';

data/app/components/primer/primer.pcss

@@ -17,6 +17,8 @@
 @import "./alpha/text_field.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
+@import "./alpha/skeleton_box.pcss";
+@import "./alpha/tree_view.pcss";
 
 /* beta */
 @import "./beta/avatar.pcss";
@@ -51,5 +53,3 @@
 @import "./open_project/side_panel/section.pcss";
 @import "./open_project/border_box/collapsible_header.pcss";
 @import "./open_project/collapsible_section.pcss";
-@import "./open_project/skeleton_box.pcss";
-@import "./open_project/tree_view.pcss";

data/app/components/primer/primer.ts

@@ -26,6 +26,10 @@ import '../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
 import './alpha/select_panel_element'
 import './beta/details_toggle_element'
+import './alpha/tree_view/tree_view'
+import './alpha/tree_view/tree_view_icon_pair_element'
+import './alpha/tree_view/tree_view_sub_tree_node_element'
+import './alpha/tree_view/tree_view_include_fragment_element'
 import './open_project/page_header_element'
 import './open_project/zen_mode_button'
 import './open_project/sub_header_element'
@@ -33,8 +37,4 @@ import './open_project/danger_dialog_form_helper'
 import './open_project/collapsible'
 import './open_project/border_box/collapsible_header'
 import './open_project/collapsible_section'
-import './open_project/tree_view/tree_view'
-import './open_project/tree_view/tree_view_icon_pair_element'
-import './open_project/tree_view/tree_view_sub_tree_node_element'
-import './open_project/tree_view/tree_view_include_fragment_element'
 import './open_project/filterable_tree_view'

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

@@ -18,7 +18,7 @@ module Primer
           head :internal_server_error and return
         end
 
-        path =  JSON.parse(params[:path])
+        path = JSON.parse(params[:path])
         node = path.inject(TREE) do |current, segment|
           current["children"][segment]
         end

data/app/forms/check_box_with_nested_form.rb

@@ -1,18 +1,18 @@
 # frozen_string_literal: true
 
 # :nodoc:
-class CustomCitiesForm < ApplicationForm
-  form do |custom_cities_form|
-    custom_cities_form.text_field(
-      name: :custom_cities,
-      label: "Custom cities",
-      description: "A space-separated list of cities"
-    )
+class CheckBoxWithNestedForm < ApplicationForm
+  # :nodoc:
+  class CustomCitiesForm < ApplicationForm
+    form do |custom_cities_form|
+      custom_cities_form.text_field(
+        name: :custom_cities,
+        label: "Custom cities",
+        description: "A space-separated list of cities"
+      )
+    end
   end
-end
 
-# :nodoc:
-class CheckBoxWithNestedForm < ApplicationForm
   form do |check_form|
     check_form.check_box_group(name: :city_categories) do |check_group|
       check_group.check_box(

data/app/forms/radio_button_with_nested_form.rb

@@ -1,27 +1,27 @@
 # frozen_string_literal: true
 
 # :nodoc:
-class FriendForm < ApplicationForm
-  form do |friend_form|
-    friend_form.group(layout: :horizontal) do |name_group|
-      name_group.text_field(name: "first_name", label: "First Name")
-      name_group.text_field(name: "last_name", label: "Last Name")
+class RadioButtonWithNestedForm < ApplicationForm
+  # :nodoc:
+  class FriendForm < ApplicationForm
+    form do |friend_form|
+      friend_form.group(layout: :horizontal) do |name_group|
+        name_group.text_field(name: "first_name", label: "First Name")
+        name_group.text_field(name: "last_name", label: "Last Name")
+      end
     end
   end
-end
 
-# :nodoc:
-class FriendTextAreaForm < ApplicationForm
-  form do |friend_text_area_form|
-    friend_text_area_form.text_area(
-      name: "description",
-      label: "Describe this wonderful person in loving detail"
-    )
+  # :nodoc:
+  class FriendTextAreaForm < ApplicationForm
+    form do |friend_text_area_form|
+      friend_text_area_form.text_area(
+        name: "description",
+        label: "Describe this wonderful person in loving detail"
+      )
+    end
   end
-end
 
-# :nodoc:
-class RadioButtonWithNestedForm < ApplicationForm
   form do |radio_form|
     radio_form.radio_button_group(name: "channel") do |radio_group|
       radio_group.radio_button(value: "online", label: "Online advertisement", caption: "Facebook maybe?")

data/app/lib/primer/experimental_slot_helpers.rb

@@ -13,7 +13,7 @@ module Primer
         slot_def = registered_slots[slot_name]
         raise "Unknown slot '#{slot_name}'" unless slot_def
 
-        poly_def = define_slot(
+        poly_def = __vc_define_slot(
           type,
           collection: slot_def[:collection],
           callable: callable
@@ -22,7 +22,7 @@ module Primer
         registered_slots[slot_name][:renderable_hash][type] = poly_def
 
         define_method(:"with_#{type}") do |**system_arguments, &block|
-          set_slot(slot_name, poly_def, **system_arguments, &block)
+          __vc_set_slot(slot_name, poly_def, **system_arguments, &block)
         end
       end
     end

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

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::TreeView::SubTree.new(path: ["primer"], node_variant: :div)) do |tree| %>
+<%= render(Primer::Alpha::TreeView::SubTree.new(path: ["primer"], node_variant: :div)) do |tree| %>
   <% tree.with_sub_tree(label: "alpha") do |sub_tree| %>
     <% sub_tree.with_leading_visual_icons do |icons| %>
       <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>

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

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::TreeView::SubTree.new(path: path, select_variant: select_variant, node_variant: :div)) do |tree| %>
+<%= render(Primer::Alpha::TreeView::SubTree.new(path: path, select_variant: select_variant, node_variant: :div)) do |tree| %>
   <% next if params[:empty] == "true" %>
   <% entries.each do |label, type| %>
     <% case type %>

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 71
+      MINOR = 72
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/{open_project → alpha}/file_tree_view_preview/default.html.erb

@@ -1,5 +1,5 @@
 <div style="max-width: 400px">
-  <%= render(Primer::OpenProject::FileTreeView.new) do |tree_view| %>
+  <%= render(Primer::Alpha::FileTreeView.new) do |tree_view| %>
     <% tree_view.with_directory(label: "src", expanded: expanded, select_variant: select_variant) do |dir| %>
       <% dir.with_trailing_visual_icon(icon: :"diff-modified") %>
 

data/previews/primer/{open_project → alpha}/file_tree_view_preview/playground.html.erb

@@ -1,4 +1,4 @@
 <% data = Primer::ViewComponents::TreeViewItemsController::TREE %>
-<%= render(Primer::OpenProject::FileTreeView.new) do |tree| %>
+<%= render(Primer::Alpha::FileTreeView.new) do |tree| %>
   <% populate.call(tree, data, { select_variant: select_variant, expanded: expanded }) %>
 <% end %>

data/previews/primer/{open_project → alpha}/file_tree_view_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  module OpenProject
+  module Alpha
     # @label FileTreeView
     class FileTreeViewPreview < ViewComponent::Preview
       # @label Default