@openproject/primer-view-components 0.82.1 → 0.83.0-rc.0d7454d16

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.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

@@ -1 +1 @@
-@property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
+@property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}.Overlay--fullscreen-whenNarrow{border-radius:unset!important;height:100vh;left:0;margin:0;max-height:none!important;max-width:none!important;position:fixed;top:0;width:100vw}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}

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

@@ -61,6 +61,7 @@
     ".Overlay.Overlay--placement-left-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

@@ -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/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

@@ -99,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;

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

@@ -440,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;

package/app/components/primer/beta/blankslate.css

@@ -1 +1 @@
-.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large);margin:auto;max-width:56rem}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:var(--base-size-2) var(--base-size-4) var(--base-size-4)}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);margin-right:var(--control-small-gap)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);margin-bottom:var(--base-size-4)}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal) 0}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}
+.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large);margin:auto;max-width:56rem}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:var(--base-size-2) var(--base-size-4) var(--base-size-4)}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);margin-right:var(--control-small-gap)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);margin-bottom:var(--base-size-4);text-wrap:balance}.blankslate-description{text-wrap:balance}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal) 0}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}

package/app/components/primer/beta/blankslate.css.json

@@ -9,6 +9,7 @@
     ".blankslate-icon",
     ".blankslate-image",
     ".blankslate-heading",
+    ".blankslate-description",
     ".blankslate-action",
     ".blankslate-action:first-of-type",
     ".blankslate-action:last-of-type",

package/app/components/primer/beta/details_toggle_element.js

@@ -60,6 +60,6 @@ __decorate([
     target
 ], DetailsToggleElement.prototype, "summaryTarget", void 0);
 DetailsToggleElement = __decorate([
-    controller
+    controller('details-toggle')
 ], DetailsToggleElement);
 window.DetailsToggleElement = DetailsToggleElement;

package/app/components/primer/beta/nav_list.js

@@ -187,6 +187,6 @@ __decorate([
     target
 ], NavListElement.prototype, "topLevelList", void 0);
 NavListElement = __decorate([
-    controller
+    controller('nav-list')
 ], NavListElement);
 export { NavListElement };

package/app/components/primer/beta/nav_list_group_element.js

@@ -105,7 +105,7 @@ __decorate([
     targets
 ], NavListGroupElement.prototype, "focusMarkers", void 0);
 NavListGroupElement = __decorate([
-    controller
+    controller('nav-list-group')
 ], NavListGroupElement);
 export { NavListGroupElement };
 window.NavListGroupElement = NavListGroupElement;

package/app/components/primer/dialog_helper.js

@@ -10,6 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
+function setScrollGutter(doc) {
+    if (doc.body.style.getPropertyValue('--dialog-scrollgutter'))
+        return;
+    doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
+}
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
     const button = target?.closest('button');
@@ -20,25 +25,35 @@ function dialogInvokerButtonHandler(event) {
     if (dialogId) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
+            setScrollGutter(dialog.ownerDocument);
             dialog.showModal();
             // A buttons default behaviour in some browsers it to send a pointer event
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
-            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-            // any popover that is currently open, regardless of whether or not another top layer element,
-            // such as a <dialog> is nested inside.
-            // See https://github.com/whatwg/html/issues/9998.
-            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
-            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            // When a <dialog> is opened with showModal() from inside a popover with popover="auto",
+            // there are two related issues:
+            //
+            // 1. In older browsers (e.g. Chrome 122), the "hide all popovers" algorithm runs when a
+            //    top layer element opens, closing any ancestor popover. We must re-open those popovers.
+            //    See https://github.com/whatwg/html/issues/9998,
+            //    fixed by https://github.com/whatwg/html/pull/10116.
+            //
+            // 2. In newer browsers where the popover stays open, the popover="auto" behavior still
+            //    interferes with the native <dialog> focus trap, causing focus to escape the dialog
+            //    when tabbing past the last focusable element. Converting the popover to "manual"
+            //    prevents this interference.
+            //
+            // In both cases, the fix is the same: convert ancestor auto popovers to manual.
             let node = button;
             let fixed = false;
             while (node) {
-                node = node.parentElement?.closest('[popover]:not(:popover-open)');
+                node = node.parentElement?.closest('[popover]');
                 if (node && node.popover === 'auto') {
                     node.classList.add('dialog-inside-popover-fix');
                     node.popover = 'manual';
+                    // Changing popover from "auto" to "manual" closes the popover,
+                    // so we need to re-show it regardless of whether it was previously open.
                     node.showPopover();
                     fixed = true;
                 }
@@ -83,7 +98,6 @@ export class DialogHelperElement extends HTMLElement {
         const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
         document.addEventListener('click', dialogInvokerButtonHandler, true);
         document.addEventListener('click', this, { signal });
-        this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
         new MutationObserver(records => {
             for (const record of records) {
                 if (record.target === this.dialog) {
@@ -123,6 +137,7 @@ _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_insta
         // eslint-disable-next-line no-restricted-syntax
         this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
         this.dialog.close();
+        setScrollGutter(this.dialog.ownerDocument);
         this.dialog.showModal();
     }
 };

package/app/components/primer/scrollable_region.js

@@ -46,7 +46,7 @@ __decorate([
     attr
 ], ScrollableRegionElement.prototype, "labelledBy", void 0);
 ScrollableRegionElement = __decorate([
-    controller
+    controller('scrollable-region')
 ], ScrollableRegionElement);
 export { ScrollableRegionElement };
 window.ScrollableRegionElement = ScrollableRegionElement;

package/app/lib/primer/forms/primer_multi_input.js

@@ -35,7 +35,7 @@ __decorate([
     targets
 ], PrimerMultiInputElement.prototype, "fields", void 0);
 PrimerMultiInputElement = __decorate([
-    controller
+    controller('primer-multi-input')
 ], PrimerMultiInputElement);
 export { PrimerMultiInputElement };
 if (!window.customElements.get('primer-multi-input')) {

package/app/lib/primer/forms/primer_text_area.js

@@ -44,7 +44,7 @@ __decorate([
     target
 ], PrimerTextAreaElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextAreaElement = __decorate([
-    controller
+    controller('primer-text-area')
 ], PrimerTextAreaElement);
 export { PrimerTextAreaElement };
 if (!window.customElements.get('primer-text-area')) {

package/app/lib/primer/forms/primer_text_field.js

@@ -128,6 +128,6 @@ __decorate([
     target
 ], PrimerTextFieldElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextFieldElement = __decorate([
-    controller
+    controller('primer-text-field')
 ], PrimerTextFieldElement);
 export { PrimerTextFieldElement };

package/app/lib/primer/forms/toggle_switch_input.js

@@ -29,6 +29,6 @@ __decorate([
     target
 ], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
 ToggleSwitchInputElement = __decorate([
-    controller
+    controller('toggle-switch-input')
 ], ToggleSwitchInputElement);
 export { ToggleSwitchInputElement };