openproject-primer_view_components 0.50.1 → 0.51.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +17 -0
  3. data/app/assets/javascripts/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -0
  4. data/app/assets/javascripts/components/primer/open_project/danger_confirmation_dialog_form_helper.d.ts +13 -0
  5. data/app/assets/javascripts/components/primer/primer.d.ts +2 -0
  6. data/app/assets/javascripts/components/primer/utils.d.ts +1 -0
  7. data/app/assets/javascripts/primer_view_components.js +1 -1
  8. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  9. data/app/assets/styles/primer_view_components.css +1 -1
  10. data/app/assets/styles/primer_view_components.css.map +1 -1
  11. data/app/components/primer/alpha/action_list/item.html.erb +1 -4
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.json +2 -6
  14. data/app/components/primer/alpha/action_list.css.map +1 -1
  15. data/app/components/primer/alpha/action_list.pcss +10 -43
  16. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -0
  17. data/app/components/primer/alpha/action_menu/action_menu_element.js +31 -1
  18. data/app/components/primer/alpha/action_menu/action_menu_element.ts +37 -0
  19. data/app/components/primer/alpha/action_menu.rb +6 -0
  20. data/app/components/primer/alpha/select_panel_element.js +6 -19
  21. data/app/components/primer/alpha/select_panel_element.ts +9 -21
  22. data/app/components/primer/alpha/text_field.css +1 -1
  23. data/app/components/primer/alpha/text_field.css.json +30 -30
  24. data/app/components/primer/alpha/text_field.css.map +1 -1
  25. data/app/components/primer/alpha/text_field.pcss +2 -3
  26. data/app/components/primer/open_project/danger_confirmation_dialog/confirmation_check_box.rb +44 -0
  27. data/app/components/primer/open_project/danger_confirmation_dialog/form_wrapper.html.erb +7 -0
  28. data/app/components/primer/open_project/danger_confirmation_dialog/form_wrapper.rb +26 -0
  29. data/app/components/primer/open_project/danger_confirmation_dialog.html.erb +19 -0
  30. data/app/components/primer/open_project/danger_confirmation_dialog.rb +104 -0
  31. data/app/components/primer/open_project/danger_confirmation_dialog_form_helper.d.ts +13 -0
  32. data/app/components/primer/open_project/danger_confirmation_dialog_form_helper.js +44 -0
  33. data/app/components/primer/open_project/danger_confirmation_dialog_form_helper.ts +36 -0
  34. data/app/components/primer/primer.d.ts +2 -0
  35. data/app/components/primer/primer.js +2 -0
  36. data/app/components/primer/primer.ts +2 -0
  37. data/app/components/primer/utils.d.ts +1 -0
  38. data/app/components/primer/utils.js +16 -0
  39. data/app/components/primer/utils.ts +16 -0
  40. data/app/lib/primer/forms/acts_as_component.rb +9 -2
  41. data/app/lib/primer/forms/base.rb +0 -5
  42. data/app/lib/primer/forms/base_component.rb +5 -3
  43. data/app/lib/primer/forms/radio_button_group.html.erb +1 -1
  44. data/app/lib/primer/forms/utils.rb +16 -1
  45. data/lib/primer/view_components/version.rb +2 -2
  46. data/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb +3 -5
  47. data/previews/primer/open_project/danger_confirmation_dialog_preview/playground.html.erb +13 -0
  48. data/previews/primer/open_project/danger_confirmation_dialog_preview/with_additional_details.html.erb +40 -0
  49. data/previews/primer/open_project/danger_confirmation_dialog_preview/with_form.html.erb +11 -0
  50. data/previews/primer/open_project/danger_confirmation_dialog_preview/with_form_builder_form.html.erb +13 -0
  51. data/previews/primer/open_project/danger_confirmation_dialog_preview.rb +71 -0
  52. data/static/classes.json +6 -0
  53. metadata +28 -10
@@ -13,10 +13,7 @@
13
13
  </span>
14
14
  <% elsif list.select_variant == :multiple_checkbox %>
15
15
  <span class="ActionListItem-visual ActionListItem-action--leading">
16
- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionListItem-multiSelectIcon">
17
- <rect x="2" y="2" width="12" height="12" rx="4" class="ActionListItem-multiSelectIconRect"></rect>
18
- <path fill-rule="evenodd" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z" class="ActionListItem-multiSelectCheckmark"></path>
19
- </svg>
16
+ <div class="FormControl-checkbox"></div>
20
17
  </span>
21
18
  <% end %>
22
19
  <% if leading_visual %>
@@ -1 +1 @@
1
- :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock)}action-list,nav-list{display:block}.ActionListHeader{margin-bottom:var(--base-size-16);margin-left:var(--base-size-8)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{background:var(--borderColor-muted);content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{height:var(--borderWidth-thin)}:is(.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,:is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest);border-radius:var(--borderRadius-medium);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){:is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--control-transparent-bgColor-hover)}}:is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background-color:var(--control-transparent-bgColor-active)}@media (hover:hover){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--control-transparent-bgColor-hover);cursor:pointer}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background:var(--control-transparent-bgColor-active)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected);font-weight:var(--base-text-weight-normal)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-4)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover)}}.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);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-description,:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-label{color:var(--control-fgColor-disabled)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-visual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is(.ActionListItem.ActionListItem--disabled,.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)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}}:is(.ActionListItem.ActionListItem--danger .ActionListContent):active{background:var(--control-danger-bgColor-active)}:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}.ActionListContent{background-color:initial;border:none;border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);display:grid;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%;-webkit-tap-highlight-color:transparent;align-items:start;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}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-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)}}:is(.ActionListContent[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-24)}:is(.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-32)}:is(.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-36)}:is(.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-40)}.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)}.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)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.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);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-singleSelectCheckmark{visibility:visible}:is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-multiSelectIcon) .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest);stroke:var(--control-checked-bgColor-rest);stroke-width:var(--borderWidth-thin,1px)}:is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-multiSelectIcon) .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis)}:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-singleSelectCheckmark{transition:visibility 0s linear .2s;visibility:hidden}:is(:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-multiSelectIcon) .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default);stroke:var(--control-borderColor-rest);stroke-width:var(--borderWidth-thin,1px)}:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest)}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}}.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-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8);position:relative}.ActionListItem-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);line-height:var(--text-body-lineHeight-small)}.ActionListItem-action,.ActionListItem-visual{color:var(--fgColor-muted);display:flex;min-height:var(--control-medium-lineBoxHeight);pointer-events:none;fill:var(--fgColor-muted);align-items:center}.ActionListItem-label{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-normal);grid-area:label;line-height:var(--text-body-lineHeight-medium);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);line-height:var(--text-body-lineHeight-small)}.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}:is(.ActionListItem--trailingActionHover:hover,.ActionListItem--trailingActionHover:focus-within) .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted);display:flex;flex-direction:column;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-small);padding-block:var(--base-size-8);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted);border:0;display:block;height:var(--borderWidth-thin);list-style:none;margin-block-end:var(--base-size-8);margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-inline:calc(var(--base-size-8)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{align-self:flex-start;color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted);border-bottom:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8);margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-inline:calc(var(--base-size-8)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
1
+ :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock)}action-list,nav-list{display:block}.ActionListHeader{margin-bottom:var(--base-size-16);margin-left:var(--base-size-8)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{background:var(--borderColor-muted);content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}:is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before{height:var(--borderWidth-thin)}:is(.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,:is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label:before,:is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest);border-radius:var(--borderRadius-medium);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){:is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--control-transparent-bgColor-hover)}}:is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background-color:var(--control-transparent-bgColor-active)}@media (hover:hover){:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover{background-color:var(--control-transparent-bgColor-hover);cursor:pointer}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active{background:var(--control-transparent-bgColor-active)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active .ActionListItem-label:before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected);font-weight:var(--base-text-weight-normal)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-4)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover)}}.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);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-description,:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-label{color:var(--control-fgColor-disabled)}:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-visual{fill:var(--control-fgColor-disabled)}@media (hover:hover){:is(.ActionListItem.ActionListItem--disabled,.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)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}}:is(.ActionListItem.ActionListItem--danger .ActionListContent):active{background:var(--control-danger-bgColor-active)}:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}.ActionListContent{background-color:initial;border:none;border-radius:var(--borderRadius-medium);color:var(--control-fgColor-rest);display:grid;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%;-webkit-tap-highlight-color:transparent;align-items:start;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}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-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)}}:is(.ActionListContent[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-24)}:is(.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-32)}:is(.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-36)}:is(.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup) .ActionListContent{padding-left:var(--base-size-40)}.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)}.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)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.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);border-radius:var(--borderRadius-medium);content:"";height:var(--base-size-24);left:calc(var(--base-size-8)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4)}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox{background:var(--control-checked-bgColor-rest);border-color:var(--control-checked-borderColor-rest);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0s}:is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox):before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-singleSelectCheckmark{visibility:visible}:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-singleSelectCheckmark{transition:visibility 0s linear .2s;visibility:hidden}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock)}}.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-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8);position:relative}.ActionListItem-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);line-height:var(--text-body-lineHeight-small)}.ActionListItem-action,.ActionListItem-visual{color:var(--fgColor-muted);display:flex;min-height:var(--control-medium-lineBoxHeight);pointer-events:none;fill:var(--fgColor-muted);align-items:center}.ActionListItem-label{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-normal);grid-area:label;line-height:var(--text-body-lineHeight-medium);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);line-height:var(--text-body-lineHeight-small)}.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}:is(.ActionListItem--trailingActionHover:hover,.ActionListItem--trailingActionHover:focus-within) .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted);display:flex;flex-direction:column;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-small);padding-block:var(--base-size-8);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted);border:0;display:block;height:var(--borderWidth-thin);list-style:none;margin-block-end:var(--base-size-8);margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-inline:calc(var(--base-size-8)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{align-self:flex-start;color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-semibold)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted);border-bottom:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8);margin-block-start:calc(var(--base-size-8) - var(--borderWidth-thin));margin-inline:calc(var(--base-size-8)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
@@ -82,14 +82,10 @@
82
82
  ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before",
83
83
  ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before",
84
84
  ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after",
85
- ":is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-multiSelectCheckmark",
85
+ ":is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox",
86
+ ":is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox):before",
86
87
  ":is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-singleSelectCheckmark",
87
- ":is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-multiSelectIcon) .ActionListItem-multiSelectIconRect",
88
- ":is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-multiSelectIcon) .ActionListItem-multiSelectCheckmark",
89
- ":is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-multiSelectCheckmark",
90
88
  ":is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-singleSelectCheckmark",
91
- ":is(:is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-multiSelectIcon) .ActionListItem-multiSelectIconRect",
92
- ":is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-multiSelectIconRect",
93
89
  ".ActionListContent.ActionListContent--sizeLarge",
94
90
  ".ActionListContent.ActionListContent--sizeXLarge",
95
91
  ".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",
@@ -1 +1 @@
1
- {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":["/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable selector-max-specificity */\n/* stylelint-disable max-nesting-depth */\n:root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n/* stylelint-disable-next-line selector-max-type */\naction-list {\n display: block;\n}\n\n/* stylelint-disable-next-line selector-max-type */\nnav-list {\n display: block;\n}\n\n.ActionListHeader {\n margin-bottom: var(--base-size-16);\n margin-left: var(--base-size-8);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset,\n.ActionListWrap--inset[popover] {\n padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\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 /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--actionListContent-paddingBlock);\n /* stylelint-disable-next-line primer/spacing */\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 /* stylelint-disable-next-line primer/spacing */\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:\n opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),\n 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:\n visibility 0 linear 0,\n opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\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:\n visibility 0 linear 50ms,\n opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\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) 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/* have leading visual svg filled with chosen color */\n\n/* stylelint-disable-next-line selector-max-type */\n.ActionListItem-visual--leading svg {\n fill: currentcolor;\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 font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-muted);\n flex-direction: column;\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\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 /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\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 align-self: flex-start;\n }\n}\n\n.ActionList-sectionDivider--filled {\n /* stylelint-disable-next-line primer/spacing */\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"]}
1
+ {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":["/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable selector-max-specificity */\n/* stylelint-disable max-nesting-depth */\n:root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\n/* stylelint-disable-next-line selector-max-type */\naction-list {\n display: block;\n}\n\n/* stylelint-disable-next-line selector-max-type */\nnav-list {\n display: block;\n}\n\n.ActionListHeader {\n margin-bottom: var(--base-size-16);\n margin-left: var(--base-size-8);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset,\n.ActionListWrap--inset[popover] {\n padding: var(--base-size-8);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n /* stylelint-disable-next-line primer/spacing */\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\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 /* stylelint-disable-next-line primer/spacing */\n padding-block: var(--actionListContent-paddingBlock);\n /* stylelint-disable-next-line primer/spacing */\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 /* stylelint-disable-next-line primer/spacing */\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:\n opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),\n 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 & .FormControl-checkbox {\n background: var(--control-checked-bgColor-rest);\n border-color: var(--control-checked-borderColor-rest);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\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/* have leading visual svg filled with chosen color */\n\n/* stylelint-disable-next-line selector-max-type */\n.ActionListItem-visual--leading svg {\n fill: currentcolor;\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 font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-small);\n color: var(--fgColor-muted);\n flex-direction: column;\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\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 /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-muted);\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 align-self: flex-start;\n }\n}\n\n.ActionList-sectionDivider--filled {\n /* stylelint-disable-next-line primer/spacing */\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"]}
@@ -448,64 +448,31 @@ nav-list {
448
448
  */
449
449
  &[aria-checked='true'],
450
450
  &[aria-selected='true'] {
451
- /* multiselect checkmark */
452
- & .ActionListItem-multiSelectCheckmark {
453
- visibility: visible;
454
- opacity: 1;
455
- transition:
456
- visibility 0 linear 0,
457
- opacity 50ms;
451
+ & .FormControl-checkbox {
452
+ background: var(--control-checked-bgColor-rest);
453
+ border-color: var(--control-checked-borderColor-rest);
454
+ transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
455
+
456
+ &::before {
457
+ visibility: visible;
458
+ transition: visibility 0s linear 0s;
459
+ animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
460
+ }
458
461
  }
459
462
 
460
463
  /* singleselect checkmark */
461
464
  & .ActionListItem-singleSelectCheckmark {
462
465
  visibility: visible;
463
466
  }
464
-
465
- /* checkbox */
466
- & .ActionListItem-multiSelectIcon {
467
- & .ActionListItem-multiSelectIconRect {
468
- fill: var(--control-checked-bgColor-rest);
469
- stroke: var(--control-checked-bgColor-rest);
470
- stroke-width: var(--borderWidth-thin, 1px);
471
- }
472
-
473
- & .ActionListItem-multiSelectCheckmark {
474
- fill: var(--fgColor-onEmphasis);
475
- }
476
- }
477
467
  }
478
468
 
479
469
  &[aria-checked='false'],
480
470
  &[aria-selected='false'] {
481
- /* multiselect checkmark */
482
- & .ActionListItem-multiSelectCheckmark {
483
- visibility: hidden;
484
- opacity: 0;
485
- transition:
486
- visibility 0 linear 50ms,
487
- opacity 50ms;
488
- }
489
-
490
471
  /* singleselect checkmark */
491
472
  & .ActionListItem-singleSelectCheckmark {
492
473
  visibility: hidden;
493
474
  transition: visibility 0s linear 200ms;
494
475
  }
495
-
496
- /* checkbox */
497
- & .ActionListItem-multiSelectIcon {
498
- & .ActionListItem-multiSelectIconRect {
499
- fill: var(--bgColor-default);
500
- stroke: var(--control-borderColor-rest);
501
- stroke-width: var(--borderWidth-thin, 1px);
502
- }
503
- }
504
-
505
- & .ActionListItem-multiSelectIconRect {
506
- fill: var(--bgColor-default);
507
- border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
508
- }
509
476
  }
510
477
 
511
478
  /* sizes */
@@ -1,5 +1,6 @@
1
1
  import '@oddbird/popover-polyfill';
2
2
  import type { IncludeFragmentElement } from '@github/include-fragment-element';
3
+ import AnchoredPositionElement from '../../anchored_position';
3
4
  type SelectVariant = 'none' | 'single' | 'multiple' | null;
4
5
  type SelectedItem = {
5
6
  label: string | null | undefined;
@@ -9,6 +10,7 @@ type SelectedItem = {
9
10
  export declare class ActionMenuElement extends HTMLElement {
10
11
  #private;
11
12
  includeFragment: IncludeFragmentElement;
13
+ overlay: AnchoredPositionElement;
12
14
  get selectVariant(): SelectVariant;
13
15
  set selectVariant(variant: SelectVariant);
14
16
  get dynamicLabelPrefix(): string;
@@ -15,9 +15,10 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
15
15
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
16
16
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
17
17
  };
18
- var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
18
+ var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_intersectionObserver, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
19
19
  import { controller, target } from '@github/catalyst';
20
20
  import '@oddbird/popover-polyfill';
21
+ import { observeMutationsUntilConditionMet } from '../../utils';
21
22
  const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
22
23
  const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`);
23
24
  let ActionMenuElement = class ActionMenuElement extends HTMLElement {
@@ -28,6 +29,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
28
29
  _ActionMenuElement_originalLabel.set(this, '');
29
30
  _ActionMenuElement_inputName.set(this, '');
30
31
  _ActionMenuElement_invokerBeingClicked.set(this, false);
32
+ _ActionMenuElement_intersectionObserver.set(this, void 0);
31
33
  }
32
34
  get selectVariant() {
33
35
  return this.getAttribute('data-select-variant');
@@ -103,6 +105,30 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
103
105
  signal,
104
106
  });
105
107
  }
108
+ // The code below updates the menu (i.e. overlay) position whenever the invoker button
109
+ // changes position within its scroll container.
110
+ //
111
+ // See: https://github.com/primer/view_components/issues/3175
112
+ const scrollUpdater = () => {
113
+ if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
114
+ this.overlay?.update();
115
+ }
116
+ };
117
+ __classPrivateFieldSet(this, _ActionMenuElement_intersectionObserver, new IntersectionObserver(entries => {
118
+ for (const entry of entries) {
119
+ const elem = entry.target;
120
+ if (elem === this.invokerElement) {
121
+ if (entry.isIntersecting) {
122
+ // eslint-disable-next-line github/prefer-observers
123
+ window.addEventListener('scroll', scrollUpdater, { capture: true });
124
+ }
125
+ else {
126
+ window.removeEventListener('scroll', scrollUpdater, { capture: true });
127
+ }
128
+ }
129
+ }
130
+ }), "f");
131
+ observeMutationsUntilConditionMet(this, () => Boolean(this.invokerElement), () => __classPrivateFieldGet(this, _ActionMenuElement_intersectionObserver, "f").observe(this.invokerElement));
106
132
  }
107
133
  disconnectedCallback() {
108
134
  __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
@@ -240,6 +266,7 @@ _ActionMenuElement_abortController = new WeakMap();
240
266
  _ActionMenuElement_originalLabel = new WeakMap();
241
267
  _ActionMenuElement_inputName = new WeakMap();
242
268
  _ActionMenuElement_invokerBeingClicked = new WeakMap();
269
+ _ActionMenuElement_intersectionObserver = new WeakMap();
243
270
  _ActionMenuElement_instances = new WeakSet();
244
271
  _ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableItems() {
245
272
  const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
@@ -443,6 +470,9 @@ _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
443
470
  __decorate([
444
471
  target
445
472
  ], ActionMenuElement.prototype, "includeFragment", void 0);
473
+ __decorate([
474
+ target
475
+ ], ActionMenuElement.prototype, "overlay", void 0);
446
476
  ActionMenuElement = __decorate([
447
477
  controller
448
478
  ], ActionMenuElement);
@@ -1,6 +1,8 @@
1
1
  import {controller, target} from '@github/catalyst'
2
2
  import '@oddbird/popover-polyfill'
3
3
  import type {IncludeFragmentElement} from '@github/include-fragment-element'
4
+ import AnchoredPositionElement from '../../anchored_position'
5
+ import {observeMutationsUntilConditionMet} from '../../utils'
4
6
 
5
7
  type SelectVariant = 'none' | 'single' | 'multiple' | null
6
8
  type SelectedItem = {
@@ -17,10 +19,14 @@ export class ActionMenuElement extends HTMLElement {
17
19
  @target
18
20
  includeFragment: IncludeFragmentElement
19
21
 
22
+ @target
23
+ overlay: AnchoredPositionElement
24
+
20
25
  #abortController: AbortController
21
26
  #originalLabel = ''
22
27
  #inputName = ''
23
28
  #invokerBeingClicked = false
29
+ #intersectionObserver: IntersectionObserver
24
30
 
25
31
  get selectVariant(): SelectVariant {
26
32
  return this.getAttribute('data-select-variant') as SelectVariant
@@ -106,6 +112,37 @@ export class ActionMenuElement extends HTMLElement {
106
112
  signal,
107
113
  })
108
114
  }
115
+
116
+ // The code below updates the menu (i.e. overlay) position whenever the invoker button
117
+ // changes position within its scroll container.
118
+ //
119
+ // See: https://github.com/primer/view_components/issues/3175
120
+
121
+ const scrollUpdater = () => {
122
+ if (this.#isOpen()) {
123
+ this.overlay?.update()
124
+ }
125
+ }
126
+
127
+ this.#intersectionObserver = new IntersectionObserver(entries => {
128
+ for (const entry of entries) {
129
+ const elem = entry.target
130
+ if (elem === this.invokerElement) {
131
+ if (entry.isIntersecting) {
132
+ // eslint-disable-next-line github/prefer-observers
133
+ window.addEventListener('scroll', scrollUpdater, {capture: true})
134
+ } else {
135
+ window.removeEventListener('scroll', scrollUpdater, {capture: true})
136
+ }
137
+ }
138
+ }
139
+ })
140
+
141
+ observeMutationsUntilConditionMet(
142
+ this,
143
+ () => Boolean(this.invokerElement),
144
+ () => this.#intersectionObserver.observe(this.invokerElement!),
145
+ )
109
146
  }
110
147
 
111
148
  disconnectedCallback() {
@@ -224,6 +224,12 @@ module Primer
224
224
  @system_arguments[:"data-dynamic-label"] = "" if dynamic_label
225
225
  @system_arguments[:"data-dynamic-label-prefix"] = dynamic_label_prefix if dynamic_label_prefix.present?
226
226
 
227
+ overlay_arguments[:data] = merge_data(
228
+ overlay_arguments, data: {
229
+ target: "action-menu.overlay"
230
+ }
231
+ )
232
+
227
233
  @overlay = Primer::Alpha::Overlay.new(
228
234
  id: "#{@menu_id}-overlay",
229
235
  title: "Menu",
@@ -15,12 +15,13 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
15
15
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
16
16
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
17
17
  };
18
- var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_hasLoadedData, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
18
+ var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_hasLoadedData, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
19
19
  import { getAnchoredPosition } from '@primer/behaviors';
20
20
  import { controller, target } from '@github/catalyst';
21
21
  import { IncludeFragmentElement } from '@github/include-fragment-element';
22
22
  import '@primer/live-region-element';
23
23
  import '@oddbird/popover-polyfill';
24
+ import { observeMutationsUntilConditionMet } from '../utils';
24
25
  const validSelectors = ['[role="option"]'];
25
26
  const menuItemSelectors = validSelectors.join(',');
26
27
  const visibleMenuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(',');
@@ -172,11 +173,11 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
172
173
  __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
173
174
  __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_softDisableItems).call(this);
174
175
  updateWhenVisible(this);
175
- __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.remoteInput), () => {
176
+ observeMutationsUntilConditionMet(this, () => Boolean(this.remoteInput), () => {
176
177
  this.remoteInput.addEventListener('loadstart', this, { signal });
177
178
  this.remoteInput.addEventListener('loadend', this, { signal });
178
179
  });
179
- __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.includeFragment), () => {
180
+ observeMutationsUntilConditionMet(this, () => Boolean(this.includeFragment), () => {
180
181
  this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
181
182
  this.includeFragment.addEventListener('error', this, { signal });
182
183
  this.includeFragment.addEventListener('loadend', this, { signal });
@@ -201,7 +202,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
201
202
  }
202
203
  }
203
204
  }), "f");
204
- __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.dialog), () => {
205
+ observeMutationsUntilConditionMet(this, () => Boolean(this.dialog), () => {
205
206
  __classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
206
207
  this.dialog.addEventListener('close', this, { signal });
207
208
  if (this.getAttribute('data-open-on-load') === 'true') {
@@ -209,7 +210,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
209
210
  }
210
211
  });
211
212
  if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
212
- __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => this.items.length > 0, () => {
213
+ observeMutationsUntilConditionMet(this, () => this.items.length > 0, () => {
213
214
  __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
214
215
  __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
215
216
  });
@@ -399,20 +400,6 @@ _SelectPanelElement_loadingDelayTimeoutId = new WeakMap();
399
400
  _SelectPanelElement_loadingAnnouncementTimeoutId = new WeakMap();
400
401
  _SelectPanelElement_hasLoadedData = new WeakMap();
401
402
  _SelectPanelElement_instances = new WeakSet();
402
- _SelectPanelElement_waitForCondition = function _SelectPanelElement_waitForCondition(condition, body) {
403
- if (condition()) {
404
- body();
405
- }
406
- else {
407
- const mutationObserver = new MutationObserver(() => {
408
- if (condition()) {
409
- body();
410
- mutationObserver.disconnect();
411
- }
412
- });
413
- mutationObserver.observe(this, { childList: true, subtree: true });
414
- }
415
- };
416
403
  _SelectPanelElement_softDisableItems = function _SelectPanelElement_softDisableItems() {
417
404
  const { signal } = __classPrivateFieldGet(this, _SelectPanelElement_abortController, "f");
418
405
  for (const item of this.querySelectorAll(validSelectors.join(','))) {
@@ -6,6 +6,7 @@ import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
6
6
  import type {LiveRegionElement} from '@primer/live-region-element'
7
7
  import '@primer/live-region-element'
8
8
  import '@oddbird/popover-polyfill'
9
+ import {observeMutationsUntilConditionMet} from '../utils'
9
10
 
10
11
  type SelectVariant = 'none' | 'single' | 'multiple' | null
11
12
  type SelectedItem = {
@@ -196,7 +197,8 @@ export class SelectPanelElement extends HTMLElement {
196
197
  this.#softDisableItems()
197
198
  updateWhenVisible(this)
198
199
 
199
- this.#waitForCondition(
200
+ observeMutationsUntilConditionMet(
201
+ this,
200
202
  () => Boolean(this.remoteInput),
201
203
  () => {
202
204
  this.remoteInput.addEventListener('loadstart', this, {signal})
@@ -204,7 +206,8 @@ export class SelectPanelElement extends HTMLElement {
204
206
  },
205
207
  )
206
208
 
207
- this.#waitForCondition(
209
+ observeMutationsUntilConditionMet(
210
+ this,
208
211
  () => Boolean(this.includeFragment),
209
212
  () => {
210
213
  this.includeFragment.addEventListener('include-fragment-replaced', this, {signal})
@@ -237,7 +240,8 @@ export class SelectPanelElement extends HTMLElement {
237
240
  }
238
241
  })
239
242
 
240
- this.#waitForCondition(
243
+ observeMutationsUntilConditionMet(
244
+ this,
241
245
  () => Boolean(this.dialog),
242
246
  () => {
243
247
  this.#dialogIntersectionObserver.observe(this.dialog)
@@ -250,7 +254,8 @@ export class SelectPanelElement extends HTMLElement {
250
254
  )
251
255
 
252
256
  if (this.#fetchStrategy === FetchStrategy.LOCAL) {
253
- this.#waitForCondition(
257
+ observeMutationsUntilConditionMet(
258
+ this,
254
259
  () => this.items.length > 0,
255
260
  () => {
256
261
  this.#updateItemVisibility()
@@ -260,23 +265,6 @@ export class SelectPanelElement extends HTMLElement {
260
265
  }
261
266
  }
262
267
 
263
- // Waits for condition to return true. If it returns false initially, this function creates a
264
- // MutationObserver that calls body() whenever the contents of the component change.
265
- #waitForCondition(condition: () => boolean, body: () => void) {
266
- if (condition()) {
267
- body()
268
- } else {
269
- const mutationObserver = new MutationObserver(() => {
270
- if (condition()) {
271
- body()
272
- mutationObserver.disconnect()
273
- }
274
- })
275
-
276
- mutationObserver.observe(this, {childList: true, subtree: true})
277
- }
278
- }
279
-
280
268
  disconnectedCallback() {
281
269
  this.#abortController.abort()
282
270
  }