@primer/view-components 0.27.0-rc.d62dbfed → 0.27.1-rc.54e32349

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

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

package/app/components/primer/focus_group.js

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
 import '@oddbird/popover-polyfill';
-const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="option"]'];
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
 const getMnemonicFor = (item) => item.textContent?.trim()[0].toLowerCase();
 const printable = /^\S$/;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.27.0-rc.d62dbfed",
+  "version": "0.27.1-rc.54e32349",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -62,7 +62,7 @@
     "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.35.1",
-    "@primer/css": "21.3.3",
+    "@primer/css": "21.3.6",
     "@primer/primitives": "^8.1.0",
     "@primer/stylelint-config": "^12.7.2",
     "@rollup/plugin-node-resolve": "^15.2.3",

package/static/arguments.json

@@ -104,6 +104,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "aria_selection_variant",
+        "type": "Symbol",
+        "default": "`:checked`",
+        "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+      },
       {
         "name": "form_arguments",
         "type": "Hash",
@@ -383,6 +389,12 @@
         "default": "`{}`",
         "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
       },
+      {
+        "name": "overlay_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying [Overlay](/components/alpha/overlay)"
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -435,6 +447,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "aria_selection_variant",
+        "type": "Symbol",
+        "default": "`:checked`",
+        "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+      },
       {
         "name": "form_arguments",
         "type": "Hash",

package/static/constants.json

@@ -19,6 +19,11 @@
   "Primer::Alpha::ActionBar::Item": {
   },
   "Primer::Alpha::ActionList": {
+    "ARIA_SELECTION_VARIANT_OPTIONS": [
+      "selected",
+      "checked"
+    ],
+    "DEFAULT_ARIA_SELECTION_VARIANT": "checked",
     "DEFAULT_MENU_ITEM_ROLE": "menuitem",
     "DEFAULT_ROLE": "list",
     "DEFAULT_SCHEME": "full",
@@ -27,6 +32,7 @@
     "FormWrapper": "Primer::Alpha::ActionList::FormWrapper",
     "Heading": "Primer::Alpha::ActionList::Heading",
     "Item": "Primer::Alpha::ActionList::Item",
+    "LIST_BOX_ITEM_ROLE": "option",
     "MENU_ROLE": "menu",
     "SCHEME_MAPPINGS": {
       "full": null,

package/static/info_arch.json

@@ -246,6 +246,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "aria_selection_variant",
+        "type": "Symbol",
+        "default": "`:checked`",
+        "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+      },
       {
         "name": "form_arguments",
         "type": "Hash",
@@ -386,6 +392,13 @@
 
         ]
       },
+      {
+        "name": "aria_selection_variant",
+        "description": "Returns the value of attribute aria_selection_variant.",
+        "parameters": [
+
+        ]
+      },
       {
         "name": "build_item",
         "description": "Builds a new item but does not add it to the list. Use this method\ninstead of the `#with_item` slot if you need to render an item outside\nthe context of a list, eg. if rendering additional items to append to\nan existing list, perhaps via a separate HTTP request.",
@@ -798,6 +811,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/listbox",
+        "name": "listbox",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -1271,6 +1297,12 @@
         "default": "`{}`",
         "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
       },
+      {
+        "name": "overlay_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}"
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -1968,6 +2000,12 @@
             "default": "`:none`",
             "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
           },
+          {
+            "name": "aria_selection_variant",
+            "type": "Symbol",
+            "default": "`:checked`",
+            "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+          },
           {
             "name": "form_arguments",
             "type": "Hash",
@@ -16276,7 +16314,7 @@
   {
     "component": "BaseComponent",
     "fully_qualified_name": "Primer::BaseComponent",
-    "description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n  Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
+    "description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) previously used by [Primer React](https://primer.style/guides/react/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n  Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
     "args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
   }
 ]

package/static/previews.json

@@ -428,6 +428,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/listbox",
+        "name": "listbox",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },