primer_view_components 0.0.96 → 0.0.98

data/app/assets/styles/primer_view_components.css

@@ -1 +1 @@
-:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:transparent;border:1px solid;border:var(--primer-borderWidth-thin,1px) solid;border-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:500;font-weight:var(--base-text-weight-medium,500);gap:8px;gap:var(--primer-control-medium-gap,8px);height:32px;height:var(--primer-control-medium-size,32px);justify-content:space-between;padding:0 12px;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:80ms cubic-bezier(.65,0,.35,1);transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:80ms;transition-duration:var(--primer-duration-fast)}.Button.Button--active,.Button:active{transition:none}.Button.Button--disabled,.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:-webkit-min-content minmax(0,auto) -webkit-min-content;grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:-4px;margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:12px;font-size:var(--primer-text-body-size-small,12px);gap:4px;gap:var(--primer-control-small-gap,4px);height:28px;height:var(--primer-control-small-size,28px);padding:0 8px;padding:0 var(--primer-control-small-paddingInline-condensed,8px);.Button-label{line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button-content>:not(:last-child){margin-right:4px;margin-right:var(--primer-control-small-gap,4px)}}.Button--large{gap:8px;gap:var(--primer-control-large-gap,8px);height:40px;height:var(--primer-control-large-size,40px);padding:0 16px;padding:0 var(--primer-control-large-paddingInline-spacious,16px);.Button-label{line-height:1.5;line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-large-gap,8px)}}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid transparent}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary.Button--pressed,.Button--primary:active,.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary.Button--disabled,.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary.Button--active,.Button--secondary:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary.Button--pressed,.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary.Button--disabled,.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{fill:var(--color-btn-text);color:var(--color-btn-text)}.Button--invisible:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible.Button--active,.Button--invisible.Button--pressed,.Button--invisible:active,.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible.Button--disabled,.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--link{fill:var(--color-accent-default);border:none;color:var(--color-accent-default)}.Button--link:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--link.Button--active,.Button--link.Button--pressed,.Button--link:active,.Button--link[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--link.Button--disabled,.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:transparent;border-color:transparent;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover{fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger.Button--pressed,.Button--danger:active,.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger.disabled,.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:initial;place-content:center;width:32px;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:28px;width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:40px;width:var(--primer-control-large-size,40px)}
+:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:transparent;border:1px solid;border:var(--primer-borderWidth-thin,1px) solid;border-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:500;font-weight:var(--base-text-weight-medium,500);gap:8px;gap:var(--primer-control-medium-gap,8px);height:32px;height:var(--primer-control-medium-size,32px);justify-content:space-between;padding:0 12px;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:80ms cubic-bezier(.65,0,.35,1);transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:80ms;transition-duration:var(--primer-duration-fast)}.Button.Button--active,.Button:active{transition:none}.Button.Button--disabled,.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:-webkit-min-content minmax(0,auto) -webkit-min-content;grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:-4px;margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:12px;font-size:var(--primer-text-body-size-small,12px);gap:4px;gap:var(--primer-control-small-gap,4px);height:28px;height:var(--primer-control-small-size,28px);padding:0 8px;padding:0 var(--primer-control-small-paddingInline-condensed,8px);.Button-label{line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button-content>:not(:last-child){margin-right:4px;margin-right:var(--primer-control-small-gap,4px)}}.Button--large{gap:8px;gap:var(--primer-control-large-gap,8px);height:40px;height:var(--primer-control-large-size,40px);padding:0 16px;padding:0 var(--primer-control-large-paddingInline-spacious,16px);.Button-label{line-height:1.5;line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-large-gap,8px)}}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid transparent}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary.Button--pressed,.Button--primary:active,.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary.Button--disabled,.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary.Button--active,.Button--secondary:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary.Button--pressed,.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary.Button--disabled,.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{fill:var(--color-btn-text);color:var(--color-btn-text)}.Button--invisible:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible.Button--active,.Button--invisible.Button--pressed,.Button--invisible:active,.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible.Button--disabled,.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--link{fill:var(--color-accent-default);border:none;color:var(--color-accent-default)}.Button--link:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--link.Button--active,.Button--link.Button--pressed,.Button--link:active,.Button--link[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--link.Button--disabled,.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:transparent;border-color:transparent;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover{fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger.Button--pressed,.Button--danger:active,.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger.disabled,.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:initial;place-content:center;width:32px;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:28px;width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:40px;width:var(--primer-control-large-size,40px)}:root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:8px;padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;height:1px;position:absolute;top:-6px;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:normal}.ActionListWrap--divided .ActionListItem--navActive{& .ActionListItem-label:before,+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.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{visibility:hidden}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}.ActionListItem{background-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive):not(:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive):not(:focus-visible){box-shadow:1px var(--color-action-list-item-default-active-border);box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:1px solid transparent;outline:solid var(--primer-borderWidth-thin,1px) transparent;outline-offset:-1px;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:1px var(--color-action-list-item-default-active-border);box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:1px solid transparent;outline:solid var(--primer-borderWidth-thin,1px) transparent;outline-offset:-1px;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{-webkit-animation:ActionListItem-active-bg 4s cubic-bezier(.33,1,.68,1) forwards;animation:ActionListItem-active-bg 4s cubic-bezier(.33,1,.68,1) forwards}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{@-webkit-keyframes ActionListItem-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default),.4);transform:scale(1)}to{transform:scale(.97)}}@keyframes ActionListItem-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default),.4);transform:scale(1)}to{transform:scale(.97)}}}.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(--color-action-list-item-default-selected-bg);font-weight:400;font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem){.ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--color-accent-fg);border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);content:"";height:24px;height:var(--base-size-24,24px);left:-8px;left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:4px;width:var(--base-size-4,4px)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem[aria-disabled=true]:hover{background-color:transparent;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:transparent;border:none;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:-webkit-min-content -webkit-min-content minmax(0,auto) -webkit-min-content -webkit-min-content;grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:-webkit-min-content;grid-template-rows:min-content;padding-block:6px;padding-block:var(--primer-actionListContent-paddingBlock);padding-inline:8px;padding-inline:var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:transparent;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:24px;padding-left:var(--base-size-24,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:32px;padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:36px;padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:40px;padding-left:var(--base-size-40,40px)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:600;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(-16px);transform:translateY(calc(var(--base-size-16, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--color-action-list-item-default-selected-bg)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{&:before,+.ActionListItem:before{visibility:hidden}}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--color-accent-fg);border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);content:"";height:24px;height:var(--base-size-24,24px);left:-8px;left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:4px;width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-label{grid-area:label}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:4px;gap:var(--base-size-4,4px);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:8px;gap:var(--base-size-8,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:400;font-weight:var(--base-text-weight-normal,400);line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:20px;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:400;font-weight:var(--base-text-weight-normal,400);line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:12px;font-size:var(--primer-text-body-size-small,12px)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--color-fg-muted);display:flex;flex-direction:column;font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:600;font-weight:var(--base-text-weight-semibold,600);padding:($spacer-1 * 1.5) $spacer-2;padding-block:8px;padding-block:var(--base-size-8,8px);padding-inline:6px;padding-inline:var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{-webkit-margin-before:7px;-webkit-margin-before:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));-webkit-margin-after:8px;-webkit-margin-after:var(--base-size-8,8px);background:var(--color-action-list-item-inline-divider);border:0;display:block;height:1px;height:var(--primer-borderWidth-thin,1px);list-style:none;margin-block-end:8px;margin-block-end:var(--base-size-8,8px);margin-block-start:7px;margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:-8px;margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider{.ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:600;font-weight:var(--base-text-weight-semibold,600)}}.ActionList-sectionDivider--filled{-webkit-margin-before:7px;-webkit-margin-before:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));-webkit-margin-after:8px;-webkit-margin-after:var(--base-size-8,8px);background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:8px;margin-block-end:var(--base-size-8,8px);margin-block-start:7px;margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:-8px;margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:8px;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{-webkit-margin-before:0;margin-block-start:0}

data/app/assets/styles/primer_view_components.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/primer/beta/button.pcss","<no source>","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"primer_view_components.css","sourcesContent":["/* CSS for Button  */\n/* temporary, pre primitives release */\n:root {\n  --primer-duration-fast: 80ms;\n  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  color: var(--color-btn-text);\n  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--primer-control-medium-size, 32px);\n  padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n\n  /* mobile friendly sizing */\n  @media (pointer: course) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--primer-duration-fast);\n  }\n\n  &:active,\n  &.Button--active {\n    transition: none;\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* &:focus {\n    @mixin focusOutline;\n  } */\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  display: inline-flex;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--primer-control-medium-gap, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--primer-text-body-size-small, 12px);\n  height: var(--primer-control-small-size, 28px);\n  padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n  gap: var(--primer-control-small-gap, 4px);\n\n  .Button-label {\n    line-height: var(--primer-text-body-lineHeight-small, calc(20/12));\n  }\n\n  .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--primer-control-large-size, 40px);\n  padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n  gap: var(--primer-control-large-gap, 8px);\n\n  .Button-label {\n    line-height: var(--primer-text-body-lineHeight-large, calc(48/32));\n  }\n\n  .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active,\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover  {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active,\n  &.Button--active {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-primer-shadow-inset);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--color-btn-text);\n  fill: var(--color-btn-text);\n\n  &:hover {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active,\n  &.Button--active,\n  &.Button--pressed {\n    background-color: var(--color-action-list-item-default-active-bg);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n.Button--link {\n  color: var(--color-accent-default);\n  fill: var(--color-accent-default);\n  border: none;\n\n  &:hover {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active,\n  &.Button--active,\n  &.Button--pressed {\n    background-color: var(--color-action-list-item-default-active-bg);\n    /* box-shadow: var(--color-primer-shadow-inset); */\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active,\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &.disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n.Button--iconOnly {\n  display: grid;\n  place-content: center;\n  padding: unset;\n  width: var(--primer-control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--primer-control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--primer-control-large-size, 40px);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
+{"version":3,"sources":["../../components/primer/beta/button.pcss","<no source>","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss","../../components/primer/alpha/action_list/action-list.pcss","../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"primer_view_components.css","sourcesContent":["/* CSS for Button  */\n/* temporary, pre primitives release */\n:root {\n  --primer-duration-fast: 80ms;\n  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--primer-borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  color: var(--color-btn-text);\n  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--primer-control-medium-size, 32px);\n  padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--primer-control-medium-gap, 8px);\n\n  /* mobile friendly sizing */\n  @media (pointer: course) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--primer-duration-fast);\n  }\n\n  &:active,\n  &.Button--active {\n    transition: none;\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* &:focus {\n    @mixin focusOutline;\n  } */\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  display: inline-flex;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--primer-control-medium-gap, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--primer-text-body-size-small, 12px);\n  height: var(--primer-control-small-size, 28px);\n  padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n  gap: var(--primer-control-small-gap, 4px);\n\n  .Button-label {\n    line-height: var(--primer-text-body-lineHeight-small, calc(20/12));\n  }\n\n  .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--primer-control-large-size, 40px);\n  padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n  gap: var(--primer-control-large-gap, 8px);\n\n  .Button-label {\n    line-height: var(--primer-text-body-lineHeight-large, calc(48/32));\n  }\n\n  .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--primer-control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active,\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover  {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active,\n  &.Button--active {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-primer-shadow-inset);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--color-btn-text);\n  fill: var(--color-btn-text);\n\n  &:hover {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active,\n  &.Button--active,\n  &.Button--pressed {\n    background-color: var(--color-action-list-item-default-active-bg);\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n.Button--link {\n  color: var(--color-accent-default);\n  fill: var(--color-accent-default);\n  border: none;\n\n  &:hover {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active,\n  &.Button--active,\n  &.Button--pressed {\n    background-color: var(--color-action-list-item-default-active-bg);\n    /* box-shadow: var(--color-primer-shadow-inset); */\n  }\n\n  &:disabled,\n  &.Button--disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active,\n  &[aria-pressed='true'],\n  &.Button--pressed {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &.disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n.Button--iconOnly {\n  display: grid;\n  place-content: center;\n  padding: unset;\n  width: var(--primer-control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--primer-control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--primer-control-large-size, 40px);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n",":root {\n  --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n  list-style: none;\n}\n\n.ActionListWrap--inset {\n  padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n  & .ActionListItem-label::before {\n    position: absolute;\n    top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n    display: block;\n    width: 100%;\n    height: 1px;\n    content: '';\n    background: var(--color-action-list-item-inline-divider);\n  }\n\n  /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n  & .ActionListItem-descriptionWrap--inline {\n    &::before {\n      position: absolute;\n      top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n      display: block;\n      width: 100%;\n      height: var(--primer-borderWidth-thin, 1px);\n      content: '';\n      background: var(--color-action-list-item-inline-divider);\n    }\n\n    /* unset the default label pseudo */\n    & .ActionListItem-label::before {\n      content: unset;\n    }\n  }\n\n  /* hide divider if item is active */\n  & .ActionListItem--navActive {\n    & .ActionListItem-label::before,\n    + .ActionListItem .ActionListItem-label::before {\n      visibility: hidden;\n    }\n  }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n  visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n  visibility: hidden;\n}\n\n/* ActionList::Item */\n\n/* divider behavior */\n\n.ActionListItem {\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\n/* sub items */\n\n.ActionListItem {\n  /* target contents of li if sub-item (li wraps item label + nested ul) */\n  /* collapse styles here */\n  &.ActionListItem--hasSubItem {\n    /* first child */\n    & > .ActionListContent {\n      z-index: 1;\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-action-list-item-default-hover-bg);\n        }\n      }\n\n      &:active {\n        background-color: var(--color-action-list-item-default-active-bg);\n      }\n    }\n  }\n}\n\n/* <li> */\n.ActionListItem {\n  position: relative;\n  list-style: none;\n  background-color: transparent;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n\n  /* state */\n\n  &:hover,\n  &:active {\n    cursor: pointer;\n  }\n\n  /* only hover li without list as children */\n  &:not(.ActionListItem--hasSubItem),\n   /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n  &.ActionListItem--hasSubItem > .ActionListContent {\n    @media (hover: hover) {\n      &:hover {\n        cursor: pointer;\n        background-color: var(--color-action-list-item-default-hover-bg);\n\n        &:not(.ActionListItem--navActive):not(:focus-visible) {\n          /* Support for \"Windows high contrast mode\" */\n          outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n          outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n          box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n        }\n      }\n    }\n\n    &:active {\n      background: var(--color-action-list-item-default-active-bg);\n\n      &:not(.ActionListItem--navActive) {\n        /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n        outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n        outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n        box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n      }\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: ActionListItem-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);\n      }\n\n      @keyframes ActionListItem-active-bg {\n        50% {\n          box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);\n          transform: scale(1);\n        }\n\n        100% {\n          transform: scale(0.97);\n        }\n      }\n    }\n\n    &:active {\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, 400);\n    background: var(--color-action-list-item-default-selected-bg);\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-action-list-item-default-hover-bg);\n      }\n    }\n\n    &::before,\n    & + .ActionListItem::before {\n      visibility: hidden;\n    }\n\n    /* blue accent line\n    &::after {\n      @include activeIndicatorLine(-$spacer-1);\n      @mixin activeIndicatorLine\n    } */\n  }\n\n  /* active state [aria-current] */\n\n  &.ActionListItem--navActive {\n    &:not(.ActionListItem--subItem) {\n      .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n    }\n\n    &:not(.ActionListItem--danger) {\n      background: var(--color-action-list-item-default-selected-bg);\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-action-list-item-default-hover-bg);\n        }\n      }\n\n      &::before,\n      & + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line  */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* disabled */\n\n  &[aria-disabled='true'] {\n    & .ActionListContent {\n      & .ActionListItem-label,\n      & .ActionListItem-description {\n        color: var(--color-primer-fg-disabled);\n      }\n\n      & .ActionListItem-visual {\n        fill: var(--color-primer-fg-disabled);\n      }\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* variants */\n\n  /* danger */\n  &.ActionListItem--danger {\n    & .ActionListItem-label {\n      color: var(--color-danger-fg);\n    }\n\n    & .ActionListItem-visual {\n      color: var(--color-danger-fg);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background: var(--color-action-list-item-danger-hover-bg);\n\n        & .ActionListItem-label {\n          color: var(--color-action-list-item-danger-hover-text);\n        }\n      }\n    }\n\n    & .ActionListContent {\n      &:active {\n        background: var(--color-action-list-item-danger-active-bg);\n      }\n    }\n  }\n}\n\n/* button or a href */\n.ActionListContent {\n  position: relative;\n  display: grid;\n  width: 100%;\n  padding-block: var(--primer-actionListContent-paddingBlock);\n  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);\n  color: var(--color-fg-default);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--primer-borderRadius-medium, 6px);\n  transition: background 33.333ms linear;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  grid-template-rows: min-content;\n  grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n  grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n  align-items: start;\n\n  /* column-gap persists with empty grid-areas, margin applies only when children exist */\n  & > :not(:last-child) {\n    margin-right: var(--primer-control-medium-gap, 8px);\n  }\n\n  /* state */\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  /* disabled */\n  &[aria-disabled='true'] {\n    & .ActionListItem-label,\n    & .ActionListItem-description {\n      color: var(--color-primer-fg-disabled);\n    }\n\n    & .ActionListItem-visual {\n      fill: var(--color-primer-fg-disabled);\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        cursor: not-allowed;\n        background-color: transparent;\n      }\n    }\n  }\n\n  /* collapsible item [aria-expanded] */\n\n  /* nesting (single level)\n   target items inside expanded subgroups */\n  &[aria-expanded] {\n    & + .ActionList--subGroup {\n      @media screen and (prefers-reduced-motion: no-preference) {\n        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n      }\n\n      & .ActionListContent {\n        padding-left: var(--base-size-24, 24px);\n      }\n    }\n\n    /* has 16px leading visual */\n    &.ActionListContent--visual16 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-32, 32px);\n      }\n    }\n\n    /* has 20px leading visual */\n    &.ActionListContent--visual20 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-36, 36px);\n      }\n    }\n\n    /* has 24px leading visual */\n    &.ActionListContent--visual24 + .ActionList--subGroup {\n      & .ActionListContent {\n        padding-left: var(--base-size-40, 40px);\n      }\n    }\n  }\n\n  &[aria-expanded='true'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(-1);\n    }\n\n    & + .ActionList--subGroup {\n      height: auto;\n      overflow: visible;\n      visibility: visible;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &.ActionListContent--hasActiveSubItem {\n      & > .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n    }\n  }\n\n  &[aria-expanded='false'] {\n    & .ActionListItem-collapseIcon {\n      transition: transform 120ms linear;\n      transform: scaleY(1);\n    }\n\n    & + .ActionList--subGroup {\n      height: 0;\n      overflow: hidden;\n      visibility: hidden;\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--base-size-16, 16px)));\n    }\n\n    /* show active indicator on parent collapse if child is active */\n    &.ActionListContent--hasActiveSubItem {\n      background: var(--color-action-list-item-default-selected-bg);\n\n      & .ActionListItem-label {\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n\n      &::before,\n      + .ActionListItem::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n\n  /* sizes */\n\n  &.ActionListContent--sizeLarge {\n    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n  }\n\n  &.ActionListContent--sizeXLarge {\n    --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n  }\n\n  /* On pointer:coarse (mobile), all list items are large */\n  @media (pointer: coarse) {\n    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n  }\n\n  &.ActionListContent--blockDescription {\n    /* if leading/trailing visual, align with first line of content */\n    & .ActionListItem-visual {\n      place-self: start;\n    }\n  }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n  grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n  grid-area: leadingVisual;\n}\n\n.ActionListItem-label {\n  grid-area: label;\n}\n\n.ActionListItem-visual--trailing {\n  grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n  grid-area: trailingAction;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n  grid-area: label;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4, 4px);\n\n  & .ActionListItem-label {\n    font-weight: var(--base-text-weight-semibold, 600);\n  }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n  position: relative;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--base-size-8, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n  font-size: var(--primer-text-body-size-small, 12px);\n  font-weight: var(--base-text-weight-normal, 400);\n  line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n  color: var(--color-fg-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n  display: flex;\n  min-height: var(--primer-control-medium-lineBoxHeight, 20px);\n  color: var(--color-fg-muted);\n  pointer-events: none;\n  fill: var(--color-fg-muted);\n  align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n  position: relative;\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-normal, 400);\n  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n  color: var(--color-fg-default);\n}\n\n.ActionListItem-label--truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n  font-size: var(--primer-text-body-size-small, 12px);\n}\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: ($spacer-1 * 1.5) $spacer-2;\n    padding-inline: var(--primer-actionListContent-paddingBlock);\n    padding-block: var(--base-size-8, 8px);\n    font-size: var(--primer-text-body-size-small, 12px);\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-muted);\n    flex-direction: column;\n  }\n\n  /* no children */\n  &:empty {\n    display: block;\n    height: var(--primer-borderWidth-thin, 1px);\n    padding: 0;\n    margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n    margin-block-end: var(--base-size-8, 8px);\n    margin-inline: calc(-1 * var(--base-size-8, 8px));\n    list-style: none;\n    background: var(--color-action-list-item-inline-divider);\n    border: 0;\n  }\n\n  .ActionList-sectionDivider-title {\n    font-size: var(--primer-text-body-size-small, 12px);\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-muted);\n  }\n}\n\n.ActionList-sectionDivider--filled {\n  margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n  margin-block-end: var(--base-size-8, 8px);\n  margin-inline: calc(-1 * var(--base-size-8, 8px));\n  background: var(--color-canvas-subtle);\n  border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n  border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n  /* if no children, treat as divider */\n  &:empty {\n    height: var(--base-size-8, 8px);\n    box-sizing: border-box;\n  }\n\n  &:first-child {\n    margin-block-start: 0;\n  }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n  position: absolute;\n  top: calc(50% - 12px);\n  left: $padding-left;\n  width: var(--base-size-4, 4px);\n  height: var(--base-size-24, 24px);\n  content: '';\n  background: var(--color-accent-fg);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n"]}

data/app/components/primer/alpha/action_list/action-list-selection.pcss

@@ -0,0 +1,92 @@
+/*
+* checkbox item [aria-checked]
+* listbox [aria-selected]
+*/
+.ActionListItem {
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
+    /* multiselect checkmark */
+    & .ActionListItem-multiSelectCheckmark {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0 linear 0, opacity 50ms;
+    }
+
+    /* singleselect checkmark */
+    & .ActionListItem-singleSelectCheckmark {
+      visibility: visible;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+      }
+    }
+
+    /* checkbox */
+    & .ActionListItem-multiSelectIcon {
+      & .ActionListItem-multiSelectIconRect {
+        fill: var(--color-accent-fg);
+        stroke: var(--color-accent-fg);
+        stroke-width: var(--primer-borderWidth-thin, 1px);
+      }
+
+      & .ActionListItem-multiSelectCheckmark {
+        fill: var(--color-fg-on-emphasis);
+      }
+    }
+  }
+
+  &[aria-checked='false'],
+  &[aria-selected='false'] {
+    /* multiselect checkmark */
+    & .ActionListItem-multiSelectCheckmark {
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility 0 linear 50ms, opacity 50ms;
+    }
+
+    /* singleselect checkmark */
+    & .ActionListItem-singleSelectCheckmark {
+      visibility: hidden;
+      transition: visibility 0s linear 200ms;
+      clip-path: inset(16px 0 0 0);
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+      }
+    }
+
+    /* checkbox */
+    & .ActionListItem-multiSelectIcon {
+      & .ActionListItem-multiSelectIconRect {
+        fill: var(--color-canvas-default);
+        stroke: var(--color-border-default);
+        stroke-width: var(--primer-borderWidth-thin, 1px);
+      }
+    }
+
+    & .ActionListItem-multiSelectIconRect {
+      fill: var(--color-canvas-default);
+      border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+    }
+  }
+
+  @keyframes checkmarkIn {
+    from {
+      clip-path: inset(16px 0 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  @keyframes checkmarkOut {
+    from {
+      clip-path: inset(0 0 0 0);
+    }
+
+    to {
+      clip-path: inset(16px 0 0 0);
+    }
+  }
+}