openproject-primer_view_components 0.21.0 → 0.22.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +12 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list.css +1 -1
  8. data/app/components/primer/alpha/action_list.css.map +1 -1
  9. data/app/components/primer/alpha/action_list.pcss +11 -33
  10. data/app/components/primer/alpha/segmented_control.css +1 -1
  11. data/app/components/primer/alpha/segmented_control.css.json +0 -4
  12. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  13. data/app/components/primer/alpha/segmented_control.pcss +1 -18
  14. data/app/components/primer/alpha/segmented_control.rb +0 -1
  15. data/app/components/primer/dialog_helper.js +5 -2
  16. data/app/components/primer/dialog_helper.ts +6 -2
  17. data/lib/primer/view_components/version.rb +1 -1
  18. data/previews/primer/alpha/segmented_control_preview.rb +1 -52
  19. data/previews/primer/forms_preview/custom_width_fields_form.html.erb +2 -0
  20. data/static/classes.json +0 -3
  21. data/static/constants.json +2 -4
  22. data/static/info_arch.json +0 -65
  23. data/static/previews.json +0 -65
  24. metadata +2 -2
data/app/components/primer/alpha/action_list.css CHANGED
@@ -1 +1 @@
1
- :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%;-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,.5rem)}.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,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none;fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
1
+ :root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%;-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,.5rem)}.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,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{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,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none;fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
data/app/components/primer/alpha/action_list.css.map CHANGED
@@ -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\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, .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: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--control-transparent-bgColor-selected);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold);\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /*\n * checkbox item [aria-checked]\n * listbox [aria-selected]\n */\n &[aria-checked='true'],\n &[aria-selected='true'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: visible;\n opacity: 1;\n transition: visibility 0 linear 0, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: visible;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n\n @keyframes checkmarkIn {\n from {\n clip-path: inset(16px 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n }\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--control-checked-bgColor-rest);\n stroke: var(--control-checked-bgColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n\n & .ActionListItem-multiSelectCheckmark {\n fill: var(--fgColor-onEmphasis);\n }\n }\n }\n\n &[aria-checked='false'],\n &[aria-selected='false'] {\n /* multiselect checkmark */\n & .ActionListItem-multiSelectCheckmark {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0 linear 50ms, opacity 50ms;\n }\n\n /* singleselect checkmark */\n & .ActionListItem-singleSelectCheckmark {\n visibility: hidden;\n transition: visibility 0s linear 200ms;\n clip-path: inset(16px 0 0 0);\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;\n\n @keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(16px 0 0 0);\n }\n }\n }\n }\n\n /* checkbox */\n & .ActionListItem-multiSelectIcon {\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n stroke: var(--control-borderColor-rest);\n stroke-width: var(--borderWidth-thin, 1px);\n }\n }\n\n & .ActionListItem-multiSelectIconRect {\n fill: var(--bgColor-default);\n border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--sizeXLarge {\n --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --actionListContent-paddingBlock: var(--control-large-paddingBlock);\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* 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\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"]}
data/app/components/primer/alpha/action_list.pcss CHANGED
@@ -14,7 +14,8 @@
14
14
  list-style: none;
15
15
  }
16
16
 
17
- .ActionListWrap--inset, .ActionListWrap--inset[popover] {
17
+ .ActionListWrap--inset,
18
+ .ActionListWrap--inset[popover] {
18
19
  padding: var(--base-size-8);
19
20
  }
20
21
 
@@ -334,7 +335,9 @@
334
335
  &[aria-expanded] {
335
336
  & + .ActionList--subGroup {
336
337
  @media screen and (prefers-reduced-motion: no-preference) {
337
- transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
338
+ transition:
339
+ opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),
340
+ transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
338
341
  }
339
342
 
340
343
  & .ActionListContent {
@@ -429,26 +432,14 @@
429
432
  & .ActionListItem-multiSelectCheckmark {
430
433
  visibility: visible;
431
434
  opacity: 1;
432
- transition: visibility 0 linear 0, opacity 50ms;
435
+ transition:
436
+ visibility 0 linear 0,
437
+ opacity 50ms;
433
438
  }
434
439
 
435
440
  /* singleselect checkmark */
436
441
  & .ActionListItem-singleSelectCheckmark {
437
442
  visibility: visible;
438
-
439
- @media screen and (prefers-reduced-motion: no-preference) {
440
- animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
441
-
442
- @keyframes checkmarkIn {
443
- from {
444
- clip-path: inset(16px 0 0 0);
445
- }
446
-
447
- to {
448
- clip-path: inset(0 0 0 0);
449
- }
450
- }
451
- }
452
443
  }
453
444
 
454
445
  /* checkbox */
@@ -471,28 +462,15 @@
471
462
  & .ActionListItem-multiSelectCheckmark {
472
463
  visibility: hidden;
473
464
  opacity: 0;
474
- transition: visibility 0 linear 50ms, opacity 50ms;
465
+ transition:
466
+ visibility 0 linear 50ms,
467
+ opacity 50ms;
475
468
  }
476
469
 
477
470
  /* singleselect checkmark */
478
471
  & .ActionListItem-singleSelectCheckmark {
479
472
  visibility: hidden;
480
473
  transition: visibility 0s linear 200ms;
481
- clip-path: inset(16px 0 0 0);
482
-
483
- @media screen and (prefers-reduced-motion: no-preference) {
484
- animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
485
-
486
- @keyframes checkmarkOut {
487
- from {
488
- clip-path: inset(0 0 0 0);
489
- }
490
-
491
- to {
492
- clip-path: inset(16px 0 0 0);
493
- }
494
- }
495
- }
496
474
  }
497
475
 
498
476
  /* checkbox */
data/app/components/primer/alpha/segmented_control.css CHANGED
@@ -1 +1 @@
1
- .SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--large,.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl--large .SegmentedControl-item{height:var(--control-large-size,2.5rem)}.SegmentedControl--large .SegmentedControl-item .Button{padding-inline:calc(var(--control-large-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding))}.SegmentedControl--large.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-large-size,2.5rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
1
+ .SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock,0.25rem);background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock,0.125rem)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size,1.75rem)}.SegmentedControl--small .SegmentedControl-item .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal,.5rem) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size,1.75rem)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size,2rem)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size,2rem)}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;height:var(--control-medium-size,2rem);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal,400);height:100%;padding-inline:calc(var(--control-medium-paddingInline-normal,.75rem) - var(--segmentedControl-item-padding));width:100%}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
data/app/components/primer/alpha/segmented_control.css.json CHANGED
@@ -2,7 +2,6 @@
2
2
  "name": "alpha/segmented_control",
3
3
  "selectors": [
4
4
  ".SegmentedControl",
5
- ".SegmentedControl--iconOnly .Button--iconOnly.Button--large",
6
5
  ".SegmentedControl--iconOnly .Button--iconOnly.Button--medium",
7
6
  ".SegmentedControl--iconOnly .Button--iconOnly.Button--small",
8
7
  ".SegmentedControl--small",
@@ -11,9 +10,6 @@
11
10
  ".SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item",
12
11
  ".SegmentedControl--medium .SegmentedControl-item",
13
12
  ".SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item",
14
- ".SegmentedControl--large .SegmentedControl-item",
15
- ".SegmentedControl--large .SegmentedControl-item .Button",
16
- ".SegmentedControl--large.SegmentedControl--iconOnly .SegmentedControl-item",
17
13
  ".SegmentedControl-item",
18
14
  ".SegmentedControl-item .Button--invisible:hover:not(:disabled)",
19
15
  ".SegmentedControl-item .Button--invisible:active:not(:disabled)",
data/app/components/primer/alpha/segmented_control.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,yEAAkE,CAIlE,mFAAqF,CACrF,gDAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAGE,qLAIE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,2EAeF,CAbE,gDACE,wCAKF,CAHE,wDACE,4GACF,CAIA,2EACE,uCACF,CAKF,iDACE,sCACF,CAGE,4EACE,qCACF,CAKF,gDACE,uCAKF,CAHE,wDACE,4GACF,CAIA,2EACE,sCACF,CAMJ,uBAIE,4DAAiD,CACjD,gDAAyC,CAHzC,mBAAoB,CAIpB,sCAAkC,CAHlC,sBAAuB,CAIvB,4CAA6C,CAN7C,iBAgFF,CAtEI,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,kHAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BAGE,QAAS,CAET,+FAA0F,CAD1F,8CAA2C,CAH3C,WAAY,CAKZ,6GAAuG,CAJvG,UAUF,CAJE,6CAEE,+FAA0F,CAD1F,sGAEF,CAGF,oFACE,8DACF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n --segmentedControl-item-padding: var(--control-small-paddingBlock);\n\n display: inline-flex;\n list-style: none;\n background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n & .Button--iconOnly.Button--small,\n & .Button--iconOnly.Button--medium,\n & .Button--iconOnly.Button--large {\n width: 100%;\n padding-inline: 0 !important;\n }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n & .SegmentedControl-item {\n height: var(--control-small-size);\n\n & .Button {\n padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n }\n }\n\n &.SegmentedControl--iconOnly {\n & .SegmentedControl-item {\n width: var(--control-small-size);\n }\n }\n}\n\n.SegmentedControl--medium {\n & .SegmentedControl-item {\n height: var(--control-medium-size);\n }\n\n &.SegmentedControl--iconOnly {\n & .SegmentedControl-item {\n width: var(--control-medium-size);\n }\n }\n}\n\n.SegmentedControl--large {\n & .SegmentedControl-item {\n height: var(--control-large-size);\n\n & .Button {\n padding-inline: calc(var(--control-large-paddingInline-normal) - var(--segmentedControl-item-padding));\n }\n }\n\n &.SegmentedControl--iconOnly {\n & .SegmentedControl-item {\n width: var(--control-large-size);\n }\n }\n}\n\n/* item */\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n justify-content: center;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n height: var(--control-medium-size);\n padding: var(--segmentedControl-item-padding);\n\n /* button color overrides */\n & .Button--invisible {\n &:hover:not(:disabled) {\n background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n }\n\n &:active:not(:disabled) {\n background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n }\n }\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n & .Button {\n font-weight: var(--base-text-weight-semibold);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent !important;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &:not(:first-child) {\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--control-medium-paddingBlock);\n margin-bottom: var(--control-medium-paddingBlock);\n content: '';\n border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n }\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n height: 100%;\n width: 100%;\n border: 0;\n font-weight: var(--base-text-weight-normal);\n border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n\n &:focus-visible {\n outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n }\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--button-default-fgColor-rest);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n}\n"]}
1
+ {"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,yEAAkE,CAIlE,mFAAqF,CACrF,gDAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,2EAeF,CAbE,gDACE,wCAKF,CAHE,wDACE,4GACF,CAIA,2EACE,uCACF,CAKF,iDACE,sCACF,CAGE,4EACE,qCACF,CAMJ,uBAIE,4DAAiD,CACjD,gDAAyC,CAHzC,mBAAoB,CAIpB,sCAAkC,CAHlC,sBAAuB,CAIvB,4CAA6C,CAN7C,iBAgFF,CAtEI,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,kHAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BAGE,QAAS,CAET,+FAA0F,CAD1F,8CAA2C,CAH3C,WAAY,CAKZ,6GAAuG,CAJvG,UAUF,CAJE,6CAEE,+FAA0F,CAD1F,sGAEF,CAGF,oFACE,8DACF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n --segmentedControl-item-padding: var(--control-small-paddingBlock);\n\n display: inline-flex;\n list-style: none;\n background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n & .Button--iconOnly.Button--small,\n & .Button--iconOnly.Button--medium {\n width: 100%;\n padding-inline: 0 !important;\n }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n & .SegmentedControl-item {\n height: var(--control-small-size);\n\n & .Button {\n padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n }\n }\n\n &.SegmentedControl--iconOnly {\n & .SegmentedControl-item {\n width: var(--control-small-size);\n }\n }\n}\n\n.SegmentedControl--medium {\n & .SegmentedControl-item {\n height: var(--control-medium-size);\n }\n\n &.SegmentedControl--iconOnly {\n & .SegmentedControl-item {\n width: var(--control-medium-size);\n }\n }\n}\n\n/* item */\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n justify-content: center;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n height: var(--control-medium-size);\n padding: var(--segmentedControl-item-padding);\n\n /* button color overrides */\n & .Button--invisible {\n &:hover:not(:disabled) {\n background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n }\n\n &:active:not(:disabled) {\n background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n }\n }\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n & .Button {\n font-weight: var(--base-text-weight-semibold);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent !important;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &:not(:first-child) {\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--control-medium-paddingBlock);\n margin-bottom: var(--control-medium-paddingBlock);\n content: '';\n border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n }\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n height: 100%;\n width: 100%;\n border: 0;\n font-weight: var(--base-text-weight-normal);\n border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n\n &:focus-visible {\n outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n }\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--button-default-fgColor-rest);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n}\n"]}
data/app/components/primer/alpha/segmented_control.pcss CHANGED
@@ -11,8 +11,7 @@
11
11
 
12
12
  .SegmentedControl--iconOnly {
13
13
  & .Button--iconOnly.Button--small,
14
- & .Button--iconOnly.Button--medium,
15
- & .Button--iconOnly.Button--large {
14
+ & .Button--iconOnly.Button--medium {
16
15
  width: 100%;
17
16
  padding-inline: 0 !important;
18
17
  }
@@ -50,22 +49,6 @@
50
49
  }
51
50
  }
52
51
 
53
- .SegmentedControl--large {
54
- & .SegmentedControl-item {
55
- height: var(--control-large-size);
56
-
57
- & .Button {
58
- padding-inline: calc(var(--control-large-paddingInline-normal) - var(--segmentedControl-item-padding));
59
- }
60
- }
61
-
62
- &.SegmentedControl--iconOnly {
63
- & .SegmentedControl-item {
64
- width: var(--control-large-size);
65
- }
66
- }
67
- }
68
-
69
52
  /* item */
70
53
 
71
54
  .SegmentedControl-item {
data/app/components/primer/alpha/segmented_control.rb CHANGED
@@ -17,7 +17,6 @@ module Primer
17
17
  SIZE_MAPPINGS = {
18
18
  :small => "SegmentedControl--small",
19
19
  :medium => "SegmentedControl--medium",
20
- :large => "SegmentedControl--large",
21
20
  DEFAULT_SIZE => "SegmentedControl--medium"
22
21
  }.freeze
23
22
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
data/app/components/primer/dialog_helper.js CHANGED
@@ -26,6 +26,7 @@ function dialogInvokerButtonHandler(event) {
26
26
  // If the behaviour is allowed through the dialog will be shown but then
27
27
  // quickly hidden- as if it were never shown. This prevents that.
28
28
  event.preventDefault();
29
+ event.stopPropagation();
29
30
  }
30
31
  }
31
32
  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -46,7 +47,7 @@ export class DialogHelperElement extends HTMLElement {
46
47
  }
47
48
  connectedCallback() {
48
49
  const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
49
- document.addEventListener('click', dialogInvokerButtonHandler);
50
+ document.addEventListener('click', dialogInvokerButtonHandler, true);
50
51
  document.addEventListener('click', this, { signal });
51
52
  this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
52
53
  new MutationObserver(records => {
@@ -66,7 +67,9 @@ export class DialogHelperElement extends HTMLElement {
66
67
  const dialog = this.dialog;
67
68
  if (!(dialog === null || dialog === void 0 ? void 0 : dialog.open))
68
69
  return;
69
- if ((target === null || target === void 0 ? void 0 : target.closest('dialog')) !== dialog)
70
+ // if the target is inside the dialog, but is not the dialog itself, leave
71
+ // the dialog open
72
+ if ((target === null || target === void 0 ? void 0 : target.closest('dialog')) === dialog && target !== dialog)
70
73
  return;
71
74
  const rect = dialog.getBoundingClientRect();
72
75
  const clickWasInsideDialog = rect.top <= event.clientY &&
data/app/components/primer/dialog_helper.ts CHANGED
@@ -15,6 +15,7 @@ function dialogInvokerButtonHandler(event: Event) {
15
15
  // If the behaviour is allowed through the dialog will be shown but then
16
16
  // quickly hidden- as if it were never shown. This prevents that.
17
17
  event.preventDefault()
18
+ event.stopPropagation()
18
19
  }
19
20
  }
20
21
 
@@ -35,7 +36,7 @@ export class DialogHelperElement extends HTMLElement {
35
36
  #abortController: AbortController | null = null
36
37
  connectedCallback() {
37
38
  const {signal} = (this.#abortController = new AbortController())
38
- document.addEventListener('click', dialogInvokerButtonHandler)
39
+ document.addEventListener('click', dialogInvokerButtonHandler, true)
39
40
  document.addEventListener('click', this, {signal})
40
41
  this.ownerDocument.body.style.setProperty(
41
42
  '--dialog-scrollgutter',
@@ -58,7 +59,10 @@ export class DialogHelperElement extends HTMLElement {
58
59
  const target = event.target as HTMLElement
59
60
  const dialog = this.dialog
60
61
  if (!dialog?.open) return
61
- if (target?.closest('dialog') !== dialog) return
62
+
63
+ // if the target is inside the dialog, but is not the dialog itself, leave
64
+ // the dialog open
65
+ if (target?.closest('dialog') === dialog && target !== dialog) return
62
66
 
63
67
  const rect = dialog.getBoundingClientRect()
64
68
  const clickWasInsideDialog =
data/lib/primer/view_components/version.rb CHANGED
@@ -5,7 +5,7 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 21
8
+ MINOR = 22
9
9
  PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
data/previews/primer/alpha/segmented_control_preview.rb CHANGED
@@ -11,7 +11,7 @@ module Primer
11
11
  # @param full_width [Boolean] toggle
12
12
  # @param hide_labels [Boolean] toggle
13
13
  # @param icon [Symbol] octicon
14
- # @param size select [small, medium, large]
14
+ # @param size select [small, medium]
15
15
  def playground(full_width: false, hide_labels: false, size: :medium, icon: :none)
16
16
  if icon == :none
17
17
  icon = hide_labels ? :zap : nil
@@ -55,17 +55,6 @@ module Primer
55
55
  component.with_item(label: "Blame")
56
56
  end
57
57
  end
58
-
59
- # @label Size large
60
- # @param hide_labels [Boolean] toggle
61
- # @snapshot
62
- def full_width_large(hide_labels: false)
63
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
64
- component.with_item(label: "Preview", selected: true)
65
- component.with_item(label: "Raw")
66
- component.with_item(label: "Blame")
67
- end
68
- end
69
58
  # @!endgroup
70
59
 
71
60
  # @!group Icons and text
@@ -88,16 +77,6 @@ module Primer
88
77
  component.with_item(label: "Blame", icon: :people)
89
78
  end
90
79
  end
91
-
92
- # @label Size large
93
- # @snapshot
94
- def icons_and_text_large
95
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
96
- component.with_item(label: "Preview", icon: :eye, selected: true)
97
- component.with_item(label: "Raw", icon: :"file-code")
98
- component.with_item(label: "Blame", icon: :people)
99
- end
100
- end
101
80
  # @!endgroup
102
81
 
103
82
  # @!group Trailing Label
@@ -122,17 +101,6 @@ module Primer
122
101
  end
123
102
  end
124
103
  end
125
-
126
- # @label Size large
127
- # @snapshot
128
- def trailing_label_width_large
129
- render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
130
- component.with_item(label: "Monthly")
131
- component.with_item(label: "Yearly", selected: true) do |button|
132
- button.with_trailing_visual_label(scheme: :accent) { "-8%" }
133
- end
134
- end
135
- end
136
104
  # @!endgroup
137
105
 
138
106
  # @!group Icons only
@@ -156,16 +124,6 @@ module Primer
156
124
  end
157
125
  end
158
126
 
159
- # @label Size large
160
- # @snapshot
161
- def icon_only_large
162
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
163
- component.with_item(label: "Preview", icon: :eye, selected: true)
164
- component.with_item(label: "Raw", icon: :"file-code")
165
- component.with_item(label: "Blame", icon: :people)
166
- end
167
- end
168
-
169
127
  # @label Full width, size small
170
128
  def icon_only_full_width_small
171
129
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
@@ -183,15 +141,6 @@ module Primer
183
141
  component.with_item(label: "Blame", icon: :people)
184
142
  end
185
143
  end
186
-
187
- # @label Full width, size large
188
- def icon_only_full_width_large
189
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
190
- component.with_item(label: "Preview", icon: :eye, selected: true)
191
- component.with_item(label: "Raw", icon: :"file-code")
192
- component.with_item(label: "Blame", icon: :people)
193
- end
194
- end
195
144
  # @!endgroup
196
145
 
197
146
  # NOTE: this preview uses a group to force it's display below the other groups
data/previews/primer/forms_preview/custom_width_fields_form.html.erb CHANGED
@@ -1,3 +1,5 @@
1
+ <!-- Look at the "Assets" tab for the definition of the `CustomWidthFieldsForm` -->
2
+
1
3
  <%= primer_form_with(url: "/foo") do |f| %>
2
4
  <%= render(CustomWidthFieldsForm.new(f)) %>
3
5
  <% end %>
data/static/classes.json CHANGED
@@ -519,9 +519,6 @@
519
519
  "SegmentedControl--iconOnly": [
520
520
  "Primer::Alpha::SegmentedControl"
521
521
  ],
522
- "SegmentedControl--large": [
523
- "Primer::Alpha::SegmentedControl"
524
- ],
525
522
  "SegmentedControl--medium": [
526
523
  "Primer::Alpha::SegmentedControl"
527
524
  ],
data/static/constants.json CHANGED
@@ -565,13 +565,11 @@
565
565
  "Item": "Primer::Alpha::SegmentedControl::Item",
566
566
  "SIZE_MAPPINGS": {
567
567
  "small": "SegmentedControl--small",
568
- "medium": "SegmentedControl--medium",
569
- "large": "SegmentedControl--large"
568
+ "medium": "SegmentedControl--medium"
570
569
  },
571
570
  "SIZE_OPTIONS": [
572
571
  "small",
573
- "medium",
574
- "large"
572
+ "medium"
575
573
  ]
576
574
  },
577
575
  "Primer::Alpha::SegmentedControl::Item": {