primer_view_components 0.1.6 → 0.1.8

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

@@ -1,9 +1,14 @@
 :root {
-  --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);
+  --actionListContent-paddingBlock: var(--control-medium-paddingBlock, 6px);
 }
 
 /* ActionList */
 
+.ActionListHeader {
+  margin-left: var(--base-size-8, 8px);
+  margin-bottom: var(--base-size-16, 16px);
+}
+
 /* <ul> */
 .ActionListWrap {
   list-style: none;
@@ -18,7 +23,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 +35,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 +76,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 +134,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 +146,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 +194,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 +237,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 +365,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 +383,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 +506,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 +567,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 +578,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 +588,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 +605,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 +643,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 +655,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 +666,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

@@ -53,7 +53,7 @@ module Primer
       #
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Heading) %>.
       renders_one :heading, lambda { |**system_arguments|
-        Heading.new(list_id: @id, **system_arguments)
+        Heading.new(**system_arguments)
       }
 
       # Items.
@@ -74,7 +74,7 @@ module Primer
         set_slot(:items, { renderable: Divider, collection: true }, **system_arguments, &block)
       end
 
-      attr_reader :select_variant, :role
+      attr_reader :id, :select_variant, :role
 
       # @param id [String] HTML ID value.
       # @param role [Boolean] ARIA role describing the function of the list. listbox and menu are a common values.
@@ -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
@@ -111,19 +113,21 @@ module Primer
         @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
       def before_render
-        aria_label = aria(:label, @system_arguments)
-        aria_labelledby = aria(:labelledby, @system_arguments)
-
-        if heading.present?
-          @system_arguments[:"aria-labelledby"] = heading.id unless aria_labelledby
-          raise ArgumentError, "An aria-label should not be provided if a heading is present" if aria_label.present?
-        elsif aria_label.blank? && aria_labelledby.blank?
-          raise ArgumentError, "An aria-label, aria-labelledby, or heading must be provided"
-        end
+        return unless heading?
+
+        @system_arguments[:"aria-labelledby"] = heading.title_id
+        @system_arguments[:"aria-describedby"] = heading.subtitle_id if heading.subtitle?
       end
 
       # @private
@@ -158,8 +162,24 @@ 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
+
+      private
+
+      def with_post_list_content(&block)
+        @post_list_content_block = block
+      end
+
+      attr_reader :post_list_content_block
     end
   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;
@@ -11,6 +16,7 @@ export declare class ActionMenuElement extends HTMLElement {
     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, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
+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 {
@@ -27,6 +27,7 @@ export class ActionMenuElement extends HTMLElement {
         _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');
@@ -73,6 +74,19 @@ export class ActionMenuElement extends HTMLElement {
             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 });
@@ -80,6 +94,7 @@ 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();
@@ -116,6 +131,7 @@ export class ActionMenuElement extends HTMLElement {
                 }
                 __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
             }
+            __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();
@@ -132,15 +148,15 @@ export class ActionMenuElement extends HTMLElement {
         }
     }
 }
-_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 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) {
-        __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');
         const contentSpan = document.createElement('span');
@@ -151,6 +167,42 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
     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_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
     return (event instanceof KeyboardEvent &&
         event.type === 'keydown' &&

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"]']
 
 export class ActionMenuElement extends HTMLElement {
   #abortController: AbortController
   #originalLabel = ''
+  #inputName = ''
 
   get selectVariant(): SelectVariant {
     return this.getAttribute('data-select-variant') as SelectVariant
@@ -65,6 +71,23 @@ export class ActionMenuElement extends HTMLElement {
     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})
@@ -72,6 +95,7 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('mouseover', this, {signal})
     this.addEventListener('focusout', this, {signal})
     this.#setDynamicLabel()
+    this.#updateInput()
   }
 
   disconnectedCallback() {
@@ -108,6 +132,9 @@ export class ActionMenuElement extends HTMLElement {
         }
         this.#setDynamicLabel()
       }
+
+      this.#updateInput()
+
       if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
         // prevent buttons from being clicked twice
         event.preventDefault()
@@ -128,9 +155,9 @@ export class ActionMenuElement extends HTMLElement {
     if (!this.dynamicLabel) return
     const invokerLabel = this.invokerLabel
     if (!invokerLabel) return
+    this.#originalLabel ||= invokerLabel.textContent || ''
     const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label')
     if (itemLabel && this.dynamicLabel) {
-      this.#originalLabel ||= invokerLabel.textContent || ''
       const prefixSpan = document.createElement('span')
       prefixSpan.classList.add('color-fg-muted')
       const contentSpan = document.createElement('span')
@@ -142,6 +169,47 @@ export class ActionMenuElement extends HTMLElement {
     }
   }
 
+  #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 &&

data/app/components/primer/alpha/action_menu/list.rb

@@ -12,18 +12,16 @@ module Primer
 
         # Adds a new item to the list.
         #
+        # @param data [Hash] When the menu is used as a form input (see the <%= link_to_component(Primer::Alpha::ActionMenu) %> docs), the label is submitted to the server by default. However, if the `data: { value: }` or `"data-value":` attribute is provided, it will be sent to the server instead.
         # @param system_arguments [Hash] The same arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
-        def with_item(**system_arguments, &block)
+        def with_item(data: {}, **system_arguments, &block)
           content_arguments = system_arguments.delete(:content_arguments) || {}
 
-          content_arguments[:tag] =
-            if system_arguments[:tag] && ITEM_TAG_OPTIONS.include?(system_arguments[:tag])
-              system_arguments[:tag]
-            elsif system_arguments[:href] && !system_arguments[:disabled]
-              :a
-            else
-              DEFAULT_ITEM_TAG
-            end
+          # rubocop:disable Style/IfUnlessModifier
+          if system_arguments[:tag] && ITEM_TAG_OPTIONS.include?(system_arguments[:tag])
+            content_arguments[:tag] = system_arguments[:tag]
+          end
+          # rubocop:enable Style/IfUnlessModifier
 
           # disallow setting item's tag
           system_arguments.delete(:tag)
@@ -51,7 +49,7 @@ module Primer
             content_arguments[:disabled] = "" if content_arguments[:tag] == :button
           end
 
-          super(**system_arguments, content_arguments: content_arguments) do |item|
+          super(data: data, **system_arguments, content_arguments: content_arguments) do |item|
             # Prevent double renders by using the capture method on the component
             # that originally received the block.
             #
@@ -70,7 +68,7 @@ module Primer
         end
 
         # @param menu_id [String] ID of the parent menu.
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
         def initialize(menu_id:, **system_arguments, &block)
           @menu_id = menu_id