primer_view_components 0.1.5 → 0.1.7

data/app/components/primer/alpha/action_list.pcss

@@ -1,5 +1,5 @@
 :root {
-  --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);
+  --actionListContent-paddingBlock: var(--control-medium-paddingBlock, 6px);
 }
 
 /* ActionList */
@@ -18,7 +18,7 @@
 .ActionListWrap--divided {
   & .ActionListItem-label::before {
     position: absolute;
-    top: calc(-1 * var(--primer-actionListContent-paddingBlock));
+    top: calc(-1 * var(--actionListContent-paddingBlock));
     display: block;
     width: 100%;
     height: 1px;
@@ -30,10 +30,10 @@
   & .ActionListItem-descriptionWrap--inline {
     &::before {
       position: absolute;
-      top: calc(-1 * var(--primer-actionListContent-paddingBlock));
+      top: calc(-1 * var(--actionListContent-paddingBlock));
       display: block;
       width: 100%;
-      height: var(--primer-borderWidth-thin, 1px);
+      height: var(--borderWidth-thin, 1px);
       content: '';
       background: var(--color-action-list-item-inline-divider);
     }
@@ -71,7 +71,7 @@
   position: relative;
   list-style: none;
   background-color: transparent;
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
 
   /* state */
 
@@ -129,9 +129,9 @@
 
         &:not(.ActionListItem--navActive, :focus-visible) {
           /* Support for "Windows high contrast mode" */
-          outline: solid var(--primer-borderWidth-thin, 1px) transparent;
-          outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));
-          box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
+          outline: solid var(--borderWidth-thin, 1px) transparent;
+          outline-offset: calc(-1 * var(--borderWidth-thin, 1px));
+          box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
         }
       }
     }
@@ -141,9 +141,9 @@
 
       &:not(.ActionListItem--navActive) {
         /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
-        outline: solid var(--primer-borderWidth-thin, 1px) transparent;
-        outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));
-        box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
+        outline: solid var(--borderWidth-thin, 1px) transparent;
+        outline-offset: calc(-1 * var(--borderWidth-thin, 1px));
+        box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
       }
 
       & .ActionListItem-label::before,
@@ -189,7 +189,7 @@
       & .ActionListItem-multiSelectIconRect {
         fill: var(--color-accent-fg);
         stroke: var(--color-accent-fg);
-        stroke-width: var(--primer-borderWidth-thin, 1px);
+        stroke-width: var(--borderWidth-thin, 1px);
       }
 
       & .ActionListItem-multiSelectCheckmark {
@@ -232,13 +232,13 @@
       & .ActionListItem-multiSelectIconRect {
         fill: var(--color-canvas-default);
         stroke: var(--color-border-default);
-        stroke-width: var(--primer-borderWidth-thin, 1px);
+        stroke-width: var(--borderWidth-thin, 1px);
       }
     }
 
     & .ActionListItem-multiSelectIconRect {
       fill: var(--color-canvas-default);
-      border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+      border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
     }
   }
 
@@ -360,14 +360,14 @@
   position: relative;
   display: grid;
   width: 100%;
-  padding-block: var(--primer-actionListContent-paddingBlock);
-  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
+  padding-block: var(--actionListContent-paddingBlock);
+  padding-inline: var(--control-medium-paddingInline-condensed, 8px);
   color: var(--color-fg-default);
   text-align: left;
   user-select: none;
   background-color: transparent;
   border: none;
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
   transition: background 33.333ms linear;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
@@ -378,7 +378,7 @@
 
   /* column-gap persists with empty grid-areas, margin applies only when children exist */
   & > :not(:last-child) {
-    margin-right: var(--primer-control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap, 8px);
   }
 
   /* state */
@@ -501,16 +501,16 @@
   /* sizes */
 
   &.ActionListContent--sizeLarge {
-    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
   }
 
   &.ActionListContent--sizeXLarge {
-    --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
   }
 
   /* On pointer:coarse (mobile), all list items are large */
   @media (pointer: coarse) {
-    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
   }
 
   &.ActionListContent--blockDescription {
@@ -562,9 +562,9 @@
 
 /* description */
 .ActionListItem-description {
-  font-size: var(--primer-text-body-size-small, 12px);
+  font-size: var(--text-body-size-small, 12px);
   font-weight: var(--base-text-weight-normal, 400);
-  line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
+  line-height: var(--text-body-lineHeight-small, calc(20 / 12));
   color: var(--color-fg-muted);
 }
 
@@ -573,7 +573,7 @@
 .ActionListItem-visual,
 .ActionListItem-action {
   display: flex;
-  min-height: var(--primer-control-medium-lineBoxHeight, 20px);
+  min-height: var(--control-medium-lineBoxHeight, 20px);
   color: var(--color-fg-muted);
   pointer-events: none;
   fill: var(--color-fg-muted);
@@ -583,9 +583,9 @@
 /* text */
 .ActionListItem-label {
   position: relative;
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   font-weight: var(--base-text-weight-normal, 400);
-  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
+  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
   color: var(--color-fg-default);
   grid-area: label;
 }
@@ -600,8 +600,8 @@
  target ActionListItem--subItem for padding-left to maintain :active :after state */
 
 .ActionListItem--subItem > .ActionListContent > .ActionListItem-label {
-  font-size: var(--primer-text-body-size-small, 12px);
-  line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
+  font-size: var(--text-body-size-small, 12px);
+  line-height: var(--text-body-lineHeight-small, calc(20 / 12));
 }
 
 /* trailing action icon button */
@@ -638,10 +638,10 @@
   /* with children */
   &:not(:empty) {
     display: flex;
-    padding-inline: var(--primer-actionListContent-paddingBlock);
+    padding-inline: var(--actionListContent-paddingBlock);
     padding-block: var(--base-size-8, 8px);
-    font-size: var(--primer-text-body-size-small, 12px);
-    line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
+    font-size: var(--text-body-size-small, 12px);
+    line-height: var(--text-body-lineHeight-small, calc(20 / 12));
     font-weight: var(--base-text-weight-semibold, 600);
     color: var(--color-fg-muted);
     flex-direction: column;
@@ -650,9 +650,9 @@
   /* no children */
   &:empty {
     display: block;
-    height: var(--primer-borderWidth-thin, 1px);
+    height: var(--borderWidth-thin, 1px);
     padding: 0;
-    margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));
+    margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));
     margin-block-end: var(--base-size-8, 8px);
     margin-inline: calc(-1 * var(--base-size-8, 8px));
     list-style: none;
@@ -661,19 +661,19 @@
   }
 
   & .ActionList-sectionDivider-title {
-    font-size: var(--primer-text-body-size-small, 12px);
+    font-size: var(--text-body-size-small, 12px);
     font-weight: var(--base-text-weight-semibold, 600);
     color: var(--color-fg-muted);
   }
 }
 
 .ActionList-sectionDivider--filled {
-  margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));
+  margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));
   margin-block-end: var(--base-size-8, 8px);
   margin-inline: calc(-1 * var(--base-size-8, 8px));
   background: var(--color-canvas-subtle);
-  border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
-  border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
+  border-top: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
+  border-bottom: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
 
   /* if no children, treat as divider */
   &:empty {

data/app/components/primer/alpha/action_list.rb

@@ -82,6 +82,7 @@ module Primer
       # @param scheme [Symbol] <%= one_of(Primer::Alpha::ActionList::SCHEME_OPTIONS) %> `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges.
       # @param show_dividers [Boolean] Display a divider above each item in the list when it does not follow a header or divider.
       # @param select_variant [Symbol] How items may be selected in the list. <%= one_of(Primer::Alpha::ActionList::SELECT_VARIANT_OPTIONS) %>
+      # @param form_arguments [Hash] Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an <%= link_to_component(Primer::Alpha::ActionMenu) %> instead of using this feature directly.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         id: self.class.generate_id,
@@ -90,6 +91,7 @@ module Primer
         scheme: DEFAULT_SCHEME,
         show_dividers: false,
         select_variant: DEFAULT_SELECT_VARIANT,
+        form_arguments: {},
         **system_arguments
       )
         @system_arguments = system_arguments
@@ -107,10 +109,17 @@ module Primer
           "ActionListWrap--divided" => @show_dividers
         )
 
-        @role = role || allows_selection? ? MENU_ROLE : DEFAULT_ROLE
+        @role = role || (allows_selection? ? MENU_ROLE : DEFAULT_ROLE)
         @system_arguments[:role] = @role
 
         @list_wrapper_arguments = {}
+
+        @form_builder = form_arguments[:builder]
+        @input_name = form_arguments[:name]
+
+        return unless required_form_arguments_given? && !allows_selection?
+
+        raise ArgumentError, "lists/menus that act as form inputs must also allow item selection (please pass the `select_variant:` option)"
       end
 
       # @private
@@ -158,6 +167,14 @@ module Primer
         @system_arguments[:role] == :menu
       end
 
+      def required_form_arguments_given?
+        @form_builder && @input_name
+      end
+
+      def acts_as_form_input?
+        required_form_arguments_given? && allows_selection?
+      end
+
       # @private
       def will_add_item(_item); end
     end

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

@@ -1,5 +1,10 @@
 import '@github/include-fragment-element';
-declare type SelectVariant = 'single' | 'multiple' | null;
+declare type SelectVariant = 'none' | 'single' | 'multiple' | null;
+declare type SelectedItem = {
+    label: string | null | undefined;
+    value: string | null | undefined;
+    element: Element;
+};
 export declare class ActionMenuElement extends HTMLElement {
     #private;
     get selectVariant(): SelectVariant;
@@ -10,6 +15,8 @@ export declare class ActionMenuElement extends HTMLElement {
     set dynamicLabel(value: boolean);
     get popoverElement(): HTMLElement | null;
     get invokerElement(): HTMLElement | null;
+    get invokerLabel(): HTMLElement | null;
+    get selectedItems(): SelectedItem[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;

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

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
 import '@github/include-fragment-element';
 const popoverSelector = (() => {
     try {
@@ -20,13 +20,14 @@ const popoverSelector = (() => {
         return '.\\:open';
     }
 })();
-const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="none"]'];
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
 export 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');
@@ -68,6 +69,24 @@ export class ActionMenuElement extends HTMLElement {
         }
         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 });
@@ -75,23 +94,28 @@ export class ActionMenuElement extends HTMLElement {
         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);
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
         var _a, _b, _c, _d;
-        if (!((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(popoverSelector)))
+        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).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(popoverSelector)))
             return;
         if (event.type === 'focusout' && !this.contains(event.relatedTarget)) {
-            (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
+            (_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.hidePopover();
         }
-        else if ((event instanceof KeyboardEvent &&
-            event.type === 'keydown' &&
-            !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-            event.key === 'Enter') ||
-            (event instanceof MouseEvent && event.type === 'click')) {
-            const item = (_c = event.target.closest(menuItemSelectors.join(','))) === null || _c === void 0 ? void 0 : _c.closest('li');
+        else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
+            const item = (_d = event.target.closest(menuItemSelectors.join(','))) === null || _d === void 0 ? void 0 : _d.closest('li');
             if (!item)
                 return;
             const ariaChecked = item.getAttribute('aria-checked');
@@ -107,31 +131,85 @@ export class ActionMenuElement extends HTMLElement {
                 }
                 __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
             }
-            event.preventDefault();
-            (_d = this.popoverElement) === null || _d === void 0 ? void 0 : _d.hidePopover();
+            __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();
+            }
+            // 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; return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover(); });
+            }
         }
     }
 }
-_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+_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 invoker = this.invokerElement;
-    if (!invoker)
+    const invokerLabel = this.invokerLabel;
+    if (!invokerLabel)
         return;
-    const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',');
-    const item = this.querySelector(selector);
-    if (item && this.dynamicLabel) {
-        __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invoker.textContent || ''), "f");
+    __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 = item.textContent || '';
-        invoker.replaceChildren(prefixSpan, contentSpan);
+        contentSpan.textContent = itemLabel.textContent || '';
+        invokerLabel.replaceChildren(prefixSpan, contentSpan);
     }
     else {
-        invoker.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
+        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_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter');
+}, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
+    return this.querySelector(menuItemSelectors.join(','));
 };
 if (!window.customElements.get('action-menu')) {
     window.ActionMenuElement = ActionMenuElement;

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -9,13 +9,19 @@ const popoverSelector = (() => {
   }
 })()
 
-type SelectVariant = 'single' | 'multiple' | null
+type SelectVariant = 'none' | 'single' | 'multiple' | null
+type SelectedItem = {
+  label: string | null | undefined
+  value: string | null | undefined
+  element: Element
+}
 
-const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="none"]']
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 
 export class ActionMenuElement extends HTMLElement {
   #abortController: AbortController
   #originalLabel = ''
+  #inputName = ''
 
   get selectVariant(): SelectVariant {
     return this.getAttribute('data-select-variant') as SelectVariant
@@ -60,6 +66,28 @@ export class ActionMenuElement extends HTMLElement {
     return null
   }
 
+  get invokerLabel(): HTMLElement | null {
+    if (!this.invokerElement) return null
+    return this.invokerElement.querySelector('.Button-label')
+  }
+
+  get selectedItems(): SelectedItem[] {
+    const selectedItems = this.querySelectorAll('[aria-checked=true]')
+    const results: SelectedItem[] = []
+
+    for (const selectedItem of selectedItems) {
+      const labelEl = selectedItem.querySelector('.ActionListItem-label')
+
+      results.push({
+        label: labelEl?.textContent,
+        value: selectedItem?.getAttribute('data-value'),
+        element: selectedItem
+      })
+    }
+
+    return results
+  }
+
   connectedCallback() {
     const {signal} = (this.#abortController = new AbortController())
     this.addEventListener('keydown', this, {signal})
@@ -67,6 +95,7 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('mouseover', this, {signal})
     this.addEventListener('focusout', this, {signal})
     this.#setDynamicLabel()
+    this.#updateInput()
   }
 
   disconnectedCallback() {
@@ -74,17 +103,20 @@ export class ActionMenuElement extends HTMLElement {
   }
 
   handleEvent(event: Event) {
+    if (event.target === this.invokerElement && this.#isEnterKeydown(event)) {
+      if (this.#firstItem) {
+        event.preventDefault()
+        this.popoverElement?.showPopover()
+        this.#firstItem.focus()
+        return
+      }
+    }
+
     if (!this.popoverElement?.matches(popoverSelector)) return
 
     if (event.type === 'focusout' && !this.contains((event as FocusEvent).relatedTarget as Node)) {
       this.popoverElement?.hidePopover()
-    } else if (
-      (event instanceof KeyboardEvent &&
-        event.type === 'keydown' &&
-        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-        event.key === 'Enter') ||
-      (event instanceof MouseEvent && event.type === 'click')
-    ) {
+    } else if (this.#isEnterKeydown(event) || (event instanceof MouseEvent && event.type === 'click')) {
       const item = (event.target as Element).closest(menuItemSelectors.join(','))?.closest('li')
       if (!item) return
       const ariaChecked = item.getAttribute('aria-checked')
@@ -100,29 +132,96 @@ export class ActionMenuElement extends HTMLElement {
         }
         this.#setDynamicLabel()
       }
-      event.preventDefault()
-      this.popoverElement?.hidePopover()
+
+      this.#updateInput()
+
+      if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+        // prevent buttons from being clicked twice
+        event.preventDefault()
+      }
+      // 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(() => this.popoverElement?.hidePopover())
+      }
     }
   }
 
   #setDynamicLabel() {
     if (!this.dynamicLabel) return
-    const invoker = this.invokerElement
-    if (!invoker) return
-    const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',')
-    const item = this.querySelector(selector)
-    if (item && this.dynamicLabel) {
-      this.#originalLabel ||= invoker.textContent || ''
+    const invokerLabel = this.invokerLabel
+    if (!invokerLabel) return
+    this.#originalLabel ||= invokerLabel.textContent || ''
+    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 = item.textContent || ''
-      invoker.replaceChildren(prefixSpan, contentSpan)
+      contentSpan.textContent = itemLabel.textContent || ''
+      invokerLabel.replaceChildren(prefixSpan, contentSpan)
     } else {
-      invoker.textContent = this.#originalLabel
+      invokerLabel.textContent = this.#originalLabel
     }
   }
+
+  #updateInput() {
+    if (this.selectVariant === 'single') {
+      const input = this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement | null
+      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) {
+        this.#inputName ||= (inputs[0] as HTMLInputElement).name
+      }
+
+      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 = this.#inputName
+        newInput.value = (selectedItem.value || selectedItem.label || '').trim()
+
+        inputList.append(newInput)
+      }
+
+      for (const input of inputs) {
+        input.remove()
+      }
+    }
+  }
+
+  #isEnterKeydown(event: Event): boolean {
+    return (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      event.key === 'Enter'
+    )
+  }
+
+  get #firstItem(): HTMLElement | null {
+    return this.querySelector(menuItemSelectors.join(','))
+  }
 }
 
 if (!window.customElements.get('action-menu')) {