@mixtint/primer-view-components 0.75.2 → 0.84.3

package/app/components/primer/alpha/action_bar_element.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get, _ActionBarElement_eachItem;
+var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_pendingUpdate, _ActionBarElement_performUpdate, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
 import { controller, targets, target } from '@github/catalyst';
 import { focusZone, FocusKeys } from '@primer/behaviors';
 const instersectionObserver = new IntersectionObserver(entries => {
@@ -35,27 +35,21 @@ const resizeObserver = new ResizeObserver(entries => {
     }
 });
 // These are definitely used, but eslint is dumb apparently
-var ItemType;
-(function (ItemType) {
-    ItemType[ItemType["Item"] = 0] = "Item";
-    ItemType[ItemType["Divider"] = 1] = "Divider";
-})(ItemType || (ItemType = {}));
 let ActionBarElement = class ActionBarElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _ActionBarElement_instances.add(this);
         _ActionBarElement_focusZoneAbortController.set(this, null);
+        _ActionBarElement_pendingUpdate.set(this, false);
     }
     connectedCallback() {
         resizeObserver.observe(this);
         instersectionObserver.observe(this);
-        requestAnimationFrame(() => {
-            // This overflow visible is needed for browsers that don't support PopoverElement
-            // to ensure the menu and tooltips are visible when the action bar is in a collapsed state
-            // once popover is fully supported we can remove this.style.overflow = 'visible'
-            this.style.overflow = 'visible';
-            this.update();
-        });
+        // This overflow visible is needed for browsers that don't support PopoverElement
+        // to ensure the menu and tooltips are visible when the action bar is in a collapsed state
+        // once popover is fully supported we can remove this.style.overflow = 'visible'
+        this.style.overflow = 'visible';
+        this.update();
     }
     disconnectedCallback() {
         resizeObserver.unobserve(this);
@@ -69,75 +63,81 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
         }
     }
     update() {
-        const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
-        if (!firstItem)
+        if (__classPrivateFieldGet(this, _ActionBarElement_pendingUpdate, "f"))
             return;
-        const firstItemTop = firstItem.getBoundingClientRect().top;
-        let previousItemType = null;
-        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, index, type) => {
-            const itemTop = item.getBoundingClientRect().top;
-            if (type === ItemType.Item) {
-                if (itemTop > firstItemTop) {
-                    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
-                    if (this.moreMenu.hidden) {
-                        this.moreMenu.hidden = false;
-                    }
-                    if (previousItemType === ItemType.Divider) {
-                        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index - 1);
-                    }
-                }
-                else {
-                    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
-                    if (index === this.items.length - 1) {
-                        this.moreMenu.hidden = true;
-                    }
-                    if (previousItemType === ItemType.Divider) {
-                        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index - 1);
-                    }
-                }
-            }
-            previousItemType = type;
-            return true;
+        __classPrivateFieldSet(this, _ActionBarElement_pendingUpdate, true, "f");
+        requestAnimationFrame(() => {
+            __classPrivateFieldSet(this, _ActionBarElement_pendingUpdate, false, "f");
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_performUpdate).call(this);
         });
-        if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
-            __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
-        }
-        __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
-            bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-            focusOutBehavior: 'wrap',
-            focusableElementFilter: element => {
-                const idx = this.items.indexOf(element.parentElement);
-                const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
-                const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
-                return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
-            },
-        }), "f");
     }
 };
 _ActionBarElement_focusZoneAbortController = new WeakMap();
+_ActionBarElement_pendingUpdate = new WeakMap();
 _ActionBarElement_instances = new WeakSet();
-_ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
-    let foundItem = null;
-    __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, _index, type) => {
-        if (type === ItemType.Item) {
-            foundItem = item;
-            return false;
+_ActionBarElement_performUpdate = function _ActionBarElement_performUpdate() {
+    const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
+    if (!firstItem)
+        return;
+    const baseTop = firstItem.getBoundingClientRect().top;
+    const cachedMenuItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get);
+    // Snapshot geometry in one pass before mutating the DOM
+    const snapshots = Array.from(this.items, el => ({
+        top: el.getBoundingClientRect().top,
+        isDivider: el.classList.contains('ActionBar-divider'),
+    }));
+    // Apply visibility changes after all reads are complete
+    let prevWasDivider = false;
+    for (let n = 0; n < snapshots.length; n++) {
+        const snap = snapshots[n];
+        if (snap.isDivider) {
+            prevWasDivider = true;
+            continue;
+        }
+        if (snap.top > baseTop) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, n, cachedMenuItems);
+            if (this.moreMenu.hidden)
+                this.moreMenu.hidden = false;
+            if (prevWasDivider)
+                __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, n - 1, cachedMenuItems);
+        }
+        else {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, n, cachedMenuItems);
+            if (n === this.items.length - 1)
+                this.moreMenu.hidden = true;
+            if (prevWasDivider)
+                __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, n - 1, cachedMenuItems);
         }
-        return true;
-    });
-    return foundItem;
+        prevWasDivider = false;
+    }
+    if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
+        __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
+    }
+    __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
+        bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+        focusOutBehavior: 'wrap',
+        focusableElementFilter: element => {
+            const idx = this.items.indexOf(element.parentElement);
+            const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
+            const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
+            return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
+        },
+    }), "f");
+};
+_ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
+    return this.items.find(el => !el.classList.contains('ActionBar-divider')) ?? null;
 };
-_ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
+_ActionBarElement_showItem = function _ActionBarElement_showItem(index, menuItems) {
     const item = this.items[index];
-    const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
+    const menuItem = menuItems[index];
     if (!item || !menuItem)
         return;
     item.style.setProperty('visibility', 'visible');
     menuItem.hidden = true;
 };
-_ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
+_ActionBarElement_hideItem = function _ActionBarElement_hideItem(index, menuItems) {
     const item = this.items[index];
-    const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
+    const menuItem = menuItems[index];
     if (!item || !menuItem)
         return;
     item.style.setProperty('visibility', 'hidden');
@@ -146,15 +146,6 @@ _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
 _ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
     return this.moreMenu.querySelectorAll('[role="menu"] > li');
 };
-_ActionBarElement_eachItem = function _ActionBarElement_eachItem(callback) {
-    for (let i = 0; i < this.items.length; i++) {
-        const item = this.items[i];
-        const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item;
-        if (!callback(item, i, type)) {
-            break;
-        }
-    }
-};
 __decorate([
     targets
 ], ActionBarElement.prototype, "items", void 0);
@@ -165,6 +156,6 @@ __decorate([
     target
 ], ActionBarElement.prototype, "moreMenu", void 0);
 ActionBarElement = __decorate([
-    controller
+    controller('action-bar')
 ], ActionBarElement);
 window.ActionBarElement = ActionBarElement;

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

@@ -430,7 +430,7 @@ nav-list {
 .ActionListItem-visual,
 .ActionListItem-action {
   display: flex;
-  min-height: var(--control-medium-lineBoxHeight);
+  min-height: var(--base-size-20);
   color: var(--fgColor-muted);
   pointer-events: none;
   fill: var(--fgColor-muted);

package/app/components/primer/alpha/action_list.js

@@ -65,6 +65,6 @@ let ActionListElement = class ActionListElement extends HTMLElement {
 };
 _ActionListElement_truncationObserver = new WeakMap();
 ActionListElement = __decorate([
-    controller
+    controller('action-list')
 ], ActionListElement);
 export { ActionListElement };

package/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -582,7 +582,7 @@ __decorate([
     target
 ], ActionMenuElement.prototype, "list", void 0);
 ActionMenuElement = ActionMenuElement_1 = __decorate([
-    controller
+    controller('action-menu')
 ], ActionMenuElement);
 export { ActionMenuElement };
 if (!window.customElements.get('action-menu')) {

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

@@ -354,6 +354,18 @@ dialog.Overlay:not([open]) {
     border-radius: unset !important;
     flex-grow: 1;
   }
+
+  .Overlay--fullscreen-whenNarrow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    max-width: none !important;
+    height: 100vh;
+    max-height: none !important;
+    margin: 0;
+    border-radius: unset !important;
+  }
 }
 @keyframes Overlay--motion-slideDown {
   from {

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

@@ -61,6 +61,7 @@
     ".Overlay--placement-right-whenNarrow",
     ".Overlay.Overlay--placement-right-whenNarrow",
     ".Overlay.Overlay--placement-bottom-whenNarrow",
-    ".Overlay--full-whenNarrow"
+    ".Overlay--full-whenNarrow",
+    ".Overlay--fullscreen-whenNarrow"
   ]
 }

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

@@ -50,7 +50,7 @@ __decorate([
     targets
 ], SegmentedControlElement.prototype, "items", void 0);
 SegmentedControlElement = __decorate([
-    controller
+    controller('segmented-control')
 ], SegmentedControlElement);
 export { SegmentedControlElement };
 if (!window.customElements.get('segmented-control')) {

package/app/components/primer/alpha/select_panel_element.js

@@ -84,7 +84,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
         return this.getAttribute('data-select-variant');
     }
     get ariaSelectionType() {
-        return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected';
+        return 'aria-selected';
     }
     set selectVariant(variant) {
         if (variant) {
@@ -775,6 +775,8 @@ _SelectPanelElement_performFilteringLocally = function _SelectPanelElement_perfo
     return __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL || __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.EVENTUALLY_LOCAL;
 };
 _SelectPanelElement_handleInvokerActivated = function _SelectPanelElement_handleInvokerActivated(event) {
+    // Let listeners observe the invoker was clicked
+    this.invokerElement?.dispatchEvent(new CustomEvent('invokerClicked', { bubbles: true }));
     event.preventDefault();
     // eslint-disable-next-line no-restricted-syntax
     event.stopPropagation();
@@ -987,7 +989,7 @@ __decorate([
     target
 ], SelectPanelElement.prototype, "liveRegion", void 0);
 SelectPanelElement = __decorate([
-    controller
+    controller('select-panel')
 ], SelectPanelElement);
 export { SelectPanelElement };
 if (!window.customElements.get('select-panel')) {

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

@@ -13,9 +13,16 @@
   display: flex;
   /* stylelint-disable-next-line primer/spacing */
   margin-bottom: calc(var(--borderWidth-thin) * -1);
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* stylelint-disable-next-line selector-max-type */
 }
 
+.tabnav-tabs > li {
+    flex-shrink: 0;
+  }
+
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;

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

@@ -3,6 +3,7 @@
   "selectors": [
     ".tabnav",
     ".tabnav-tabs",
+    ".tabnav-tabs > li",
     ".tabnav-tab",
     ".tabnav-tab.selected",
     ".tabnav-tab[aria-selected='true']",

package/app/components/primer/alpha/toggle_switch.js

@@ -171,7 +171,7 @@ __decorate([
     attr
 ], ToggleSwitchElement.prototype, "turbo", void 0);
 ToggleSwitchElement = __decorate([
-    controller
+    controller('toggle-switch')
 ], ToggleSwitchElement);
 if (!window.customElements.get('toggle-switch')) {
     window.ToggleSwitchElement = ToggleSwitchElement;

package/app/components/primer/alpha/tool_tip.js

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControl, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_isControlsPopoverOpen, _ToolTipElement_update, _ToolTipElement_updateControl, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
 import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
 const isPopoverOpen = (() => {
@@ -78,6 +78,7 @@ class ToolTipElement extends HTMLElement {
         _ToolTipElement_side.set(this, 'outside-bottom');
         _ToolTipElement_allowUpdatePosition.set(this, false);
         _ToolTipElement_showReason.set(this, 'mouse');
+        _ToolTipElement_isControlsPopoverOpen.set(this, false);
     }
     styles() {
         return `
@@ -98,7 +99,7 @@ class ToolTipElement extends HTMLElement {
         border-radius: var(--borderRadius-medium);
         border: 0 !important;
         opacity: 0;
-        max-width: var(--overlay-width-small);
+        max-width: min(var(--overlay-width-small), 100vw);
         word-wrap: break-word;
         white-space: normal;
         width: max-content !important;
@@ -244,18 +245,24 @@ class ToolTipElement extends HTMLElement {
         if (!this.control)
             return;
         const showing = isPopoverOpen(this);
+        // Track when the control's popover (e.g an ActionMenu) is opened/closed
+        if (event.type === 'beforetoggle' && event.currentTarget !== this) {
+            __classPrivateFieldSet(this, _ToolTipElement_isControlsPopoverOpen, event.newState === 'open', "f");
+        }
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        const shouldShow = event.type === 'mouseenter' ||
+        const shouldShow = (event.type === 'mouseenter' ||
             // Only show tooltip on focus if running in headless browser (for tests) or if focus ring
             // is visible (i.e. if user is using keyboard navigation)
-            (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')));
+            (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')))) &&
+            // Don't show tooltip if the control's popover is open (e.g. an ActionMenu)
+            !__classPrivateFieldGet(this, _ToolTipElement_isControlsPopoverOpen, "f");
         const isMouseLeaveFromButton = event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this;
         const isEscapeKeydown = event.type === 'keydown' && event.key === 'Escape';
         const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
-        const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
+        const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this && event.newState === 'open';
         const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
         if (showing && isEscapeKeydown) {
             /* eslint-disable-next-line no-restricted-syntax */
@@ -288,7 +295,7 @@ class ToolTipElement extends HTMLElement {
         }
     }
 }
-_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_showReason = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_showReason = new WeakMap(), _ToolTipElement_isControlsPopoverOpen = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
     if (isOpen) {
         openTooltips.add(this);
         this.classList.remove(TOOLTIP_SR_ONLY_CLASS);

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

@@ -38,6 +38,7 @@ export declare class TreeViewElement extends HTMLElement {
     changeSelectStrategy(newStrategy: SelectStrategy): void;
     infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
     selectVariant(node: Element): SelectVariant;
+    updateHiddenFormInputs(): void;
 }
 declare global {
     interface Window {

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

@@ -56,28 +56,17 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             });
             if (!somethingChanged)
                 return;
-            const newInputs = [];
-            // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
-            for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
-                const newInput = this.formInputPrototype.cloneNode();
-                newInput.removeAttribute('data-target');
-                newInput.removeAttribute('form');
-                const payload = {
-                    path: this.getNodePath(node),
-                };
-                const inputValue = this.getFormInputValueForNode(node);
-                if (inputValue)
-                    payload.value = inputValue;
-                newInput.value = JSON.stringify(payload);
-                newInputs.push(newInput);
-            }
-            this.formInputContainer.replaceChildren(...newInputs);
+            this.updateHiddenFormInputs();
         });
         updateInputsObserver.observe(this, {
             childList: true,
             subtree: true,
             attributeFilter: ['aria-checked'],
         });
+        // Correctly initialize the form
+        if (this.formInputContainer) {
+            this.updateHiddenFormInputs();
+        }
         // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
         customElements.whenDefined('tree-view-sub-tree-node').then(() => {
             // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
@@ -117,9 +106,10 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         }));
         if (!checkSuccess)
             return;
-        const currentlyChecked = !this.getNodeCheckedValue(node);
-        // disallow unchecking checked item in single-select mode
-        if (!currentlyChecked) {
+        if (this.getNodeCheckedValue(node) === 'true') {
+            this.setNodeCheckedValue(node, 'false');
+        }
+        else {
             this.checkOnlyAtPath(path);
         }
         this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {
@@ -286,6 +276,24 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
     selectVariant(node) {
         return (node.getAttribute('data-select-variant') || 'none');
     }
+    updateHiddenFormInputs() {
+        const newInputs = [];
+        // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+        for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+            const newInput = this.formInputPrototype.cloneNode();
+            newInput.removeAttribute('data-target');
+            newInput.removeAttribute('form');
+            const payload = {
+                path: this.getNodePath(node),
+            };
+            const inputValue = this.getFormInputValueForNode(node);
+            if (inputValue)
+                payload.value = inputValue;
+            newInput.value = JSON.stringify(payload);
+            newInputs.push(newInput);
+        }
+        this.formInputContainer.replaceChildren(...newInputs);
+    }
 };
 _TreeViewElement_abortController = new WeakMap();
 _TreeViewElement_instances = new WeakSet();
@@ -432,7 +440,7 @@ __decorate([
     target
 ], TreeViewElement.prototype, "formInputPrototype", void 0);
 TreeViewElement = __decorate([
-    controller
+    controller('tree-view')
 ], TreeViewElement);
 export { TreeViewElement };
 if (!window.customElements.get('tree-view')) {

package/app/components/primer/alpha/tree_view/tree_view_icon_pair_element.js

@@ -53,7 +53,7 @@ __decorate([
     target
 ], TreeViewIconPairElement.prototype, "collapsedIcon", void 0);
 TreeViewIconPairElement = __decorate([
-    controller
+    controller('tree-view-icon-pair')
 ], TreeViewIconPairElement);
 export { TreeViewIconPairElement };
 if (!window.customElements.get('tree-view-icon-pair')) {

package/app/components/primer/alpha/tree_view/tree_view_include_fragment_element.js

@@ -19,7 +19,7 @@ let TreeViewIncludeFragmentElement = class TreeViewIncludeFragmentElement extend
     }
 };
 TreeViewIncludeFragmentElement = __decorate([
-    controller
+    controller('tree-view-include-fragment')
 ], TreeViewIncludeFragmentElement);
 export { TreeViewIncludeFragmentElement };
 if (!window.customElements.get('tree-view-include-fragment')) {

package/app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_expanded, _TreeViewSubTreeNodeElement_loadingState, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_checkboxElement_get;
+var _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_expanded, _TreeViewSubTreeNodeElement_loadingState, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_isIncludeFragment, _TreeViewSubTreeNodeElement_checkboxElement_get;
 import { controller, target } from '@github/catalyst';
 import { observeMutationsUntilConditionMet } from '../../utils';
 let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLElement {
@@ -140,6 +140,10 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
             // sub-tree and no node in the entire tree can be focused
             const previousNode = this.subTree.querySelector("[tabindex='0']");
             previousNode?.setAttribute('tabindex', '-1');
+            // Also check if the subtree element itself is an include-fragment with role="treeitem" and has focus
+            if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this) && this.subTree.getAttribute('tabindex') === '0') {
+                this.subTree.setAttribute('tabindex', '-1');
+            }
             this.node.setAttribute('tabindex', '0');
             this.treeView.dispatchEvent(new CustomEvent('treeViewNodeCollapsed', {
                 bubbles: true,
@@ -251,6 +255,10 @@ _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent = function _TreeViewSubTr
         // request succeeded but element has not yet been replaced
         case 'include-fragment-replace':
             __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, document.activeElement === this.loadingIndicator.closest('[role=treeitem]'), "f");
+            // Also check if the include-fragment itself has focus (when it has role="treeitem")
+            if (!__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, "f") && document.activeElement === this.subTree && __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+                __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, true, "f");
+            }
             this.loadingState = 'success';
             break;
         case 'include-fragment-replaced':
@@ -354,6 +362,13 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
     if (this.expanded) {
         if (this.subTree)
             this.subTree.hidden = false;
+        if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+            this.subTree.setAttribute('role', 'treeitem');
+            // Ensure the include-fragment can participate in roving tab index
+            if (!this.subTree.hasAttribute('tabindex')) {
+                this.subTree.setAttribute('tabindex', '-1');
+            }
+        }
         this.node.setAttribute('aria-expanded', 'true');
         this.treeView?.expandAncestorsForNode(this);
         if (this.iconPair) {
@@ -367,6 +382,11 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
     else {
         if (this.subTree)
             this.subTree.hidden = true;
+        if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+            this.subTree.removeAttribute('role');
+            // Remove tabindex when role is removed
+            this.subTree.removeAttribute('tabindex');
+        }
         this.node.setAttribute('aria-expanded', 'false');
         if (this.iconPair) {
             this.iconPair.showCollapsed();
@@ -397,6 +417,9 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
                 this.loadingFailureMessage.hidden = true;
     }
 };
+_TreeViewSubTreeNodeElement_isIncludeFragment = function _TreeViewSubTreeNodeElement_isIncludeFragment() {
+    return this.subTree?.getAttribute('data-target')?.includes('tree-view-sub-tree-node.includeFragment') ?? false;
+};
 _TreeViewSubTreeNodeElement_checkboxElement_get = function _TreeViewSubTreeNodeElement_checkboxElement_get() {
     return this.querySelector('.TreeViewItemCheckbox');
 };
@@ -431,7 +454,7 @@ __decorate([
     target
 ], TreeViewSubTreeNodeElement.prototype, "retryButton", void 0);
 TreeViewSubTreeNodeElement = __decorate([
-    controller
+    controller('tree-view-sub-tree-node')
 ], TreeViewSubTreeNodeElement);
 export { TreeViewSubTreeNodeElement };
 if (!window.customElements.get('tree-view-sub-tree-node')) {

package/app/components/primer/alpha/x_banner.js

@@ -43,7 +43,7 @@ __decorate([
     target
 ], XBannerElement.prototype, "titleText", void 0);
 XBannerElement = __decorate([
-    controller
+    controller('x-banner')
 ], XBannerElement);
 if (!window.customElements.get('x-banner')) {
     window.XBannerElement = XBannerElement;