@mixtint/primer-view-components 0.88.0 → 0.89.1

package/app/components/primer/alpha/tree_view.css

@@ -304,28 +304,31 @@
 
     /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap
     across more lines. */
+    align-self: baseline;
     height: var(--custom-line-height, 1.3rem);
     color: var(--fgColor-muted);
     align-items: center;
   }
 
 .TreeViewRootUlStyles .TreeViewItemLeadingAction {
-    display: flex;
-    color: var(--fgColor-muted);
     grid-area: leadingAction;
   }
 
-:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
-      flex-shrink: 1;
-    }
-
 .TreeViewRootUlStyles .TreeViewItemTrailingAction {
+    grid-area: trailingAction;
+  }
+
+.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction {
     display: flex;
     color: var(--fgColor-muted);
-    grid-area: trailingAction;
+    /* The dynamic top and bottom padding to maintain the minimum item height for single line items while cancelling out the invisible area of the button */
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);
   }
 
-:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button {
+:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
       flex-shrink: 1;
     }
 

package/app/components/primer/alpha/tree_view.css.json

@@ -37,9 +37,8 @@
     ".TreeViewRootUlStyles:where([data-truncate-text='false']) .TreeViewItemContentText",
     ".TreeViewRootUlStyles .TreeViewItemVisual",
     ".TreeViewRootUlStyles .TreeViewItemLeadingAction",
-    ":is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button",
     ".TreeViewRootUlStyles .TreeViewItemTrailingAction",
-    ":is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button",
+    ":is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button",
     ".TreeViewRootUlStyles .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:hover .TreeViewItemLevelLine",
     ".TreeViewRootUlStyles:focus-within .TreeViewItemLevelLine",

package/app/components/primer/open_project/filterable_tree_view.css

@@ -32,7 +32,7 @@ filterable-tree-view {
 /* Highlight style for CSS Custom Highlight API */
 
 ::highlight(primer-filterable-tree-view-search-results) {
-  background-color: var(--bgColor-attention-muted);
+  background-color: var(--display-yellow-scale-2);
 }
 
 /* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
@@ -40,7 +40,7 @@ filterable-tree-view {
 /* stylelint-disable-next-line selector-max-type */
 
 filterable-tree-view mark {
-  background-color: var(--bgColor-attention-muted);
+  background-color: var(--display-yellow-scale-2);
   color: inherit;
 }
 

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

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
+var _FilterableTreeViewElement_instances, _FilterableTreeViewElement_filterFn, _FilterableTreeViewElement_abortController, _FilterableTreeViewElement_stateMap, _FilterableTreeViewElement_debounceTimer, _FilterableTreeViewElement_fetchAbortController, _FilterableTreeViewElement_expansionSnapshot, _FilterableTreeViewElement_selectedModeSnapshot, _FilterableTreeViewElement_checkedNodeIds, _FilterableTreeViewElement_checkedNodeFormPayloads, _FilterableTreeViewElement_isFiltered, _FilterableTreeViewElement_src_get, _FilterableTreeViewElement_isAsyncMode_get, _FilterableTreeViewElement_clientHighlightsEnabled_get, _FilterableTreeViewElement_handleTreeViewEvent, _FilterableTreeViewElement_updateCheckedNodeIds, _FilterableTreeViewElement_handleTreeViewNodeChecked, _FilterableTreeViewElement_restoreNodeState, _FilterableTreeViewElement_handleFilterModeEvent, _FilterableTreeViewElement_undoClientSideFilter, _FilterableTreeViewElement_handleFilterInputEvent, _FilterableTreeViewElement_handleFilterInputKeyDown, _FilterableTreeViewElement_handleTreeKeyDown, _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent, _FilterableTreeViewElement_includeSubItems, _FilterableTreeViewElement_includeSubItemsUnder, _FilterableTreeViewElement_restoreAllNodeStates, _FilterableTreeViewElement_scheduleAsyncFetch, _FilterableTreeViewElement_fetchAndReplaceTree, _FilterableTreeViewElement_captureExpansionState, _FilterableTreeViewElement_applyExpansionSnapshot, _FilterableTreeViewElement_snapshotExpansionState, _FilterableTreeViewElement_restoreExpansionState, _FilterableTreeViewElement_restoreSelectionState, _FilterableTreeViewElement_expandAllSubTrees, _FilterableTreeViewElement_applyAsyncHighlights, _FilterableTreeViewElement_updateRetainedSelections, _FilterableTreeViewElement_applyFilterOptions, _FilterableTreeViewElement_applyHighlights, _FilterableTreeViewElement_applyManualHighlights, _FilterableTreeViewElement_removeHighlights;
 import { controller, target } from '@github/catalyst';
 import { TreeViewElement } from '../alpha/tree_view/tree_view';
 import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
@@ -57,6 +57,7 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
         this.addEventListener('treeViewNodeChecked', this, { signal });
         this.addEventListener('itemActivated', this, { signal });
         this.addEventListener('input', this, { signal });
+        this.addEventListener('keydown', this, { signal });
         if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_isAsyncMode_get)) {
             void __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_fetchAndReplaceTree).call(this);
         }
@@ -72,7 +73,12 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterModeEvent).call(this, event);
         }
         else if (event.target === this.filterInput) {
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputEvent).call(this, event);
+            if (event.type === 'keydown') {
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputKeyDown).call(this, event);
+            }
+            else {
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleFilterInputEvent).call(this, event);
+            }
         }
         else if (event.target === this.includeSubItemsCheckBox) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent).call(this, event);
@@ -80,6 +86,9 @@ let FilterableTreeViewElement = class FilterableTreeViewElement extends HTMLElem
         else if (event.target instanceof TreeViewElement || event.target instanceof TreeViewSubTreeNodeElement) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeViewEvent).call(this, event);
         }
+        else if (event.type === 'keydown' && this.treeViewList?.contains(event.target)) {
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_handleTreeKeyDown).call(this, event);
+        }
     }
     get filterModeControl() {
         return this.filterModeControlList.closest('segmented-control');
@@ -190,6 +199,9 @@ _FilterableTreeViewElement_src_get = function _FilterableTreeViewElement_src_get
 _FilterableTreeViewElement_isAsyncMode_get = function _FilterableTreeViewElement_isAsyncMode_get() {
     return !!__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_src_get);
 };
+_FilterableTreeViewElement_clientHighlightsEnabled_get = function _FilterableTreeViewElement_clientHighlightsEnabled_get() {
+    return this.getAttribute('data-show-search-highlighting') !== 'false';
+};
 _FilterableTreeViewElement_handleTreeViewEvent = function _FilterableTreeViewElement_handleTreeViewEvent(origEvent) {
     const event = origEvent;
     // NOTE: This event only fires if someone actually activates the check mark, i.e. does not fire
@@ -318,6 +330,23 @@ _FilterableTreeViewElement_handleFilterInputEvent = function _FilterableTreeView
         __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyFilterOptions).call(this);
     }
 };
+_FilterableTreeViewElement_handleFilterInputKeyDown = function _FilterableTreeViewElement_handleFilterInputKeyDown(event) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+        return;
+    const treeitems = [...(this.treeViewList?.querySelectorAll('[role=treeitem]') ?? [])];
+    const visibleItems = treeitems.filter(item => !item.closest('[hidden]'));
+    if (visibleItems.length === 0)
+        return;
+    event.preventDefault();
+    const focusTarget = event.key === 'ArrowDown' ? visibleItems[0] : visibleItems[visibleItems.length - 1];
+    focusTarget.focus();
+};
+_FilterableTreeViewElement_handleTreeKeyDown = function _FilterableTreeViewElement_handleTreeKeyDown(event) {
+    if (event.key !== 'Escape')
+        return;
+    event.preventDefault();
+    this.filterInput.focus();
+};
 _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent = function _FilterableTreeViewElement_handleIncludeSubItemsCheckBoxEvent(event) {
     if (!this.treeView)
         return;
@@ -433,13 +462,15 @@ _FilterableTreeViewElement_fetchAndReplaceTree = async function _FilterableTreeV
         }
         if (requestWasFiltered) {
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_expandAllSubTrees).call(this);
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyAsyncHighlights).call(this, query);
+            if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyAsyncHighlights).call(this, query);
             const hasResults = !!this.treeViewList?.querySelector('[role=treeitem]');
             this.noResultsMessage.toggleAttribute('hidden', hasResults);
             this.treeViewList?.toggleAttribute('hidden', !hasResults);
         }
         else {
-            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
+            if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+                __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_removeHighlights).call(this);
             __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_restoreExpansionState).call(this);
             this.noResultsMessage.setAttribute('hidden', 'hidden');
             this.treeViewList?.removeAttribute('hidden');
@@ -625,7 +656,8 @@ _FilterableTreeViewElement_applyFilterOptions = function _FilterableTreeViewElem
     else {
         this.treeViewList.removeAttribute('hidden');
         this.noResultsMessage.setAttribute('hidden', 'hidden');
-        __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyHighlights).call(this, allRanges);
+        if (__classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "a", _FilterableTreeViewElement_clientHighlightsEnabled_get))
+            __classPrivateFieldGet(this, _FilterableTreeViewElement_instances, "m", _FilterableTreeViewElement_applyHighlights).call(this, allRanges);
     }
 };
 _FilterableTreeViewElement_applyHighlights = function _FilterableTreeViewElement_applyHighlights(ranges) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mixtint/primer-view-components",
-  "version": "0.88.0",
+  "version": "0.89.1",
   "publishConfig": {
     "access": "public"
   },
@@ -49,11 +49,11 @@
     "@github/auto-check-element": "^6.0.0",
     "@github/auto-complete-element": "^3.8.0",
     "@github/catalyst": "^1.8.1",
-    "@github/clipboard-copy-element": "^1.3.0",
+    "@github/clipboard-copy-element": "^1.3.2",
     "@github/details-menu-element": "^1.0.13",
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.4.1",
-    "@github/relative-time-element": "^5.0.0",
+    "@github/relative-time-element": "^5.2.0",
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.4.0",
     "@oddbird/popover-polyfill": "^0.5.2",
@@ -68,15 +68,15 @@
     "@changesets/cli": "^2.31.0",
     "@github/axe-github": "^0.8.1",
     "@github/browserslist-config": "^1.0.0",
-    "@github/markdownlint-github": "^0.8.1",
+    "@github/markdownlint-github": "^0.8.3",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "^1.61.1",
     "@primer/css": "22.1.1",
     "@primer/primitives": "^11.9.0",
     "@primer/stylelint-config": "^13.6.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^8.5.0",
-    "axe-core": "^4.12.0",
+    "axe-core": "^4.12.1",
     "chokidar-cli": "^3.0.0",
     "css-what": "^7.0.0",
     "cssnano": "^7.1.9",
@@ -85,19 +85,19 @@
     "glob": "^11.1.0",
     "markdownlint-cli2": "^0.22.1",
     "mocha": "^11.7.6",
-    "playwright": "^1.60.0",
-    "postcss": "^8.5.15",
+    "playwright": "^1.61.1",
+    "postcss": "^8.5.16",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^11.3.0",
-    "prettier": "^3.8.3",
+    "postcss-preset-env": "^11.3.2",
+    "prettier": "^3.9.4",
     "rollup": "^2.80.0",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.16",
+    "vite": "^8.1.3",
     "vite-plugin-ruby": "^5.2.2"
   },
   "prettier": "@github/prettier-config",

package/static/arguments.json

@@ -6173,6 +6173,12 @@
         "default": "`nil`",
         "description": "URL of the server endpoint that returns a filtered `<tree-view>` HTML fragment. When set, activates async (server-side) filtering mode. See \"Async loading strategy\" above."
       },
+      {
+        "name": "show_search_highlighting",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Only relevant in async mode (`src:` must be set). When `true` (default), the client highlights matching text using the CSS Custom Highlight API or `<mark>` elements. When `false`, the client skips highlighting entirely; the server is responsible for including highlight markup (e.g. `<mark>` tags) in the returned HTML fragment."
+      },
       {
         "name": "tree_view_arguments",
         "type": "Hash",
@@ -6498,7 +6504,7 @@
       {
         "name": "collapsed_search",
         "type": "Boolean",
-        "default": "`false`",
+        "default": "`true`",
         "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
       },
       {

package/static/info_arch.json

@@ -7301,7 +7301,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/icons_and_text_medium",
         "name": "icons_and_text_medium",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7314,7 +7314,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
         "name": "trailing_label_width_small",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7327,7 +7327,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/trailing_label_width_medium",
         "name": "trailing_label_width_medium",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -10869,6 +10869,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/tree_view/doubled_path",
+        "name": "doubled_path",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -20368,6 +20381,12 @@
         "default": "`nil`",
         "description": "URL of the server endpoint that returns a filtered `<tree-view>` HTML fragment. When set, activates async (server-side) filtering mode. See \"Async loading strategy\" above."
       },
+      {
+        "name": "show_search_highlighting",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Only relevant in async mode (`src:` must be set). When `true` (default), the client highlights matching text using the CSS Custom Highlight API or `<mark>` elements. When `false`, the client skips highlighting entirely; the server is responsible for including highlight markup (e.g. `<mark>` tags) in the returned HTML fragment."
+      },
       {
         "name": "tree_view_arguments",
         "type": "Hash",
@@ -20424,7 +20443,7 @@
       {
         "preview_path": "primer/open_project/filterable_tree_view/default",
         "name": "default",
-        "snapshot": "interactive",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -20499,6 +20518,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/filterable_tree_view/async_server_highlights",
+        "name": "async_server_highlights",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/filterable_tree_view/async_form_input",
         "name": "async_form_input",
@@ -21787,7 +21819,7 @@
       {
         "name": "collapsed_search",
         "type": "Boolean",
-        "default": "`false`",
+        "default": "`true`",
         "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
       },
       {
@@ -21938,8 +21970,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/sub_header/collapsed_search",
-        "name": "collapsed_search",
+        "preview_path": "primer/open_project/sub_header/expanded_search",
+        "name": "expanded_search",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

package/static/previews.json

@@ -4440,7 +4440,7 @@
       {
         "preview_path": "primer/open_project/filterable_tree_view/default",
         "name": "default",
-        "snapshot": "interactive",
+        "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -4515,6 +4515,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/filterable_tree_view/async_server_highlights",
+        "name": "async_server_highlights",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/filterable_tree_view/async_form_input",
         "name": "async_form_input",
@@ -4889,12 +4902,12 @@
   },
   {
     "name": "heading",
-    "component": "OpenProject::Heading",
-    "status": "open_project",
-    "lookup_path": "primer/open_project/heading",
+    "component": "Heading",
+    "status": "beta",
+    "lookup_path": "primer/beta/heading",
     "examples": [
       {
-        "preview_path": "primer/open_project/heading/playground",
+        "preview_path": "primer/beta/heading/playground",
         "name": "playground",
         "snapshot": "false",
         "skip_rules": {
@@ -4907,7 +4920,7 @@
         }
       },
       {
-        "preview_path": "primer/open_project/heading/default",
+        "preview_path": "primer/beta/heading/default",
         "name": "default",
         "snapshot": "true",
         "skip_rules": {
@@ -4923,12 +4936,12 @@
   },
   {
     "name": "heading",
-    "component": "Heading",
-    "status": "beta",
-    "lookup_path": "primer/beta/heading",
+    "component": "OpenProject::Heading",
+    "status": "open_project",
+    "lookup_path": "primer/open_project/heading",
     "examples": [
       {
-        "preview_path": "primer/beta/heading/playground",
+        "preview_path": "primer/open_project/heading/playground",
         "name": "playground",
         "snapshot": "false",
         "skip_rules": {
@@ -4941,7 +4954,7 @@
         }
       },
       {
-        "preview_path": "primer/beta/heading/default",
+        "preview_path": "primer/open_project/heading/default",
         "name": "default",
         "snapshot": "true",
         "skip_rules": {
@@ -7190,7 +7203,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/icons_and_text_medium",
         "name": "icons_and_text_medium",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7203,7 +7216,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
         "name": "trailing_label_width_small",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7216,7 +7229,7 @@
       {
         "preview_path": "primer/alpha/segmented_control/trailing_label_width_medium",
         "name": "trailing_label_width_medium",
-        "snapshot": "true",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8235,8 +8248,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/sub_header/collapsed_search",
-        "name": "collapsed_search",
+        "preview_path": "primer/open_project/sub_header/expanded_search",
+        "name": "expanded_search",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -9808,6 +9821,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/tree_view/doubled_path",
+        "name": "doubled_path",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },