primer_view_components 0.1.5 → 0.1.7

data/app/components/primer/alpha/action_list/form_wrapper.html.erb

@@ -0,0 +1,10 @@
+<% if form_required? %>
+  <%= form_with(url: @action, method: @http_method, **@form_arguments) do %>
+    <% if render_input? %>
+      <%= render(Primer::BaseComponent.new(tag: :input, **@input_arguments)) %>
+    <% end %>
+    <%= content %>
+  <% end %>
+<% else %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionList
+      # Utility component for wrapping ActionLists or individual ActionList::Items in forms.
+      class FormWrapper < Primer::Component
+        DEFAULT_HTTP_METHOD = :get
+        HTTP_METHOD_OPTIONS = [
+          DEFAULT_HTTP_METHOD,
+          :post,
+          :patch,
+          :put,
+          :delete,
+          :head
+        ].freeze
+
+        def initialize(list:, action: nil, **form_arguments)
+          @list = list
+          @form_arguments = form_arguments
+
+          @action = action
+          @http_method = extract_http_method(@form_arguments)
+
+          name = @form_arguments.delete(:name)
+          value = @form_arguments.delete(:value) || name
+
+          @input_arguments = {
+            type: :hidden,
+            name: name,
+            value: value,
+            data: { list_item_input: true },
+            **(@form_arguments.delete(:input_arguments) || {})
+          }
+        end
+
+        def get?
+          @http_method == :get
+        end
+
+        def form_required?
+          @action && !get?
+        end
+
+        def render_input?
+          @input_arguments[:name].present?
+        end
+
+        private
+
+        def extract_http_method(args)
+          if (http_method = args.delete(:method))
+            HTTP_METHOD_OPTIONS.include?(http_method) ? http_method : DEFAULT_HTTP_METHOD
+          else
+            DEFAULT_HTTP_METHOD
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/action_list/item.html.erb

@@ -1,43 +1,48 @@
 <%= render(Primer::BaseComponent.new(tag: :li, **@system_arguments)) do %>
-  <%= render(Primer::BaseComponent.new(**@content_arguments)) do %>
-    <% if private_leading_action_icon %>
-      <span class="ActionListItem-visual ActionListItem-action--leading">
-        <%= private_leading_action_icon %>
-      </span>
-    <% end %>
-    <% if list.select_variant == :single || list.select_variant == :multiple %>
-      <span class="ActionListItem-visual ActionListItem-action--leading">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="ActionListItem-singleSelectCheckmark"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>
-      </span>
-    <% elsif list.select_variant == :multiple_checkbox %>
-      <span class="ActionListItem-visual ActionListItem-action--leading">
-        <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionListItem-multiSelectIcon"><rect x="2" y="2" width="12" height="12" rx="4" class="ActionListItem-multiSelectIconRect"></rect><path fill-rule="evenodd" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z" class="ActionListItem-multiSelectCheckmark"></path></svg>
-      </span>
-    <% end %>
-    <% if leading_visual %>
-      <span class="ActionListItem-visual ActionListItem-visual--leading">
-        <%= leading_visual %>
-      </span>
-    <% end %>
-    <%= render(Primer::ConditionalWrapper.new(condition: description?, tag: :span, **@description_wrapper_arguments)) do %>
-      <%= render(Primer::BaseComponent.new(tag: :span, **@label_arguments)) do %>
-        <%= @label || content %>
+  <%= render(@form_wrapper) do %>
+    <%= render(Primer::BaseComponent.new(**@content_arguments)) do %>
+      <% if private_leading_action_icon %>
+        <span class="ActionListItem-visual ActionListItem-action--leading">
+          <%= private_leading_action_icon %>
+        </span>
       <% end %>
-      <% if description? %>
-        <span class="ActionListItem-description">
-          <%= description %>
+      <% if list.select_variant == :single || list.select_variant == :multiple %>
+        <span class="ActionListItem-visual ActionListItem-action--leading">
+          <%= render(Primer::Beta::Octicon.new(icon: :check, classes: "ActionListItem-singleSelectCheckmark")) %>
+        </span>
+      <% elsif list.select_variant == :multiple_checkbox %>
+        <span class="ActionListItem-visual ActionListItem-action--leading">
+          <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionListItem-multiSelectIcon">
+            <rect x="2" y="2" width="12" height="12" rx="4" class="ActionListItem-multiSelectIconRect"></rect>
+            <path fill-rule="evenodd" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z" class="ActionListItem-multiSelectCheckmark"></path>
+          </svg>
+        </span>
+      <% end %>
+      <% if leading_visual %>
+        <span class="ActionListItem-visual ActionListItem-visual--leading">
+          <%= leading_visual %>
+        </span>
+      <% end %>
+      <%= render(Primer::ConditionalWrapper.new(condition: description?, tag: :span, **@description_wrapper_arguments)) do %>
+        <%= render(Primer::BaseComponent.new(tag: :span, **@label_arguments)) do %>
+          <%= @label || content %>
+        <% end %>
+        <% if description? %>
+          <span class="ActionListItem-description">
+            <%= description %>
+          </span>
+        <% end %>
+      <% end %>
+      <% if trailing_visual %>
+        <span class="ActionListItem-visual ActionListItem-visual--trailing">
+          <%= trailing_visual %>
+        </span>
+      <% end %>
+      <% if private_trailing_action_icon %>
+        <span class="ActionListItem-visual ActionListItem-action--trailing">
+          <%= private_trailing_action_icon %>
         </span>
       <% end %>
-    <% end %>
-    <% if trailing_visual %>
-      <span class="ActionListItem-visual ActionListItem-visual--trailing">
-        <%= trailing_visual %>
-      </span>
-    <% end %>
-    <% if private_trailing_action_icon %>
-      <span class="ActionListItem-visual ActionListItem-action--trailing">
-        <%= private_trailing_action_icon %>
-      </span>
     <% end %>
   <% end %>
   <%= tooltip %>

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

@@ -137,6 +137,7 @@ module Primer
         # @param label_classes [String] CSS classes that will be added to the label.
         # @param label_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the label.
         # @param content_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the item's anchor or button tag.
+        # @param form_arguments [Hash] Allows the item to submit a form on click. The URL passed in the `href:` option will be used as the form action. Pass the `method:` option to this hash to control what kind of request is made, <%= one_of(Primer::Alpha::ActionList::FormWrapper::HTTP_METHOD_OPTIONS) %> The `name:` option is required and specifies the desired name of the field that will be included in the params sent to the server on form submission. Specify the `value:` option to send a custom value to the server; otherwise the value of `name:` is sent.
         # @param truncate_label [Boolean] Truncate label with ellipsis.
         # @param href [String] Link URL.
         # @param role [String] ARIA role describing the function of the item.
@@ -154,6 +155,7 @@ module Primer
           label_classes: nil,
           label_arguments: {},
           content_arguments: {},
+          form_arguments: {},
           parent: nil,
           truncate_label: false,
           href: nil,
@@ -170,13 +172,14 @@ module Primer
           @list = list
           @parent = parent
           @label = label
-          @href = href
+          @href = href || content_arguments[:href]
           @truncate_label = truncate_label
           @disabled = disabled
           @active = active
           @id = id
           @system_arguments = system_arguments
           @content_arguments = content_arguments
+          @form_wrapper = FormWrapper.new(list: @list, action: @href, **form_arguments)
 
           @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
           @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
@@ -191,8 +194,6 @@ module Primer
             "ActionListItem--disabled" => @disabled
           )
 
-          @system_arguments[:role] = :none
-
           @system_arguments[:data] ||= {}
           @system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
 
@@ -214,15 +215,26 @@ module Primer
           )
 
           unless @content_arguments[:tag]
-            if @href && !@disabled
+            if @href && @form_wrapper.get? && !@disabled
               @content_arguments[:tag] = :a
               @content_arguments[:href] = @href
             else
               @content_arguments[:tag] = :button
+              @content_arguments[:type] = @form_wrapper.form_required? ? :submit : :button
               @content_arguments[:onclick] = on_click if on_click
             end
           end
 
+          # rubocop:disable Style/IfUnlessModifier
+          if @content_arguments[:tag] != :button && @form_wrapper.form_required?
+            raise ArgumentError, "items that submit forms must use a \"button\" tag instead of \"#{@content_arguments[:tag]}\""
+          end
+
+          if @content_arguments[:tag] != :button && @list.acts_as_form_input?
+            raise ArgumentError, "items within lists/menus that act as form inputs must use \"button\" tags instead of \"#{@content_arguments[:tag]}\""
+          end
+          # rubocop:enable Style/IfUnlessModifier
+
           if @disabled
             @content_arguments[:aria] ||= merge_aria(
               @content_arguments,
@@ -237,6 +249,8 @@ module Primer
                                         ActionList::DEFAULT_MENU_ITEM_ROLE
                                       end
 
+          @system_arguments[:role] = @list.acts_as_menu? ? :none : nil
+
           @description_wrapper_arguments = {
             classes: class_names(
               "ActionListItem-descriptionWrap",

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

@@ -1 +1 @@
-:root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;position:absolute;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.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:initial;border-radius:var(--primer-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(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color: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(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background: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(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-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-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[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)}}}}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[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){.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[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)}}}}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default)}.ActionListItem[aria-selected=true]{background: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(--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(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color: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(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.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(--color-primer-fg-disabled)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill: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(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color: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(--primer-borderRadius-medium,6px);color: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(--primer-actionListContent-paddingBlock);padding-inline:var(--primer-control-medium-paddingInline-condensed,8px);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(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill: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,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,40px)}.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, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background: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(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-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,4px);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,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--primer-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(--primer-text-body-size-small,12px);line-height:var(--primer-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(--color-fg-muted);display:flex;flex-direction:column;font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--primer-text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,8px);padding-inline:var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--primer-borderWidth-thin,1px);list-style:none;margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
+:root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background: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,1px)}.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:initial;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(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color: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(--borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--borderWidth-thin,1px) #0000;outline-offset:calc(var(--borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background: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(--borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--borderWidth-thin,1px) #0000;outline-offset:calc(var(--borderWidth-thin, 1px)*-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-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[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)}}}}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:var(--borderWidth-thin,1px)}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[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){.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[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)}}}}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:var(--borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default)}.ActionListItem[aria-selected=true]{background: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(--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(--color-accent-fg);border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color: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(--color-accent-fg);border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.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(--color-primer-fg-disabled)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill: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(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color: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(--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,8px);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,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill: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,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,40px)}.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, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background: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(--color-accent-fg);border-radius:var(--borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.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,4px);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,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:var(--text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:var(--control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);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,12px);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(--color-fg-muted);display:flex;flex-direction:column;font-size:var(--text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,8px);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--borderWidth-thin,1px);list-style:none;margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:var(--text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--color-canvas-subtle);border-bottom:solid var(--borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}

data/app/components/primer/alpha/action_list.css.map

@@ -1 +1 @@
-{"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n  --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset {\n  padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n  & .ActionListItem-label::before {\n    position: absolute;\n    top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n    display: block;\n    width: 100%;\n    height: 1px;\n    content: '';\n    background: var(--color-action-list-item-inline-divider);\n  }\n\n  /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n  & .ActionListItem-descriptionWrap--inline {\n    &::before {\n      position: absolute;\n      top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n      display: block;\n      width: 100%;\n      height: var(--primer-borderWidth-thin, 1px);\n      content: '';\n      background: var(--color-action-list-item-inline-divider);\n    }\n\n    /* unset the default label pseudo */\n    & .ActionListItem-label::before {\n      content: unset;\n    }\n  }\n\n  /* hide divider if item is active */\n  & .ActionListItem--navActive {\n    & .ActionListItem-label::before,\n    & + .ActionListItem .ActionListItem-label::before {\n      visibility: hidden;\n    }\n  }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n  visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n  visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n  position: relative;\n  list-style: none;\n  background-color: transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n\n  /* state */\n\n  &:hover,\n  &:active {\n    cursor: pointer;\n  }\n\n  /* hide dividers  */\n  @media (hover: hover) {\n    &:hover {\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n\n      & .ActionListItem-descriptionWrap--inline::before,\n      & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Make sure that the first visible item isn't a divider */\n  &[hidden] + .ActionList-sectionDivider {\n    display: none;\n  }\n\n  /* collapse styles here */\n  &.ActionListItem--hasSubItem {\n    /* first child */\n    & > .ActionListContent {\n      z-index: 1;\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-action-list-item-default-hover-bg);\n        }\n      }\n\n      &:active {\n        background-color: var(--color-action-list-item-default-active-bg);\n      }\n    }\n  }\n\n  /* only hover li without list as children */\n  &:not(.ActionListItem--hasSubItem),\n   /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n  &.ActionListItem--hasSubItem > .ActionListContent {\n    @media (hover: hover) {\n      &:hover {\n        cursor: pointer;\n        background-color: var(--color-action-list-item-default-hover-bg);\n\n        &:not(.ActionListItem--navActive, :focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n          outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n          box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--color-action-list-item-default-active-bg);\n\n      &:not(.ActionListItem--navActive) {\n        /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n        outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n        outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n        box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n      }\n\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /*\n  * checkbox item [aria-checked]\n  * listbox [aria-selected]\n  */\n  &[aria-checked='true'],\n  &[aria-selected='true'] {\n    /* multiselect checkmark */\n    & .ActionListItem-multiSelectCheckmark {\n      visibility: visible;\n      opacity: 1;\n      transition: visibility 0 linear 0, opacity 50ms;\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: visible;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n        @keyframes checkmarkIn {\n          from {\n            clip-path: inset(16px 0 0 0);\n          }\n\n          to {\n            clip-path: inset(0 0 0 0);\n          }\n        }\n      }\n    }\n\n    /* checkbox */\n    & .ActionListItem-multiSelectIcon {\n      & .ActionListItem-multiSelectIconRect {\n        fill: var(--color-accent-fg);\n        stroke: var(--color-accent-fg);\n        stroke-width: var(--primer-borderWidth-thin, 1px);\n      }\n\n      & .ActionListItem-multiSelectCheckmark {\n        fill: var(--color-fg-on-emphasis);\n      }\n    }\n  }\n\n  &[aria-checked='false'],\n  &[aria-selected='false'] {\n    /* multiselect checkmark */\n    & .ActionListItem-multiSelectCheckmark {\n      visibility: hidden;\n      opacity: 0;\n      transition: visibility 0 linear 50ms, opacity 50ms;\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: hidden;\n      transition: visibility 0s linear 200ms;\n      clip-path: inset(16px 0 0 0);\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n        @keyframes checkmarkOut {\n          from {\n            clip-path: inset(0 0 0 0);\n          }\n\n          to {\n            clip-path: inset(16px 0 0 0);\n          }\n        }\n      }\n    }\n\n    /* checkbox */\n    & .ActionListItem-multiSelectIcon {\n      & .ActionListItem-multiSelectIconRect {\n        fill: var(--color-canvas-default);\n        stroke: var(--color-border-default);\n        stroke-width: var(--primer-borderWidth-thin, 1px);\n      }\n    }\n\n    & .ActionListItem-multiSelectIconRect {\n      fill: var(--color-canvas-default);\n      border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n    }\n  }\n\n  /* Autocomplete [aria-selected] items */\n\n  &[aria-selected='true'] {\n    font-weight: var(--base-text-weight-normal, 400);\n    background: var(--color-action-list-item-default-selected-bg);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-action-list-item-default-hover-bg);\n      }\n    }\n\n    &::before,\n    & + .ActionListItem::before {\n      visibility: hidden;\n    }\n\n    /* blue accent line */\n\n    &::after {\n      @mixin activeIndicatorLine calc(-1 * var(--base-size-4, 4px));\n    }\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    &:not(.ActionListItem--subItem) {\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--color-action-list-item-default-selected-bg);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-action-list-item-default-hover-bg);\n        }\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line  */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* disabled */\n\n  &.ActionListItem--disabled,\n  &[aria-disabled='true'] {\n    & .ActionListContent {\n      & .ActionListItem-label,\n      & .ActionListItem-description {\n        color: var(--color-primer-fg-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--color-primer-fg-disabled);\n      }\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* variants */\n\n  /* danger */\n  &.ActionListItem--danger {\n    & .ActionListItem-label {\n      color: var(--color-danger-fg);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--color-danger-fg);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--color-action-list-item-danger-hover-bg);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual {\n          color: var(--color-action-list-item-danger-hover-text);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--color-action-list-item-danger-active-bg);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual {\n          color: var(--color-action-list-item-danger-hover-text);\n        }\n      }\n    }\n  }\n}\n\n/* button or a href */\n.ActionListContent {\n  position: relative;\n  display: grid;\n  width: 100%;\n  padding-block: var(--primer-actionListContent-paddingBlock);\n  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);\n  color: var(--color-fg-default);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  transition: background 33.333ms linear;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  grid-template-rows: min-content;\n  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n  align-items: start;\n\n  /* column-gap persists with empty grid-areas, margin applies only when children exist */\n  & > :not(:last-child) {\n    margin-right: var(--primer-control-medium-gap, 8px);\n  }\n\n  /* state */\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  /* disabled */\n  &[aria-disabled='true'] {\n    & .ActionListItem-label,\n    & .ActionListItem-description {\n      color: var(--color-primer-fg-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--color-primer-fg-disabled);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* collapsible item [aria-expanded] */\n\n  /* nesting (single level)\n   target items inside expanded subgroups */\n  &[aria-expanded] {\n    & + .ActionList--subGroup {\n      @media screen and (prefers-reduced-motion: no-preference) {\n        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n      }\n\n      & .ActionListContent {\n        padding-left: var(--base-size-24, 24px);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32, 32px);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36, 36px);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40, 40px);\n      }\n    }\n  }\n\n  &[aria-expanded='true'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(-1);\n    }\n\n    & + .ActionList--subGroup {\n      height: auto;\n      overflow: visible;\n      visibility: visible;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &.ActionListContent--hasActiveSubItem {\n      & > .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n    }\n  }\n\n  &[aria-expanded='false'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(1);\n    }\n\n    & + .ActionList--subGroup {\n      height: 0;\n      overflow: hidden;\n      visibility: hidden;\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--base-size-16, 16px)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--color-action-list-item-default-selected-bg);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n  }\n\n  &.ActionListContent--blockDescription {\n    /* if leading/trailing visual, align with first line of content */\n    & .ActionListItem-visual {\n      place-self: start;\n    }\n  }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n  grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n  grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n  grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n  grid-area: trailingAction;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n  grid-area: label;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4, 4px);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold, 600);\n  }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n  position: relative;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--base-size-8, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--primer-text-body-size-small, 12px);\n  font-weight: var(--base-text-weight-normal, 400);\n  line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n  color: var(--color-fg-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n  display: flex;\n  min-height: var(--primer-control-medium-lineBoxHeight, 20px);\n  color: var(--color-fg-muted);\n  pointer-events: none;\n  fill: var(--color-fg-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-normal, 400);\n  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n  color: var(--color-fg-default);\n  grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n  font-size: var(--primer-text-body-size-small, 12px);\n  line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n\n.ActionListItem-trailingAction {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n  & .ActionListItem-trailingAction {\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    & .ActionListItem-trailingAction {\n      visibility: visible;\n    }\n  }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n  /* with children */\n  &:not(:empty) {\n    display: flex;\n    padding-inline: var(--primer-actionListContent-paddingBlock);\n    padding-block: var(--base-size-8, 8px);\n    font-size: var(--primer-text-body-size-small, 12px);\n    line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-muted);\n    flex-direction: column;\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--primer-borderWidth-thin, 1px);\n    padding: 0;\n    margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n    margin-block-end: var(--base-size-8, 8px);\n    margin-inline: calc(-1 * var(--base-size-8, 8px));\n    list-style: none;\n    background: var(--color-action-list-item-inline-divider);\n    border: 0;\n  }\n\n  & .ActionList-sectionDivider-title {\n    font-size: var(--primer-text-body-size-small, 12px);\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-muted);\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n  margin-block-end: var(--base-size-8, 8px);\n  margin-inline: calc(-1 * var(--base-size-8, 8px));\n  background: var(--color-canvas-subtle);\n  border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n  border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8, 8px);\n    box-sizing: border-box;\n  }\n\n  &:first-child {\n    margin-block-start: 0;\n  }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4, 4px);\n  height: var(--base-size-24, 24px);\n  content: '';\n  background: var(--color-accent-fg);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n"]}
+{"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n  --actionListContent-paddingBlock: var(--control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset {\n  padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n  & .ActionListItem-label::before {\n    position: absolute;\n    top: calc(-1 * var(--actionListContent-paddingBlock));\n    display: block;\n    width: 100%;\n    height: 1px;\n    content: '';\n    background: var(--color-action-list-item-inline-divider);\n  }\n\n  /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n  & .ActionListItem-descriptionWrap--inline {\n    &::before {\n      position: absolute;\n      top: calc(-1 * var(--actionListContent-paddingBlock));\n      display: block;\n      width: 100%;\n      height: var(--borderWidth-thin, 1px);\n      content: '';\n      background: var(--color-action-list-item-inline-divider);\n    }\n\n    /* unset the default label pseudo */\n    & .ActionListItem-label::before {\n      content: unset;\n    }\n  }\n\n  /* hide divider if item is active */\n  & .ActionListItem--navActive {\n    & .ActionListItem-label::before,\n    & + .ActionListItem .ActionListItem-label::before {\n      visibility: hidden;\n    }\n  }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n  visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n  visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n  position: relative;\n  list-style: none;\n  background-color: transparent;\n  border-radius: var(--borderRadius-medium, 6px);\n\n  /* state */\n\n  &:hover,\n  &:active {\n    cursor: pointer;\n  }\n\n  /* hide dividers  */\n  @media (hover: hover) {\n    &:hover {\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n\n      & .ActionListItem-descriptionWrap--inline::before,\n      & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Make sure that the first visible item isn't a divider */\n  &[hidden] + .ActionList-sectionDivider {\n    display: none;\n  }\n\n  /* collapse styles here */\n  &.ActionListItem--hasSubItem {\n    /* first child */\n    & > .ActionListContent {\n      z-index: 1;\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-action-list-item-default-hover-bg);\n        }\n      }\n\n      &:active {\n        background-color: var(--color-action-list-item-default-active-bg);\n      }\n    }\n  }\n\n  /* only hover li without list as children */\n  &:not(.ActionListItem--hasSubItem),\n   /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n  &.ActionListItem--hasSubItem > .ActionListContent {\n    @media (hover: hover) {\n      &:hover {\n        cursor: pointer;\n        background-color: var(--color-action-list-item-default-hover-bg);\n\n        &:not(.ActionListItem--navActive, :focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--borderWidth-thin, 1px) transparent;\n          outline-offset: calc(-1 * var(--borderWidth-thin, 1px));\n          box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--color-action-list-item-default-active-bg);\n\n      &:not(.ActionListItem--navActive) {\n        /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n        outline: solid var(--borderWidth-thin, 1px) transparent;\n        outline-offset: calc(-1 * var(--borderWidth-thin, 1px));\n        box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n      }\n\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /*\n  * checkbox item [aria-checked]\n  * listbox [aria-selected]\n  */\n  &[aria-checked='true'],\n  &[aria-selected='true'] {\n    /* multiselect checkmark */\n    & .ActionListItem-multiSelectCheckmark {\n      visibility: visible;\n      opacity: 1;\n      transition: visibility 0 linear 0, opacity 50ms;\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: visible;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n        @keyframes checkmarkIn {\n          from {\n            clip-path: inset(16px 0 0 0);\n          }\n\n          to {\n            clip-path: inset(0 0 0 0);\n          }\n        }\n      }\n    }\n\n    /* checkbox */\n    & .ActionListItem-multiSelectIcon {\n      & .ActionListItem-multiSelectIconRect {\n        fill: var(--color-accent-fg);\n        stroke: var(--color-accent-fg);\n        stroke-width: var(--borderWidth-thin, 1px);\n      }\n\n      & .ActionListItem-multiSelectCheckmark {\n        fill: var(--color-fg-on-emphasis);\n      }\n    }\n  }\n\n  &[aria-checked='false'],\n  &[aria-selected='false'] {\n    /* multiselect checkmark */\n    & .ActionListItem-multiSelectCheckmark {\n      visibility: hidden;\n      opacity: 0;\n      transition: visibility 0 linear 50ms, opacity 50ms;\n    }\n\n    /* singleselect checkmark */\n    & .ActionListItem-singleSelectCheckmark {\n      visibility: hidden;\n      transition: visibility 0s linear 200ms;\n      clip-path: inset(16px 0 0 0);\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n        @keyframes checkmarkOut {\n          from {\n            clip-path: inset(0 0 0 0);\n          }\n\n          to {\n            clip-path: inset(16px 0 0 0);\n          }\n        }\n      }\n    }\n\n    /* checkbox */\n    & .ActionListItem-multiSelectIcon {\n      & .ActionListItem-multiSelectIconRect {\n        fill: var(--color-canvas-default);\n        stroke: var(--color-border-default);\n        stroke-width: var(--borderWidth-thin, 1px);\n      }\n    }\n\n    & .ActionListItem-multiSelectIconRect {\n      fill: var(--color-canvas-default);\n      border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n    }\n  }\n\n  /* Autocomplete [aria-selected] items */\n\n  &[aria-selected='true'] {\n    font-weight: var(--base-text-weight-normal, 400);\n    background: var(--color-action-list-item-default-selected-bg);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-action-list-item-default-hover-bg);\n      }\n    }\n\n    &::before,\n    & + .ActionListItem::before {\n      visibility: hidden;\n    }\n\n    /* blue accent line */\n\n    &::after {\n      @mixin activeIndicatorLine calc(-1 * var(--base-size-4, 4px));\n    }\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    &:not(.ActionListItem--subItem) {\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--color-action-list-item-default-selected-bg);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-action-list-item-default-hover-bg);\n        }\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line  */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* disabled */\n\n  &.ActionListItem--disabled,\n  &[aria-disabled='true'] {\n    & .ActionListContent {\n      & .ActionListItem-label,\n      & .ActionListItem-description {\n        color: var(--color-primer-fg-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--color-primer-fg-disabled);\n      }\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* variants */\n\n  /* danger */\n  &.ActionListItem--danger {\n    & .ActionListItem-label {\n      color: var(--color-danger-fg);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--color-danger-fg);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--color-action-list-item-danger-hover-bg);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual {\n          color: var(--color-action-list-item-danger-hover-text);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--color-action-list-item-danger-active-bg);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual {\n          color: var(--color-action-list-item-danger-hover-text);\n        }\n      }\n    }\n  }\n}\n\n/* button or a href */\n.ActionListContent {\n  position: relative;\n  display: grid;\n  width: 100%;\n  padding-block: var(--actionListContent-paddingBlock);\n  padding-inline: var(--control-medium-paddingInline-condensed, 8px);\n  color: var(--color-fg-default);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--borderRadius-medium, 6px);\n  transition: background 33.333ms linear;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  grid-template-rows: min-content;\n  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n  align-items: start;\n\n  /* column-gap persists with empty grid-areas, margin applies only when children exist */\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap, 8px);\n  }\n\n  /* state */\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  /* disabled */\n  &[aria-disabled='true'] {\n    & .ActionListItem-label,\n    & .ActionListItem-description {\n      color: var(--color-primer-fg-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--color-primer-fg-disabled);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* collapsible item [aria-expanded] */\n\n  /* nesting (single level)\n   target items inside expanded subgroups */\n  &[aria-expanded] {\n    & + .ActionList--subGroup {\n      @media screen and (prefers-reduced-motion: no-preference) {\n        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n      }\n\n      & .ActionListContent {\n        padding-left: var(--base-size-24, 24px);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32, 32px);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36, 36px);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40, 40px);\n      }\n    }\n  }\n\n  &[aria-expanded='true'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(-1);\n    }\n\n    & + .ActionList--subGroup {\n      height: auto;\n      overflow: visible;\n      visibility: visible;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &.ActionListContent--hasActiveSubItem {\n      & > .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n    }\n  }\n\n  &[aria-expanded='false'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(1);\n    }\n\n    & + .ActionList--subGroup {\n      height: 0;\n      overflow: hidden;\n      visibility: hidden;\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--base-size-16, 16px)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--color-action-list-item-default-selected-bg);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n  }\n\n  &.ActionListContent--blockDescription {\n    /* if leading/trailing visual, align with first line of content */\n    & .ActionListItem-visual {\n      place-self: start;\n    }\n  }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n  grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n  grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n  grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n  grid-area: trailingAction;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n  grid-area: label;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4, 4px);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold, 600);\n  }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n  position: relative;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--base-size-8, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--text-body-size-small, 12px);\n  font-weight: var(--base-text-weight-normal, 400);\n  line-height: var(--text-body-lineHeight-small, calc(20 / 12));\n  color: var(--color-fg-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n  display: flex;\n  min-height: var(--control-medium-lineBoxHeight, 20px);\n  color: var(--color-fg-muted);\n  pointer-events: none;\n  fill: var(--color-fg-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-normal, 400);\n  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));\n  color: var(--color-fg-default);\n  grid-area: label;\n}\n\n.ActionListItem-label--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n  font-size: var(--text-body-size-small, 12px);\n  line-height: var(--text-body-lineHeight-small, calc(20 / 12));\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n}\n\n.ActionListItem-trailingAction {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n  & .ActionListItem-trailingAction {\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    & .ActionListItem-trailingAction {\n      visibility: visible;\n    }\n  }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n  /* with children */\n  &:not(:empty) {\n    display: flex;\n    padding-inline: var(--actionListContent-paddingBlock);\n    padding-block: var(--base-size-8, 8px);\n    font-size: var(--text-body-size-small, 12px);\n    line-height: var(--text-body-lineHeight-small, calc(20 / 12));\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-muted);\n    flex-direction: column;\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--borderWidth-thin, 1px);\n    padding: 0;\n    margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));\n    margin-block-end: var(--base-size-8, 8px);\n    margin-inline: calc(-1 * var(--base-size-8, 8px));\n    list-style: none;\n    background: var(--color-action-list-item-inline-divider);\n    border: 0;\n  }\n\n  & .ActionList-sectionDivider-title {\n    font-size: var(--text-body-size-small, 12px);\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-muted);\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));\n  margin-block-end: var(--base-size-8, 8px);\n  margin-inline: calc(-1 * var(--base-size-8, 8px));\n  background: var(--color-canvas-subtle);\n  border-top: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n  border-bottom: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8, 8px);\n    box-sizing: border-box;\n  }\n\n  &:first-child {\n    margin-block-start: 0;\n  }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4, 4px);\n  height: var(--base-size-24, 24px);\n  content: '';\n  background: var(--color-accent-fg);\n  border-radius: var(--borderRadius-medium, 6px);\n}\n"]}

data/app/components/primer/alpha/action_list.html.erb

@@ -1,4 +1,9 @@
 <%= render(Primer::BaseComponent.new(tag: :div)) do %>
+  <% if acts_as_form_input? %>
+    <span data-list-inputs="true">
+      <%= @form_builder.hidden_field(@input_name, multiple: multi_select?, skip_default_ids: true) %>
+    </span>
+  <% end %>
   <% if heading %>
     <%= heading %>
   <% end %>