@openproject/primer-view-components 0.0.0-20230808124600

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

@@ -0,0 +1,172 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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 __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _ActionBarElement_instances, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_focusZoneAbortController, _ActionBarElement_itemGap, _ActionBarElement_availableSpace, _ActionBarElement_menuSpace, _ActionBarElement_shrink, _ActionBarElement_grow, _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 => {
+    for (const entry of entries) {
+        const action = entry.target;
+        if (entry.isIntersecting && action instanceof ActionBarElement) {
+            action.update();
+        }
+    }
+});
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        const action = entry.target;
+        if (action instanceof ActionBarElement) {
+            action.update(entry.contentRect);
+        }
+    }
+});
+let ActionBarElement = class ActionBarElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionBarElement_instances.add(this);
+        _ActionBarElement_initialBarWidth.set(this, void 0);
+        _ActionBarElement_previousBarWidth.set(this, void 0);
+        _ActionBarElement_focusZoneAbortController.set(this, null);
+    }
+    connectedCallback() {
+        var _a, _b, _c, _d;
+        __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, (_a = this.offsetWidth) !== null && _a !== void 0 ? _a : Infinity, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, (_b = this.itemContainer.offsetWidth) !== null && _b !== void 0 ? _b : Infinity, "f");
+        // Calculate the width of all the items before hiding anything
+        for (const item of this.items) {
+            const width = item.getBoundingClientRect().width;
+            const marginLeft = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginLeft, 10);
+            const marginRight = parseInt((_d = window.getComputedStyle(item)) === null || _d === void 0 ? void 0 : _d.marginRight, 10);
+            item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
+        }
+        resizeObserver.observe(this);
+        instersectionObserver.observe(this);
+        setTimeout(() => {
+            this.style.overflow = 'visible';
+            this.update();
+        }, 20); // Wait for the items to be rendered, making this really short to avoid a flash of unstyled content
+    }
+    disconnectedCallback() {
+        resizeObserver.unobserve(this);
+        instersectionObserver.unobserve(this);
+    }
+    menuItemClick(event) {
+        var _a;
+        const currentTarget = event.currentTarget;
+        const id = currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.getAttribute('data-for');
+        if (id) {
+            (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }
+    update(rect = this.getBoundingClientRect()) {
+        // Only recalculate if the bar width changed
+        if (rect.width <= __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f") || __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f") === 0) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrink).call(this);
+        }
+        else if (rect.width > __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f")) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_grow).call(this);
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, rect.width, "f");
+        if (rect.width <= __classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f")) {
+            this.style.justifyContent = 'space-between';
+        }
+        else {
+            this.style.justifyContent = 'flex-end';
+        }
+        if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
+            __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this.itemContainer, {
+            bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+            focusOutBehavior: 'wrap',
+            focusableElementFilter: element => {
+                return !element.closest('.ActionBar-item[hidden]');
+            }
+        }), "f");
+    }
+};
+_ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_focusZoneAbortController = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_itemGap = function _ActionBarElement_itemGap() {
+    var _a;
+    return parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0;
+}, _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
+    // Get the offset of the item container from the container edge
+    return this.offsetWidth - this.itemContainer.offsetWidth;
+}, _ActionBarElement_menuSpace = function _ActionBarElement_menuSpace() {
+    if (this.moreMenu.hidden) {
+        return 0;
+    }
+    return this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_itemGap).call(this);
+}, _ActionBarElement_shrink = function _ActionBarElement_shrink() {
+    if (this.items[0].hidden) {
+        return;
+    }
+    let index = this.items.length - 1;
+    for (const item of this.items.reverse()) {
+        if (!item.hidden && __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this)) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
+        }
+        else if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this)) {
+            return;
+        }
+        index--;
+    }
+}, _ActionBarElement_grow = function _ActionBarElement_grow() {
+    // If last item is visible, there is no need to grow
+    if (!this.items[this.items.length - 1].hidden) {
+        return;
+    }
+    let index = 0;
+    for (const item of this.items) {
+        if (item.hidden) {
+            const offsetWidth = Number(item.getAttribute('data-offset-width'));
+            if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_menuSpace).call(this) + offsetWidth || index === this.items.length - 1) {
+                __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
+            }
+            else {
+                return;
+            }
+        }
+        index++;
+    }
+    if (!this.items[this.items.length - 1].hidden) {
+        this.moreMenu.hidden = true;
+    }
+}, _ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
+    this.items[index].hidden = false;
+    __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = true;
+}, _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
+    this.items[index].hidden = true;
+    __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index].hidden = false;
+    if (this.moreMenu.hidden) {
+        this.moreMenu.hidden = false;
+    }
+}, _ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
+    return this.moreMenu.querySelectorAll('[role="menu"] > li');
+};
+__decorate([
+    targets
+], ActionBarElement.prototype, "items", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "itemContainer", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "moreMenu", void 0);
+ActionBarElement = __decorate([
+    controller
+], ActionBarElement);
+window.ActionBarElement = ActionBarElement;

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

@@ -0,0 +1 @@
+:root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-fg));border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-fg));border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,6px);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-fg));border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.66667)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}

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

@@ -0,0 +1,134 @@
+{
+  "name": "alpha/action_list",
+  "selectors": [
+    ":root",
+    ".ActionListHeader",
+    ".ActionListWrap",
+    ".ActionListWrap--inset",
+    ".ActionListWrap--divided .ActionListItem-label:before",
+    ".ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before",
+    ".ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before",
+    ".ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before",
+    ".ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before",
+    ".ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before",
+    ".ActionListItem:first-of-type .ActionListItem-label:before",
+    ".ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before",
+    ".ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before",
+    ".ActionListItem",
+    ".ActionListItem:active",
+    ".ActionListItem:hover",
+    ".ActionListItem:hover .ActionListItem-descriptionWrap--inline:before",
+    ".ActionListItem:hover .ActionListItem-label:before",
+    ".ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before",
+    ".ActionListItem:hover+.ActionListItem .ActionListItem-label:before",
+    ".ActionListItem[hidden]+.ActionList-sectionDivider",
+    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent",
+    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover",
+    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):hover",
+    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible)",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible)",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):active",
+    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive)",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive)",
+    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before",
+    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before",
+    ".ActionListItem[aria-selected=true]",
+    ".ActionListItem[aria-selected=true]:hover",
+    ".ActionListItem[aria-selected=true]+.ActionListItem:before",
+    ".ActionListItem[aria-selected=true]:before",
+    ".ActionListItem[aria-selected=true]:after",
+    ".ActionListItem.ActionListItem--navActive",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after",
+    ".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description",
+    ".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label",
+    ".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description",
+    ".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label",
+    ".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual",
+    ".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual",
+    ".ActionListItem.ActionListItem--disabled:hover",
+    ".ActionListItem[aria-disabled=true]:hover",
+    ".ActionListItem.ActionListItem--danger .ActionListItem-label",
+    ".ActionListItem.ActionListItem--danger .ActionListItem-visual",
+    ".ActionListItem.ActionListItem--danger:hover",
+    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-description",
+    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-label",
+    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-visual",
+    ".ActionListItem.ActionListItem--danger .ActionListContent:active",
+    ".ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description",
+    ".ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label",
+    ".ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual",
+    ".ActionListContent",
+    ".ActionListContent>:not(:last-child)",
+    ".ActionListContent:hover",
+    ".ActionListContent[aria-disabled=true] .ActionListItem-description",
+    ".ActionListContent[aria-disabled=true] .ActionListItem-label",
+    ".ActionListContent[aria-disabled=true] .ActionListItem-visual",
+    ".ActionListContent[aria-disabled=true]:hover",
+    ".ActionListContent[aria-expanded]+.ActionList--subGroup",
+    ".ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent",
+    ".ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent",
+    ".ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent",
+    ".ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent",
+    ".ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon",
+    ".ActionListContent[aria-expanded=true]+.ActionList--subGroup",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label",
+    ".ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon",
+    ".ActionListContent[aria-expanded=false]+.ActionList--subGroup",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after",
+    ".ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect",
+    ".ActionListContent.ActionListContent--sizeLarge",
+    ".ActionListContent.ActionListContent--sizeXLarge",
+    ".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",
+    ".ActionListItem-action--leading",
+    ".ActionListItem-visual--leading",
+    ".ActionListItem-visual--trailing",
+    ".ActionListItem-action--trailing",
+    ".ActionListItem-descriptionWrap",
+    ".ActionListItem-descriptionWrap .ActionListItem-label",
+    ".ActionListItem-descriptionWrap--inline",
+    ".ActionListItem-description",
+    ".ActionListItem-action",
+    ".ActionListItem-visual",
+    ".ActionListItem-label",
+    ".ActionListItem-label--truncate",
+    ".ActionListItem--subItem>.ActionListContent>.ActionListItem-label",
+    ".ActionListItem--withActions",
+    ".ActionListItem-trailingAction",
+    ".ActionListItem--trailingActionHover .ActionListItem-trailingAction",
+    ".ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction",
+    ".ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction",
+    ".ActionList-sectionDivider:not(:empty)",
+    ".ActionList-sectionDivider:empty",
+    ".ActionList-sectionDivider .ActionList-sectionDivider-title",
+    ".ActionList-sectionDivider--filled",
+    ".ActionList-sectionDivider--filled:empty",
+    ".ActionList-sectionDivider--filled:first-child"
+  ]
+}

package/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -0,0 +1,31 @@
+import '@oddbird/popover-polyfill';
+import type { IncludeFragmentElement } from '@github/include-fragment-element';
+type SelectVariant = 'none' | 'single' | 'multiple' | null;
+type SelectedItem = {
+    label: string | null | undefined;
+    value: string | null | undefined;
+    element: Element;
+};
+export declare class ActionMenuElement extends HTMLElement {
+    #private;
+    includeFragment: IncludeFragmentElement;
+    get selectVariant(): SelectVariant;
+    set selectVariant(variant: SelectVariant);
+    get dynamicLabelPrefix(): string;
+    set dynamicLabelPrefix(value: string);
+    get dynamicLabel(): boolean;
+    set dynamicLabel(value: boolean);
+    get popoverElement(): HTMLElement | null;
+    get invokerElement(): HTMLButtonElement | null;
+    get invokerLabel(): HTMLElement | null;
+    get selectedItems(): SelectedItem[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+}
+declare global {
+    interface Window {
+        ActionMenuElement: typeof ActionMenuElement;
+    }
+}
+export {};

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

@@ -0,0 +1,241 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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 __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_isActivationKeydown, _ActionMenuElement_firstItem_get;
+import { controller, target } from '@github/catalyst';
+import '@oddbird/popover-polyfill';
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
+let ActionMenuElement = class ActionMenuElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionMenuElement_instances.add(this);
+        _ActionMenuElement_abortController.set(this, void 0);
+        _ActionMenuElement_originalLabel.set(this, '');
+        _ActionMenuElement_inputName.set(this, '');
+    }
+    get selectVariant() {
+        return this.getAttribute('data-select-variant');
+    }
+    set selectVariant(variant) {
+        if (variant) {
+            this.setAttribute('data-select-variant', variant);
+        }
+        else {
+            this.removeAttribute('variant');
+        }
+    }
+    get dynamicLabelPrefix() {
+        const prefix = this.getAttribute('data-dynamic-label-prefix');
+        if (!prefix)
+            return '';
+        return `${prefix}:`;
+    }
+    set dynamicLabelPrefix(value) {
+        this.setAttribute('data-dynamic-label', value);
+    }
+    get dynamicLabel() {
+        return this.hasAttribute('data-dynamic-label');
+    }
+    set dynamicLabel(value) {
+        this.toggleAttribute('data-dynamic-label', value);
+    }
+    get popoverElement() {
+        var _a;
+        return ((_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.popoverTargetElement) || null;
+    }
+    get invokerElement() {
+        var _a;
+        const id = (_a = this.querySelector('[role=menu]')) === null || _a === void 0 ? void 0 : _a.id;
+        if (!id)
+            return null;
+        for (const el of this.querySelectorAll(`[aria-controls]`)) {
+            if (el.getAttribute('aria-controls') === id)
+                return el;
+        }
+        return null;
+    }
+    get invokerLabel() {
+        if (!this.invokerElement)
+            return null;
+        return this.invokerElement.querySelector('.Button-label');
+    }
+    get selectedItems() {
+        const selectedItems = this.querySelectorAll('[aria-checked=true]');
+        const results = [];
+        for (const selectedItem of selectedItems) {
+            const labelEl = selectedItem.querySelector('.ActionListItem-label');
+            results.push({
+                label: labelEl === null || labelEl === void 0 ? void 0 : labelEl.textContent,
+                value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getAttribute('data-value'),
+                element: selectedItem
+            });
+        }
+        return results;
+    }
+    connectedCallback() {
+        const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
+        this.addEventListener('keydown', this, { signal });
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('mouseover', this, { signal });
+        this.addEventListener('focusout', this, { signal });
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+        if (this.includeFragment) {
+            this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
+        }
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
+    }
+    handleEvent(event) {
+        var _a, _b;
+        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event)) {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
+                event.preventDefault();
+                (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+                return;
+            }
+        }
+        if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(':popover-open')))
+            return;
+        if (event.type === 'include-fragment-replaced') {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+        }
+        else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
+            // Hide popover after current event loop to prevent changes in focus from
+            // altering the target of the event. Not doing this specifically affects
+            // <a> tags. It causes the event to be sent to the currently focused element
+            // instead of the anchor, which effectively prevents navigation, i.e. it
+            // appears as if hitting enter does nothing. Curiously, clicking instead
+            // works fine.
+            if (this.selectVariant !== 'multiple') {
+                setTimeout(() => {
+                    var _a, _b;
+                    if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
+                        (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
+                    }
+                });
+            }
+            // The rest of the code below deals with single/multiple selection behavior, and should not
+            // interfere with events fired by menu items whose behavior is specified outside the library.
+            if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
+                return;
+            const item = event.target.closest(menuItemSelectors.join(','));
+            if (!item)
+                return;
+            const ariaChecked = item.getAttribute('aria-checked');
+            const checked = ariaChecked !== 'true';
+            if (this.selectVariant === 'single') {
+                // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+                if (checked) {
+                    item.setAttribute('aria-checked', 'true');
+                }
+                for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
+                    if (checkedItem !== item) {
+                        checkedItem.setAttribute('aria-checked', 'false');
+                    }
+                }
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
+            }
+            else {
+                // multi-select mode allows unchecking a checked item
+                item.setAttribute('aria-checked', `${checked}`);
+            }
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+            if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+                // prevent buttons from being clicked twice
+                event.preventDefault();
+            }
+        }
+    }
+};
+_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_inputName = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+    if (!this.dynamicLabel)
+        return;
+    const invokerLabel = this.invokerLabel;
+    if (!invokerLabel)
+        return;
+    __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
+    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
+    if (itemLabel && this.dynamicLabel) {
+        const prefixSpan = document.createElement('span');
+        prefixSpan.classList.add('color-fg-muted');
+        const contentSpan = document.createElement('span');
+        prefixSpan.textContent = this.dynamicLabelPrefix;
+        contentSpan.textContent = itemLabel.textContent || '';
+        invokerLabel.replaceChildren(prefixSpan, contentSpan);
+    }
+    else {
+        invokerLabel.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
+    }
+}, _ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
+    if (this.selectVariant === 'single') {
+        const input = this.querySelector(`[data-list-inputs=true] input`);
+        if (!input)
+            return;
+        const selectedItem = this.selectedItems[0];
+        if (selectedItem) {
+            input.value = (selectedItem.value || selectedItem.label || '').trim();
+            input.removeAttribute('disabled');
+        }
+        else {
+            input.setAttribute('disabled', 'disabled');
+        }
+    }
+    else if (this.selectVariant !== 'none') {
+        // multiple select variant
+        const inputList = this.querySelector('[data-list-inputs=true]');
+        if (!inputList)
+            return;
+        const inputs = inputList.querySelectorAll('input');
+        if (inputs.length > 0) {
+            __classPrivateFieldSet(this, _ActionMenuElement_inputName, __classPrivateFieldGet(this, _ActionMenuElement_inputName, "f") || inputs[0].name, "f");
+        }
+        for (const selectedItem of this.selectedItems) {
+            const newInput = document.createElement('input');
+            newInput.setAttribute('data-list-input', 'true');
+            newInput.type = 'hidden';
+            newInput.autocomplete = 'off';
+            newInput.name = __classPrivateFieldGet(this, _ActionMenuElement_inputName, "f");
+            newInput.value = (selectedItem.value || selectedItem.label || '').trim();
+            inputList.append(newInput);
+        }
+        for (const input of inputs) {
+            input.remove();
+        }
+    }
+}, _ActionMenuElement_isActivationKeydown = function _ActionMenuElement_isActivationKeydown(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        (event.key === 'Enter' || event.key === ' '));
+}, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
+    return this.querySelector(menuItemSelectors.join(','));
+};
+__decorate([
+    target
+], ActionMenuElement.prototype, "includeFragment", void 0);
+ActionMenuElement = __decorate([
+    controller
+], ActionMenuElement);
+export { ActionMenuElement };
+if (!window.customElements.get('action-menu')) {
+    window.ActionMenuElement = ActionMenuElement;
+    window.customElements.define('action-menu', ActionMenuElement);
+}

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

@@ -0,0 +1 @@
+.autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium));font-size:13px;left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:0;color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{color:inherit!important}