primer_view_components 0.6.0 → 0.7.0

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

@@ -4,7 +4,6 @@ module Primer
   module Alpha
     # Add a general description of component here
     # Add additional usage considerations or best practices that may aid the user to use the component correctly.
-    # @accessibility Add any accessibility considerations
     class ActionBar < Primer::Component
       status :alpha
 
@@ -34,13 +33,6 @@ module Primer
         }
       }
 
-      # @example Default
-      #
-      #   <%= render(Primer::Alpha::ActionBar.new) do |component| %>
-      #     <% component.with_item_icon_button(icon: :search, label: "Search")
-      #     <% component.with_item_icon_button(icon: :pencil, label: "Edit") %>
-      #   <% end %>
-      #
       # @param size [Symbol] <%= one_of(Primer::Alpha::ActionBar::SIZE_OPTIONS) %>
       # @param overflow_menu [Boolean] Whether to render the overflow menu.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

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

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

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  --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n.ActionListHeader {\n  margin-left: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset {\n  padding: var(--base-size-8);\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(--borderColor-muted, 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);\n      content: '';\n      background: var(--borderColor-muted, 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: var(--control-transparent-bgColor-rest);\n  border-radius: var(--borderRadius-medium);\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(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &:active {\n        background-color: var(--control-transparent-bgColor-active);\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(--control-transparent-bgColor-hover);\n\n        &:not(.ActionListItem--navActive, :focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--borderWidth-thin) transparent;\n          outline-offset: calc(-1 * var(--borderWidth-thin));\n          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--control-transparent-bgColor-active);\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) transparent;\n        outline-offset: calc(-1 * var(--borderWidth-thin));\n        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n      }\n\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Autocomplete [aria-selected] items */\n\n  &[aria-selected='true'] {\n    font-weight: var(--base-text-weight-normal);\n    background: var(--control-transparent-bgColor-selected);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--control-transparent-bgColor-hover);\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));\n    }\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    /* provides a visual indication of the current item for Windows high-contrast mode */\n    outline: 2px solid transparent;\n\n    &:not(.ActionListItem--subItem) {\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--control-transparent-bgColor-selected);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\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(--control-fgColor-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--control-fgColor-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(--control-danger-fgColor-rest);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--control-danger-fgColor-rest);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--control-danger-bgColor-hover);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--control-danger-bgColor-active);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\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);\n  color: var(--control-fgColor-rest);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--borderRadius-medium);\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);\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(--control-fgColor-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--control-fgColor-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);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40);\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);\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)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--control-transparent-bgColor-selected);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\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  /*\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(--control-checked-bgColor-rest);\n        stroke: var(--control-checked-bgColor-rest);\n        stroke-width: var(--borderWidth-thin, 1px);\n      }\n\n      & .ActionListItem-multiSelectCheckmark {\n        fill: var(--fgColor-onEmphasis);\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(--bgColor-default);\n        stroke: var(--control-borderColor-rest);\n        stroke-width: var(--borderWidth-thin, 1px);\n      }\n    }\n\n    & .ActionListItem-multiSelectIconRect {\n      fill: var(--bgColor-default);\n      border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);\n    }\n  }\n\n  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\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);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold);\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);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-small);\n  color: var(--fgColor-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);\n  color: var(--fgColor-muted);\n  pointer-events: none;\n  fill: var(--fgColor-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium);\n  color: var(--fgColor-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);\n  line-height: var(--text-body-lineHeight-small);\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);\n    font-size: var(--text-body-size-small);\n    line-height: var(--text-body-lineHeight-small);\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-muted);\n    flex-direction: column;\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--borderWidth-thin);\n    padding: 0;\n    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n    margin-block-end: var(--base-size-8);\n    margin-inline: calc(-1 * var(--base-size-8));\n    list-style: none;\n    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n    border: 0;\n  }\n\n  & .ActionList-sectionDivider-title {\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-muted);\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n  margin-block-end: var(--base-size-8);\n  margin-inline: calc(-1 * var(--base-size-8));\n  background: var(--bgColor-muted);\n  border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8);\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)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4);\n  height: var(--base-size-24);\n  content: '';\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\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);\n}\n\n/* ActionList */\n\n.ActionListHeader {\n  margin-left: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset {\n  padding: var(--base-size-8);\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(--borderColor-muted, 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);\n      content: '';\n      background: var(--borderColor-muted, 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: var(--control-transparent-bgColor-rest);\n  border-radius: var(--borderRadius-medium);\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(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &:active {\n        background-color: var(--control-transparent-bgColor-active);\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(--control-transparent-bgColor-hover);\n\n        &:not(.ActionListItem--navActive, :focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--borderWidth-thin) transparent;\n          outline-offset: calc(-1 * var(--borderWidth-thin));\n          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--control-transparent-bgColor-active);\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) transparent;\n        outline-offset: calc(-1 * var(--borderWidth-thin));\n        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n      }\n\n      & .ActionListItem-label::before,\n      & + .ActionListItem .ActionListItem-label::before {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Autocomplete [aria-selected] items */\n\n  &[aria-selected='true'] {\n    font-weight: var(--base-text-weight-normal);\n    background: var(--control-transparent-bgColor-selected);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--control-transparent-bgColor-hover);\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));\n    }\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    /* provides a visual indication of the current item for Windows high-contrast mode */\n    outline: 2px solid transparent;\n\n    &:not(.ActionListItem--subItem) {\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--control-transparent-bgColor-selected);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\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(--control-fgColor-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--control-fgColor-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(--control-danger-fgColor-rest);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--control-danger-fgColor-rest);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--control-danger-bgColor-hover);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--control-danger-bgColor-active);\n\n        & .ActionListItem-label,\n        & .ActionListItem-visual,\n        & .ActionListItem-description {\n          color: var(--control-danger-fgColor-hover);\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);\n  color: var(--control-fgColor-rest);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--borderRadius-medium);\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);\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(--control-fgColor-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--control-fgColor-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);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40);\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);\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)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--control-transparent-bgColor-selected);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold);\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  /*\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(--control-checked-bgColor-rest);\n        stroke: var(--control-checked-bgColor-rest);\n        stroke-width: var(--borderWidth-thin, 1px);\n      }\n\n      & .ActionListItem-multiSelectCheckmark {\n        fill: var(--fgColor-onEmphasis);\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(--bgColor-default);\n        stroke: var(--control-borderColor-rest);\n        stroke-width: var(--borderWidth-thin, 1px);\n      }\n    }\n\n    & .ActionListItem-multiSelectIconRect {\n      fill: var(--bgColor-default);\n      border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);\n    }\n  }\n\n  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --actionListContent-paddingBlock: var(--control-large-paddingBlock);\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);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold);\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);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-small);\n  color: var(--fgColor-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);\n  color: var(--fgColor-muted);\n  pointer-events: none;\n  fill: var(--fgColor-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium);\n  color: var(--fgColor-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);\n  line-height: var(--text-body-lineHeight-small);\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);\n    font-size: var(--text-body-size-small);\n    line-height: var(--text-body-lineHeight-small);\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-muted);\n    flex-direction: column;\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--borderWidth-thin);\n    padding: 0;\n    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n    margin-block-end: var(--base-size-8);\n    margin-inline: calc(-1 * var(--base-size-8));\n    list-style: none;\n    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n    border: 0;\n  }\n\n  & .ActionList-sectionDivider-title {\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-muted);\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n  margin-block-end: var(--base-size-8);\n  margin-inline: calc(-1 * var(--base-size-8));\n  background: var(--bgColor-muted);\n  border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8);\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)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4);\n  height: var(--base-size-24);\n  content: '';\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}

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

@@ -141,8 +141,11 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                 return;
             const ariaChecked = item.getAttribute('aria-checked');
             const checked = ariaChecked !== 'true';
-            item.setAttribute('aria-checked', `${checked}`);
             if (this.selectVariant === 'single') {
+                // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+                if (checked) {
+                    item.setAttribute('aria-checked', 'true');
+                }
                 for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
                     if (checkedItem !== item) {
                         checkedItem.setAttribute('aria-checked', 'false');
@@ -150,6 +153,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                 }
                 __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
             }
+            else {
+                // multi-select mode allows unchecking a checked item
+                item.setAttribute('aria-checked', `${checked}`);
+            }
             __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
             if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
                 // prevent buttons from being clicked twice

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

@@ -139,14 +139,23 @@ export class ActionMenuElement extends HTMLElement {
       if (!item) return
       const ariaChecked = item.getAttribute('aria-checked')
       const checked = ariaChecked !== 'true'
-      item.setAttribute('aria-checked', `${checked}`)
+
       if (this.selectVariant === 'single') {
+        // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+        if (checked) {
+          item.setAttribute('aria-checked', 'true')
+        }
+
         for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
           if (checkedItem !== item) {
             checkedItem.setAttribute('aria-checked', 'false')
           }
         }
+
         this.#setDynamicLabel()
+      } else {
+        // multi-select mode allows unchecking a checked item
+        item.setAttribute('aria-checked', `${checked}`)
       }
 
       this.#updateInput()

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

@@ -27,275 +27,6 @@ module Primer
 
       alias preload? preload
 
-      # @example Default
-      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-0") do |c| %>
-      #    <% c.with_show_button { "Menu" } %>
-      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
-      #      Primer Design
-      #    <% end %>
-      #    <% c.with_item(tag: :button, type: "button", onclick: "() => {}") do %>
-      #      Quote Reply
-      #    <% end %>
-      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
-      #      Copy Text
-      #    <% end %>
-      #    <% c.with_item(href: "https://google.com", form_arguments: { name: "foo", value: "bar", method: :post }) do %>
-      #      Submit form
-      #    <% end %>
-      #  <% end %>
-      #
-      # @example With caret
-      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-1") do |c| %>
-      #    <% c.with_show_button do |button| %>
-      #      <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #      Menu
-      #    <% end %>
-      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
-      #      Primer Design
-      #    <% end %>
-      #    <% c.with_item(tag: :button, type: "button") do %>
-      #      Quote Reply
-      #    <% end %>
-      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
-      #      Copy Text
-      #    <% end %>
-      #  <% end %>
-      #
-      # @example With `IconButton` trigger
-      #   @description
-      #     Set `icon:` to the octicon you want to use. Always provide an accessible name for the menu by setting `aria-label`.
-      #   @code
-      #    <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-2") do |c| %>
-      #      <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
-      #      <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
-      #        Primer Design Link
-      #      <% end %>
-      #      <% c.with_item(tag: :button, type: "button") do %>
-      #        Quote Reply
-      #      <% end %>
-      #      <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
-      #        Copy Text
-      #      <% end %>
-      #    <% end %>
-      #
-      # @example With divider
-      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-3") do |c| %>
-      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
-      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
-      #      Primer Design Link
-      #    <% end %>
-      #    <% c.with_item(tag: :button, type: "button") do %>
-      #      Quote Reply
-      #    <% end %>
-      #    <% c.with_divider %>
-      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
-      #      Copy Text
-      #    <% end %>
-      #  <% end %>
-      #
-      # @example With danger item
-      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-4") do |c| %>
-      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
-      #    <% c.with_item(tag: :a, href: "https://primer.style/design/") do %>
-      #      Primer Design Link
-      #    <% end %>
-      #    <% c.with_item(tag: :button, type: "button") do %>
-      #      Quote Reply
-      #    <% end %>
-      #    <% c.with_item(tag: :"clipboard-copy", value: "Text to copy") do %>
-      #      Copy Text
-      #    <% end %>
-      #    <% c.with_item(tag: :button, type: "button", scheme: :danger) do %>
-      #      Delete
-      #    <% end %>
-      #  <% end %>
-      #
-      # @example With center align
-      #   @description
-      #     Align the menu to the center of the trigger button
-      #   @code
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-5", anchor_align: :center, anchor_side: :outside_top) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside top
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-6", anchor_align: :center, anchor_side: :outside_left) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside left
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-7", anchor_align: :center, anchor_side: :outside_right) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside right
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-8", anchor_align: :center, anchor_side: :outside_bottom) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside bottom
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #
-      # @example With start align
-      #   @description
-      #     Align the menu to the start of the trigger button
-      #   @code
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-9", anchor_align: :start, anchor_side: :outside_top) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside top
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-10", anchor_align: :start, anchor_side: :outside_left) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside left
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-11", anchor_align: :start, anchor_side: :outside_right) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside right
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-12", anchor_align: :start, anchor_side: :outside_bottom) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside bottom
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #
-      # @example With end align
-      #   @description
-      #     Align the menu to the end of the trigger button
-      #   @code
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-13", anchor_align: :end, anchor_side: :outside_top) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside top
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-14", anchor_align: :end, anchor_side: :outside_left) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside left
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-15", anchor_align: :end, anchor_side: :outside_right) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside right
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #     <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-16", anchor_align: :end, anchor_side: :outside_bottom) do |c| %>
-      #       <% c.with_show_button do |button| %>
-      #         <% button.with_trailing_action_icon(icon: "triangle-down") %>
-      #         Outside bottom
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 1 that does something
-      #       <% end %>
-      #       <% c.with_item do %>
-      #         Item 2 that does another thing
-      #       <% end %>
-      #     <% end %>
-      #
-      # @example With deferred menu content loaded with an `include-fragment`
-      #  <%= render Primer::Alpha::ActionMenu.new(menu_id: "my-action-menu-17", src: "/") do |c| %>
-      #    <% c.with_show_button(icon: :"kebab-horizontal", "aria-label": "Menu") %>
-      #  <% end %>
-      #
-      # @example Using a single-select ActionMenu as a form input
-      #   <%= form_with(url: action_menu_form_action_path) do |f| %>
-      #     <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Strategy", form_arguments: { builder: f, name: "foo" })) do |menu| %>
-      #       <% menu.with_show_button { "Strategy" } %>
-      #       <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
-      #       <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
-      #       <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
-      #       <% menu.with_item(label: "Resolve", data: { value: "resolve" }) %>
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Using a multi-select ActionMenu as a form input
-      #   <%= form_with(url: action_menu_form_action_path) do |f| %>
-      #     <%= render(Primer::Alpha::ActionMenu.new(select_variant: :multiple, form_arguments: { builder: f, name: "foo" })) do |menu| %>
-      #       <% menu.with_show_button { "Strategy" } %>
-      #       <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
-      #       <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
-      #       <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
-      #       <% menu.with_item(label: "Resolve", data: { value: "resolve" }) %>
-      #     <% end %>
-      #   <% end %>
-      #
       # @param menu_id [String] Id of the menu.
       # @param anchor_align [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>.
       # @param anchor_side [Symbol] <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>.

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

@@ -7,18 +7,6 @@ module Primer
       class Item < Primer::Component
         status :deprecated
 
-        # @example Default
-        #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
-        #     <% component.results(classes: "custom-class") do %>
-        #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
-        #         Apple
-        #       <% end %>
-        #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do %>
-        #         Orange
-        #       <% end %>
-        #     <% end %>
-        #   <% end %>
-        #
         # @param value [String] Value of the item.
         # @param selected [Boolean] Whether the item is selected.
         # @param disabled [Boolean] Whether the item is disabled.

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,4BACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,6DAAuC,CAEvC,2EAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,6DAAkC,CAClC,6GAAgE,CAChE,4CAAyC,CACzC,kEAAwC,CALxC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,mEAAwC,CACxC,QAAS,CAPT,oDAA6B,CAK7B,cAAe,CAVf,aAAc,CAId,gDAA6C,CAD7C,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,sEAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,sEAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: 6px;\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: 4px 8px;\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--borderColor-accent-emphasis);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: 8px;\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: 13px;\n  list-style: none;\n  background: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: 4px 8px;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--overlay-bgColor);\n  border: 0;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n  border-color: var(--focus-outlineColor);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}
+{"version":3,"sources":["auto_complete.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss"],"names":[],"mappings":"AAMA,4BACE,aAAc,CACd,iBACF,CAGA,2BACE,cAAe,CACf,gBACF,CAGA,4BACE,2BACE,aAAc,CACd,iBACF,CACF,CAGA,mBAEE,cAAe,CADf,iBAEF,CAGA,iCAGE,kBAAmB,CAFnB,mBAAoB,CACpB,eAuBF,CApBE,8CCnCA,6DAAuC,CAEvC,2EAAmD,CADnD,YDsCA,CAEA,+CAGE,WAAY,CACZ,eAAgB,CAFhB,eAAgB,CADhB,SAYF,CAPE,qDACE,eACF,CAEA,6DACE,eACF,CAKJ,sBAUE,6DAAkC,CAClC,6GAAgE,CAChE,gDAAyC,CACzC,kEAAwC,CALxC,cAAe,CANf,MAAO,CAOP,eAAgB,CAHhB,eAAgB,CADhB,cAAe,CAEf,eAAgB,CANhB,iBAAkB,CAGlB,iBAAkB,CADlB,UAWF,CAKA,mBAYE,mEAAwC,CACxC,QAAS,CAPT,oDAA6B,CAK7B,cAAe,CAVf,aAAc,CAId,gDAA6C,CAD7C,eAAgB,CADhB,eAAgB,CAIhB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBAAmB,CARnB,UAoCF,CAvBE,yBAGE,4EAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,2BACE,uBACF,CAGF,uGAKE,4EAAgD,CAFhD,2DAAgC,CAChC,oBAOF,CAHE,6GACE,uBACF","file":"auto_complete.css","sourcesContent":["/* autocomplete */\n\n/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796\n** AutoComplete relies on FormControl, Overlay and ActionList CSS */\n\n/* Stacked label (default) */\n.autocomplete-label-stacked {\n  display: block;\n  margin-bottom: 6px;\n}\n\n/* Inline label (non-default) */\n.autocomplete-label-inline {\n  display: inline;\n  margin-right: 6px;\n}\n\n/* Switch to stacked at smaller viewport */\n@media (max-width: 543.98px) {\n  .autocomplete-label-inline {\n    display: block;\n    margin-bottom: 6px;\n  }\n}\n\n/* Wrapper for the input and result elements to ensure alignment */\n.autocomplete-body {\n  position: relative;\n  display: inline;\n}\n\n/* Wrapper and conditional styles for when an icon is added */\n.autocomplete-embedded-icon-wrap {\n  display: inline-flex;\n  padding: 4px 8px;\n  align-items: center;\n\n  &:focus-within {\n    border-color: var(--borderColor-accent-emphasis);\n\n    @mixin focusBoxShadowInset;\n  }\n\n  & .form-control {\n    padding: 0;\n    margin-left: 8px;\n    border: none;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:focus-visible {\n      box-shadow: none;\n    }\n  }\n}\n\n/* A pop up list of items used to show autocompleted results */\n.autocomplete-results {\n  position: absolute;\n  left: 0;\n  z-index: 99;\n  width: max-content;\n  min-width: 100%;\n  max-height: 20em;\n  overflow-y: auto;\n  font-size: 13px;\n  list-style: none;\n  background: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-resting-medium);\n}\n\n/* One of the items that appears within an autocomplete group\n** Bold black text on white background */\n\n.autocomplete-item {\n  display: block;\n  width: 100%;\n  padding: 4px 8px;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  text-align: left;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: var(--overlay-bgColor);\n  border: 0;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n\n  &.selected,\n  &[aria-selected='true'],\n  &.navigation-focus {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    /* Inherit color on all child elements to ensure enough contrast */\n    & * {\n      color: inherit !important;\n    }\n  }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n  border-color: var(--focus-outlineColor);\n  outline: none;\n  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n"]}