openproject-primer_view_components 0.37.1 → 0.38.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
  4. data/app/assets/javascripts/app/components/primer/alpha/select_panel_element.d.ts +64 -0
  5. data/app/assets/javascripts/app/components/primer/aria_live.d.ts +8 -0
  6. data/app/assets/javascripts/app/components/primer/primer.d.ts +4 -0
  7. data/app/assets/javascripts/app/components/primer/shared_events.d.ts +9 -0
  8. data/app/assets/javascripts/primer_view_components.js +1 -1
  9. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  10. data/app/assets/styles/primer_view_components.css +1 -1
  11. data/app/assets/styles/primer_view_components.css.map +1 -1
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.map +1 -1
  14. data/app/components/primer/alpha/action_list.pcss +1 -0
  15. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
  16. data/app/components/primer/alpha/action_menu/action_menu_element.ts +0 -11
  17. data/app/components/primer/alpha/action_menu.rb +13 -6
  18. data/app/components/primer/alpha/select_panel.html.erb +100 -0
  19. data/app/components/primer/alpha/select_panel.rb +473 -0
  20. data/app/components/primer/alpha/select_panel_element.d.ts +64 -0
  21. data/app/components/primer/alpha/select_panel_element.js +924 -0
  22. data/app/components/primer/alpha/select_panel_element.ts +1045 -0
  23. data/app/components/primer/aria_live.d.ts +8 -0
  24. data/app/components/primer/aria_live.js +38 -0
  25. data/app/components/primer/aria_live.ts +41 -0
  26. data/app/components/primer/base_component.rb +1 -1
  27. data/app/components/primer/primer.d.ts +4 -0
  28. data/app/components/primer/primer.js +4 -0
  29. data/app/components/primer/primer.ts +4 -0
  30. data/app/components/primer/shared_events.d.ts +9 -0
  31. data/app/components/primer/shared_events.js +1 -0
  32. data/app/components/primer/shared_events.ts +10 -0
  33. data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -1
  34. data/lib/primer/forms/toggle_switch.html.erb +1 -2
  35. data/lib/primer/static/generate_info_arch.rb +3 -2
  36. data/lib/primer/view_components/version.rb +2 -2
  37. data/lib/primer/yard/component_manifest.rb +2 -0
  38. data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb +25 -0
  39. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch.html.erb +16 -0
  40. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_initial_failure.html.erb +12 -0
  41. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_no_results.html.erb +16 -0
  42. data/previews/primer/alpha/select_panel_preview/footer_buttons.html.erb +23 -0
  43. data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb +19 -0
  44. data/previews/primer/alpha/select_panel_preview/local_fetch_no_results.html.erb +15 -0
  45. data/previews/primer/alpha/select_panel_preview/multiselect.html.erb +17 -0
  46. data/previews/primer/alpha/select_panel_preview/multiselect_form.html.erb +31 -0
  47. data/previews/primer/alpha/select_panel_preview/playground.html.erb +19 -0
  48. data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb +16 -0
  49. data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb +13 -0
  50. data/previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb +12 -0
  51. data/previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb +16 -0
  52. data/previews/primer/alpha/select_panel_preview/single_select.html.erb +20 -0
  53. data/previews/primer/alpha/select_panel_preview/single_select_form.html.erb +33 -0
  54. data/previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb +19 -0
  55. data/previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb +23 -0
  56. data/previews/primer/alpha/select_panel_preview/with_dynamic_label_and_aria_prefix.html.erb +24 -0
  57. data/previews/primer/alpha/select_panel_preview/with_leading_icons.html.erb +31 -0
  58. data/previews/primer/alpha/select_panel_preview/with_subtitle.html.erb +25 -0
  59. data/previews/primer/alpha/select_panel_preview/with_trailing_icons.html.erb +19 -0
  60. data/previews/primer/alpha/select_panel_preview.rb +239 -0
  61. data/static/arguments.json +118 -0
  62. data/static/audited_at.json +1 -0
  63. data/static/constants.json +16 -0
  64. data/static/info_arch.json +902 -112
  65. data/static/previews.json +294 -0
  66. data/static/statuses.json +1 -0
  67. metadata +41 -4
@@ -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-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest);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){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active)}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):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)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected);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)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled)}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest)}@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)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active)}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}.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)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36)}.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)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.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)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{transition:visibility 0s linear .2s;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default);stroke:var(--control-borderColor-rest);stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default);border:var(--borderWidth-thin,1px) 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}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .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,var(--color-action-list-item-inline-divider));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{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-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest);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){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active)}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin) var(--control-transparent-borderColor-active);outline:solid var(--borderWidth-thin) #0000;outline-offset:calc(var(--borderWidth-thin)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):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)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected);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)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled)}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest)}@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)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active)}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover)}.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)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36)}.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)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.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)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{transition:visibility 0s linear .2s;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default);stroke:var(--control-borderColor-rest);stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default);border:var(--borderWidth-thin,1px) 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}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){align-items:flex-start;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,var(--color-action-list-item-inline-divider));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{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 +1 @@
1
- {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\naction-list {\n display: block;\n}\n\nnav-list {\n display: block;\n}\n\n.ActionListHeader {\n margin-left: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset,\n.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 top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: var(--control-transparent-bgColor-rest);\n border-radius: var(--borderRadius-medium);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &:active {\n background-color: var(--control-transparent-bgColor-active);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--control-transparent-bgColor-hover);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n }\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal);\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n /* provides a visual indication of the current item for Windows high-contrast mode */\n outline: 2px solid transparent;\n\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &.ActionListItem--disabled,\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--control-danger-fgColor-rest);\n }\n\n & .ActionListItem-visual {\n color: var(--control-danger-fgColor-rest);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--control-danger-bgColor-hover);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--control-danger-bgColor-active);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--actionListContent-paddingBlock);\n padding-inline: var(--control-medium-paddingInline-condensed);\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition:\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, 1px) solid var(--control-borderColor-rest);\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\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 padding-inline: var(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n list-style: none;\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n background: var(--bgColor-muted);\n border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4);\n height: var(--base-size-24);\n content: '';\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
1
+ {"version":3,"sources":["action_list.pcss","../../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"action_list.css","sourcesContent":[":root {\n --actionListContent-paddingBlock: var(--control-medium-paddingBlock);\n}\n\n/* ActionList */\n\naction-list {\n display: block;\n}\n\nnav-list {\n display: block;\n}\n\n.ActionListHeader {\n margin-left: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n}\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset,\n.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 top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--borderWidth-thin);\n content: '';\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: var(--control-transparent-bgColor-rest);\n border-radius: var(--borderRadius-medium);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &:active {\n background-color: var(--control-transparent-bgColor-active);\n }\n }\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--control-transparent-bgColor-hover);\n\n &:not(.ActionListItem--navActive, :focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n }\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--borderWidth-thin) transparent;\n outline-offset: calc(-1 * var(--borderWidth-thin));\n box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n }\n\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal);\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n\n &::after {\n @mixin activeIndicatorLine calc(-1 * var(--base-size-4));\n }\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n /* provides a visual indication of the current item for Windows high-contrast mode */\n outline: 2px solid transparent;\n\n &:not(.ActionListItem--subItem) {\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--control-transparent-bgColor-selected);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &.ActionListItem--disabled,\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--control-danger-fgColor-rest);\n }\n\n & .ActionListItem-visual {\n color: var(--control-danger-fgColor-rest);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--control-danger-bgColor-hover);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--control-danger-bgColor-active);\n\n & .ActionListItem-label,\n & .ActionListItem-visual,\n & .ActionListItem-description {\n color: var(--control-danger-fgColor-hover);\n }\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--actionListContent-paddingBlock);\n padding-inline: var(--control-medium-paddingInline-condensed);\n color: var(--control-fgColor-rest);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--borderRadius-medium);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--control-fgColor-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--control-fgColor-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition:\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, 1px) solid var(--control-borderColor-rest);\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* have leading visual svg filled with chosen color */\n\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 align-items: flex-start;\n padding-inline: var(--actionListContent-paddingBlock);\n padding-block: var(--base-size-8);\n font-size: var(--text-body-size-small);\n line-height: var(--text-body-lineHeight-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--borderWidth-thin);\n padding: 0;\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n list-style: none;\n background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border: 0;\n }\n\n & .ActionList-sectionDivider-title {\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n margin-block-end: var(--base-size-8);\n margin-inline: calc(-1 * var(--base-size-8));\n background: var(--bgColor-muted);\n border-top: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted, var(--color-action-list-item-inline-divider));\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4);\n height: var(--base-size-24);\n content: '';\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
@@ -642,6 +642,7 @@ nav-list {
642
642
  /* with children */
643
643
  &:not(:empty) {
644
644
  display: flex;
645
+ align-items: flex-start;
645
646
  padding-inline: var(--actionListContent-paddingBlock);
646
647
  padding-block: var(--base-size-8);
647
648
  font-size: var(--text-body-size-small);
@@ -6,15 +6,6 @@ type SelectedItem = {
6
6
  value: string | null | undefined;
7
7
  element: Element;
8
8
  };
9
- export type ItemActivatedEvent = {
10
- item: Element;
11
- checked: boolean;
12
- };
13
- declare global {
14
- interface HTMLElementEventMap {
15
- itemActivated: CustomEvent<ItemActivatedEvent>;
16
- }
17
- }
18
9
  export declare class ActionMenuElement extends HTMLElement {
19
10
  #private;
20
11
  includeFragment: IncludeFragmentElement;
@@ -12,17 +12,6 @@ type SelectedItem = {
12
12
  const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
13
13
  const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`)
14
14
 
15
- export type ItemActivatedEvent = {
16
- item: Element
17
- checked: boolean
18
- }
19
-
20
- declare global {
21
- interface HTMLElementEventMap {
22
- itemActivated: CustomEvent<ItemActivatedEvent>
23
- }
24
- }
25
-
26
15
  @controller
27
16
  export class ActionMenuElement extends HTMLElement {
28
17
  @target
@@ -131,9 +131,7 @@ module Primer
131
131
  #
132
132
  # ### JavaScript API
133
133
  #
134
- # `ActionList`s render an `<action-list>` custom element that exposes behavior to the client. For all these methods,
135
- # `itemId` refers to the value of the `item_id:` argument (see below) that is used to populate the `data-item-id` HTML
136
- # attribute.
134
+ # `ActionMenu`s render an `<action-menu>` custom element that exposes behavior to the client.
137
135
  #
138
136
  # #### Query methods
139
137
  #
@@ -142,6 +140,15 @@ module Primer
142
140
  # * `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.
143
141
  # * `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.
144
142
  #
143
+ # NOTE: Item IDs are special values provided by the user that are attached to `ActionMenu` items as the `data-item-id`
144
+ # HTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the list, eg:
145
+ #
146
+ # ```erb
147
+ # <%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
148
+ # <% menu.with_item(item_id: "my-id") %>
149
+ # <% end %>
150
+ # ```
151
+ #
145
152
  # #### State methods
146
153
  #
147
154
  # * `showItem(item: Element)`: Shows the item, i.e. makes it visible.
@@ -156,9 +163,9 @@ module Primer
156
163
  # The `<action-menu>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.
157
164
  #
158
165
  # ```typescript
159
- # document.querySelector("action-menu").addEventListener("itemActivated", (event: ItemActivatedEvent) => {
160
- # event.item // Element: the <li> item that was activated
161
- # event.checked // boolean: whether or not the result of the activation checked the item
166
+ # document.querySelector("action-menu").addEventListener("itemActivated", (event: CustomEvent<ItemActivatedEvent>) => {
167
+ # event.detail.item // Element: the <li> item that was activated
168
+ # event.detail.checked // boolean: whether or not the result of the activation checked the item
162
169
  # })
163
170
  # ```
164
171
  class ActionMenu < Primer::Component
@@ -0,0 +1,100 @@
1
+ <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
+ <dialog-helper>
3
+ <%= show_button %>
4
+ <%= render(@dialog) do %>
5
+ <%= render Primer::Alpha::Dialog::Header.new(id: "#{@panel_id}-dialog", title: @title) do |header| %>
6
+ <% if subtitle? %>
7
+ <% header.with_subtitle do %>
8
+ <%= subtitle %>
9
+ <% end %>
10
+ <% end %>
11
+ <% if show_filter? %>
12
+ <% header.with_filter do %>
13
+ <%= render(Primer::BaseComponent.new(
14
+ tag: :"remote-input",
15
+ aria: { owns: @body_id },
16
+ **(@fetch_strategy == :remote ? { src: @src } : {}),
17
+ data: {
18
+ target: "select-panel.remoteInput"
19
+ }
20
+ )) do %>
21
+ <%= render(Primer::Alpha::TextField.new(
22
+ id: "#{@panel_id}-filter",
23
+ name: :filter,
24
+ label: "Filter",
25
+ type: :search,
26
+ leading_visual: { icon: :search },
27
+ leading_spinner: true,
28
+ autofocus: true,
29
+ visually_hide_label: true,
30
+ data: { target: "select-panel.filterInputTextField" },
31
+ label_arguments: {
32
+ position: :absolute
33
+ }
34
+ )) %>
35
+ <% end %>
36
+ <% end %>
37
+ <% end %>
38
+ <% end %>
39
+ <div data-target="select-panel.bannerErrorElement" hidden>
40
+ <%= render Primer::Alpha::Banner.new(scheme: :danger, full: true, mt: 2) do %>
41
+ <% if error_content? %>
42
+ <%= error_content %>
43
+ <% else %>
44
+ <h2 class="f5">Sorry, something went wrong.</h2>
45
+ <% end %>
46
+ <% end %>
47
+ </div>
48
+ <%= render Primer::Alpha::Dialog::Body.new(mt: 2, p: 0) do %>
49
+ <focus-group direction="vertical" mnemonics retain>
50
+ <div class="sr-only" aria-live="polite" aria-atomic="true" data-target="select-panel.ariaLiveContainer"></div>
51
+ <%= render(Primer::BaseComponent.new(
52
+ tag: :div,
53
+ data: {
54
+ fetch_strategy: @fetch_strategy,
55
+ target: "select-panel.list"
56
+ }
57
+ )) do %>
58
+ <div id="<%= @body_id %>">
59
+ <% if @src.present? %>
60
+ <%= render(Primer::ConditionalWrapper.new(condition: @fetch_strategy == :eventually_local, tag: "include-fragment", data: { target: "select-panel.includeFragment" }, src: @src, loading: preload? ? "eager" : "lazy", accept: "text/fragment+html")) do %>
61
+ <%= render(Primer::BaseComponent.new(
62
+ tag: :div,
63
+ id: "#{@panel_id}-list",
64
+ mt: 2,
65
+ mb: 2,
66
+ aria: { disabled: true, busy: true },
67
+ display: :flex,
68
+ align_items: :center,
69
+ justify_content: :center,
70
+ text_align: :center
71
+ )) do %>
72
+ <div data-hide-on-error>
73
+ <%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }, data: { target: "select-panel.bodySpinner" }) %>
74
+ </div>
75
+ <div data-show-on-error hidden data-target="select-panel.fragmentErrorElement">
76
+ <% if preload_error_content? %>
77
+ <%= preload_error_content %>
78
+ <% else %>
79
+ <div class="pt-2 pb-2">
80
+ <%= render Primer::Beta::Octicon.new(icon: :alert, color: :danger) %>
81
+ <h2 class="f5">Sorry, something went wrong.</h2>
82
+ </div>
83
+ <% end %>
84
+ </div>
85
+ <% end %>
86
+ <% end %>
87
+ <% else %>
88
+ <%= render(@list) %>
89
+ <% end %>
90
+ </div>
91
+ <div data-target="select-panel.noResults" class="color-border-muted text-center" hidden>
92
+ <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
93
+ </div>
94
+ <% end %>
95
+ </focus-group>
96
+ <% end %>
97
+ <%= footer %>
98
+ <% end %>
99
+ </dialog-helper>
100
+ <% end %>