@primer/view-components 0.14.0 → 0.15.0-rc.1027c29b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/action_list.css +1 -1
- package/app/components/primer/alpha/action_list.css.json +1 -0
- package/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
- package/app/components/primer/alpha/action_menu/action_menu_element.js +85 -11
- package/app/components/primer/alpha/overlay.css +1 -1
- package/app/components/primer/alpha/overlay.css.json +2 -1
- package/app/components/primer/beta/button.css +1 -1
- package/app/components/primer/beta/button.css.json +9 -8
- package/package.json +4 -4
- package/static/arguments.json +92 -1
- package/static/audited_at.json +4 -1
- package/static/classes.json +3 -0
- package/static/constants.json +9 -0
- package/static/info_arch.json +243 -52
- package/static/previews.json +39 -0
- package/static/statuses.json +3 -0
@@ -1 +1 @@
|
|
1
|
-
:root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;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;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
|
1
|
+
:root{--actionListContent-paddingBlock:var(--control-medium-paddingBlock,0.375rem)}.ActionListHeader{margin-bottom:var(--base-size-16,1rem);margin-left:var(--base-size-8,.5rem)}.ActionListWrap{list-style:none}.ActionListWrap--inset,.ActionListWrap--inset[popover]{padding:var(--base-size-8,.5rem)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));content:"";display:block;position:absolute;top:calc(var(--actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--borderWidth-thin,max(1px,.0625rem))}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:var(--control-transparent-bgColor-rest,#0000);border-radius:var(--borderRadius-medium,.375rem);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--boxShadow-thin,inset 0 0 0 max(1px,.0625rem)) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border));outline:solid var(--borderWidth-thin,max(1px,.0625rem)) #0000;outline-offset:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg));font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--navActive{outline:2px solid #0000}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--control-danger-fgColor-rest,var(--color-danger-fg))}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--control-danger-bgColor-hover,var(--color-action-list-item-danger-hover-bg))}.ActionListItem.ActionListItem--danger:hover .ActionListItem-description,.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--control-danger-bgColor-active,var(--color-action-list-item-danger-active-bg))}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-description,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--control-danger-fgColor-hover,var(--color-action-list-item-danger-hover-text))}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--borderRadius-medium,.375rem);color:var(--control-fgColor-rest,var(--color-fg-default));display:grid;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;padding-block:var(--actionListContent-paddingBlock);padding-inline:var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.ActionListContent:hover{-webkit-text-decoration:none;text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,1.5rem)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,2rem)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,2.25rem)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,2.5rem)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16,1rem)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,.25rem)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke:var(--control-checked-bgColor-rest,var(--color-switch-track-checked-bg));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));stroke:var(--control-borderColor-rest,var(--color-btn-border));stroke-width:var(--borderWidth-thin,1px)}.ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,1px) solid var(--control-borderColor-rest,var(--color-btn-border))}.ActionListContent.ActionListContent--sizeLarge{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--actionListContent-paddingBlock:var(--control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--actionListContent-paddingBlock:var(--control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-visual--leading svg{fill:currentcolor}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,.5rem);position:relative}.ActionListItem-description{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem-action,.ActionListItem-visual{fill:var(--fgColor-muted,var(--color-fg-muted));align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;min-height:var(--control-medium-lineBoxHeight,1.25rem);pointer-events:none}.ActionListItem-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--text-body-lineHeight-medium,1.4285);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--text-body-size-small,.75rem);line-height:var(--text-body-lineHeight-small,1.6666)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);padding-block:var(--base-size-8,.5rem);padding-inline:var(--actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--borderColor-muted,var(--color-action-list-item-inline-divider));border:0;display:block;height:var(--borderWidth-thin,max(1px,.0625rem));list-style:none;margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));border-top:solid var(--borderWidth-thin,max(1px,.0625rem)) var(--borderColor-muted,var(--color-action-list-item-inline-divider));margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,max(1px, .0625rem)));margin-inline:calc(var(--base-size-8,.5rem)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,.5rem)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
|
@@ -5,6 +5,7 @@
|
|
5
5
|
".ActionListHeader",
|
6
6
|
".ActionListWrap",
|
7
7
|
".ActionListWrap--inset",
|
8
|
+
".ActionListWrap--inset[popover]",
|
8
9
|
".ActionListWrap--divided .ActionListItem-label:before",
|
9
10
|
".ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before",
|
10
11
|
".ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before",
|
@@ -6,6 +6,15 @@ type SelectedItem = {
|
|
6
6
|
value: string | null | undefined;
|
7
7
|
element: Element;
|
8
8
|
};
|
9
|
+
export type ItemActivatedEvent = {
|
10
|
+
item: Element;
|
11
|
+
checked: boolean;
|
12
|
+
};
|
13
|
+
declare global {
|
14
|
+
interface HTMLElementEventMap {
|
15
|
+
itemActivated: CustomEvent<ItemActivatedEvent>;
|
16
|
+
}
|
17
|
+
}
|
9
18
|
export declare class ActionMenuElement extends HTMLElement {
|
10
19
|
#private;
|
11
20
|
includeFragment: IncludeFragmentElement;
|
@@ -22,6 +31,17 @@ export declare class ActionMenuElement extends HTMLElement {
|
|
22
31
|
connectedCallback(): void;
|
23
32
|
disconnectedCallback(): void;
|
24
33
|
handleEvent(event: Event): void;
|
34
|
+
get items(): HTMLElement[];
|
35
|
+
getItemById(itemId: string): HTMLElement | null;
|
36
|
+
isItemDisabled(item: Element | null): boolean;
|
37
|
+
disableItem(item: Element | null): void;
|
38
|
+
enableItem(item: Element | null): void;
|
39
|
+
isItemHidden(item: Element | null): boolean;
|
40
|
+
hideItem(item: Element | null): void;
|
41
|
+
showItem(item: Element | null): void;
|
42
|
+
isItemChecked(item: Element | null): boolean;
|
43
|
+
checkItem(item: Element | null): void;
|
44
|
+
uncheckItem(item: Element | null): void;
|
25
45
|
}
|
26
46
|
declare global {
|
27
47
|
interface Window {
|
@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
15
15
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
16
16
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
17
17
|
};
|
18
|
-
var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isKeyboardActivationViaEnter, _ActionMenuElement_isKeyboardActivationViaSpace, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get
|
18
|
+
var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isKeyboardActivationViaEnter, _ActionMenuElement_isKeyboardActivationViaSpace, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
|
19
19
|
import { controller, target } from '@github/catalyst';
|
20
20
|
import '@oddbird/popover-polyfill';
|
21
21
|
const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
|
@@ -84,7 +84,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
|
|
84
84
|
results.push({
|
85
85
|
label: labelEl === null || labelEl === void 0 ? void 0 : labelEl.textContent,
|
86
86
|
value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.getAttribute('data-value'),
|
87
|
-
element: selectedItem
|
87
|
+
element: selectedItem,
|
88
88
|
});
|
89
89
|
}
|
90
90
|
return results;
|
@@ -101,7 +101,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
|
|
101
101
|
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
|
102
102
|
if (this.includeFragment) {
|
103
103
|
this.includeFragment.addEventListener('include-fragment-replaced', this, {
|
104
|
-
signal
|
104
|
+
signal,
|
105
105
|
});
|
106
106
|
}
|
107
107
|
}
|
@@ -141,6 +141,8 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
|
|
141
141
|
const item = event.target.closest(menuItemSelectors.join(','));
|
142
142
|
const targetIsItem = item !== null;
|
143
143
|
if (targetIsItem && eventIsActivation) {
|
144
|
+
if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).call(this, event))
|
145
|
+
return;
|
144
146
|
const dialogInvoker = item.closest('[data-show-dialog-id]');
|
145
147
|
if (dialogInvoker) {
|
146
148
|
const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '');
|
@@ -150,7 +152,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
|
|
150
152
|
}
|
151
153
|
}
|
152
154
|
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).call(this, event, item);
|
153
|
-
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this,
|
155
|
+
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, item);
|
154
156
|
// Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
|
155
157
|
// is called. While calling preventDefault() appears to have no effect on link navigation, it skips
|
156
158
|
// form submission. The code below therefore only calls preventDefault() if the button has been
|
@@ -167,6 +169,76 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
|
|
167
169
|
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleIncludeFragmentReplaced).call(this);
|
168
170
|
}
|
169
171
|
}
|
172
|
+
get items() {
|
173
|
+
return Array.from(this.querySelectorAll(menuItemSelectors.join(',')));
|
174
|
+
}
|
175
|
+
getItemById(itemId) {
|
176
|
+
return this.querySelector(`li[data-item-id="${itemId}"`);
|
177
|
+
}
|
178
|
+
isItemDisabled(item) {
|
179
|
+
if (item) {
|
180
|
+
return item.classList.contains('ActionListItem--disabled');
|
181
|
+
}
|
182
|
+
else {
|
183
|
+
return false;
|
184
|
+
}
|
185
|
+
}
|
186
|
+
disableItem(item) {
|
187
|
+
if (item) {
|
188
|
+
item.classList.add('ActionListItem--disabled');
|
189
|
+
item.querySelector('.ActionListContent').setAttribute('aria-disabled', 'true');
|
190
|
+
}
|
191
|
+
}
|
192
|
+
enableItem(item) {
|
193
|
+
if (item) {
|
194
|
+
item.classList.remove('ActionListItem--disabled');
|
195
|
+
item.querySelector('.ActionListContent').removeAttribute('aria-disabled');
|
196
|
+
}
|
197
|
+
}
|
198
|
+
isItemHidden(item) {
|
199
|
+
if (item) {
|
200
|
+
return item.hasAttribute('hidden');
|
201
|
+
}
|
202
|
+
else {
|
203
|
+
return false;
|
204
|
+
}
|
205
|
+
}
|
206
|
+
hideItem(item) {
|
207
|
+
if (item) {
|
208
|
+
item.setAttribute('hidden', 'hidden');
|
209
|
+
}
|
210
|
+
}
|
211
|
+
showItem(item) {
|
212
|
+
if (item) {
|
213
|
+
item.removeAttribute('hidden');
|
214
|
+
}
|
215
|
+
}
|
216
|
+
isItemChecked(item) {
|
217
|
+
if (item) {
|
218
|
+
return item.querySelector('.ActionListContent').getAttribute('aria-checked') === 'true';
|
219
|
+
}
|
220
|
+
else {
|
221
|
+
return false;
|
222
|
+
}
|
223
|
+
}
|
224
|
+
checkItem(item) {
|
225
|
+
if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
|
226
|
+
const itemContent = item.querySelector('.ActionListContent');
|
227
|
+
const ariaChecked = itemContent.getAttribute('aria-checked') === 'true';
|
228
|
+
if (!ariaChecked) {
|
229
|
+
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, itemContent);
|
230
|
+
}
|
231
|
+
}
|
232
|
+
}
|
233
|
+
uncheckItem(item) {
|
234
|
+
if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
|
235
|
+
const itemContent = item.querySelector('.ActionListContent');
|
236
|
+
const ariaChecked = itemContent.getAttribute('aria-checked') === 'true';
|
237
|
+
if (ariaChecked) {
|
238
|
+
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, itemContent);
|
239
|
+
}
|
240
|
+
}
|
241
|
+
}
|
170
242
|
};
|
171
243
|
_ActionMenuElement_abortController = new WeakMap();
|
172
244
|
_ActionMenuElement_originalLabel = new WeakMap();
|
@@ -175,22 +247,24 @@ _ActionMenuElement_invokerBeingClicked = new WeakMap();
|
|
175
247
|
_ActionMenuElement_instances = new WeakSet();
|
176
248
|
_ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableItems() {
|
177
249
|
const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
|
178
|
-
for (const item of
|
250
|
+
for (const item of this.querySelectorAll(validSelectors.join(','))) {
|
179
251
|
item.addEventListener('click', __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).bind(this), { signal });
|
180
252
|
item.addEventListener('keydown', __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).bind(this), { signal });
|
181
253
|
}
|
182
254
|
};
|
183
255
|
_ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_potentiallyDisallowActivation(event) {
|
184
256
|
if (!__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event))
|
185
|
-
return;
|
257
|
+
return false;
|
186
258
|
const item = event.target.closest(menuItemSelectors.join(','));
|
187
259
|
if (!item)
|
188
|
-
return;
|
260
|
+
return false;
|
189
261
|
if (item.getAttribute('aria-disabled')) {
|
190
262
|
event.preventDefault();
|
191
263
|
event.stopPropagation();
|
192
264
|
event.stopImmediatePropagation();
|
265
|
+
return true;
|
193
266
|
}
|
267
|
+
return false;
|
194
268
|
};
|
195
269
|
_ActionMenuElement_isKeyboardActivation = function _ActionMenuElement_isKeyboardActivation(event) {
|
196
270
|
return __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaEnter).call(this, event) || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event);
|
@@ -239,7 +313,7 @@ _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handl
|
|
239
313
|
dialog.addEventListener('close', handleDialogClose, { signal });
|
240
314
|
dialog.addEventListener('cancel', handleDialogClose, { signal });
|
241
315
|
};
|
242
|
-
_ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemActivated(
|
316
|
+
_ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemActivated(item) {
|
243
317
|
// Hide popover after current event loop to prevent changes in focus from
|
244
318
|
// altering the target of the event. Not doing this specifically affects
|
245
319
|
// <a> tags. It causes the event to be sent to the currently focused element
|
@@ -276,6 +350,9 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
|
|
276
350
|
item.setAttribute('aria-checked', `${checked}`);
|
277
351
|
}
|
278
352
|
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
|
353
|
+
this.dispatchEvent(new CustomEvent('itemActivated', {
|
354
|
+
detail: { item: item.parentElement, checked: this.isItemChecked(item.parentElement) },
|
355
|
+
}));
|
279
356
|
};
|
280
357
|
_ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event, item) {
|
281
358
|
const eventWillActivateByDefault = (event instanceof MouseEvent && event.type === 'click') ||
|
@@ -373,9 +450,6 @@ _ActionMenuElement_updateInput = function _ActionMenuElement_updateInput() {
|
|
373
450
|
_ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
|
374
451
|
return this.querySelector(menuItemSelectors.join(','));
|
375
452
|
};
|
376
|
-
_ActionMenuElement_items_get = function _ActionMenuElement_items_get() {
|
377
|
-
return Array.from(this.querySelectorAll(menuItemSelectors.join(',')));
|
378
|
-
};
|
379
453
|
__decorate([
|
380
454
|
target
|
381
455
|
], ActionMenuElement.prototype, "includeFragment", void 0);
|
@@ -1 +1 @@
|
|
1
|
-
anchored-position[popover]{
|
1
|
+
anchored-position[popover]{border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}anchored-position:not(.Overlay){background:none}.Overlay[popover]:not(:popover-open){display:none}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}
|
@@ -1 +1 @@
|
|
1
|
-
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.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:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
|
1
|
+
:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.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:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled,.Button--inactive) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled,.Button--inactive){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
|
@@ -28,7 +28,7 @@
|
|
28
28
|
".Button--large .Button-content>:not(:last-child)",
|
29
29
|
".Button--fullWidth",
|
30
30
|
".Button--primary",
|
31
|
-
".Button--primary:hover:not(:disabled)",
|
31
|
+
".Button--primary:hover:not(:disabled,.Button--inactive)",
|
32
32
|
".Button--primary:focus",
|
33
33
|
".Button--primary:focus:not(:focus-visible)",
|
34
34
|
".Button--primary:focus-visible",
|
@@ -38,15 +38,15 @@
|
|
38
38
|
".Button--primary[aria-disabled=true]",
|
39
39
|
".Button--primary .Counter",
|
40
40
|
".Button--secondary",
|
41
|
-
".Button--secondary:hover:not(:disabled)",
|
41
|
+
".Button--secondary:hover:not(:disabled,.Button--inactive)",
|
42
42
|
".Button--secondary:active:not(:disabled)",
|
43
43
|
".Button--secondary[aria-pressed=true]",
|
44
44
|
".Button--secondary:disabled",
|
45
45
|
".Button--secondary[aria-disabled=true]",
|
46
46
|
".Button--invisible",
|
47
47
|
".Button--invisible.Button--iconOnly",
|
48
|
-
".Button--invisible:hover:not(:disabled)",
|
49
|
-
".Button--invisible:hover:not(:disabled) .Button-visual",
|
48
|
+
".Button--invisible:hover:not(:disabled,.Button--inactive)",
|
49
|
+
".Button--invisible:hover:not(:disabled,.Button--inactive) .Button-visual",
|
50
50
|
".Button--invisible:active:not(:disabled)",
|
51
51
|
".Button--invisible[aria-pressed=true]",
|
52
52
|
".Button--invisible:disabled",
|
@@ -55,14 +55,14 @@
|
|
55
55
|
".Button--invisible .Button-visual",
|
56
56
|
".Button--invisible .Button-visual .Counter",
|
57
57
|
".Button--link",
|
58
|
-
".Button--link:hover:not(:disabled)",
|
58
|
+
".Button--link:hover:not(:disabled,.Button--inactive)",
|
59
59
|
".Button--link:focus",
|
60
60
|
".Button--link:focus-visible",
|
61
61
|
".Button--link:disabled",
|
62
62
|
".Button--link[aria-disabled=true]",
|
63
63
|
".Button--danger",
|
64
|
-
".Button--danger:hover:not(:disabled)",
|
65
|
-
".Button--danger:hover:not(:disabled) .Counter",
|
64
|
+
".Button--danger:hover:not(:disabled,.Button--inactive)",
|
65
|
+
".Button--danger:hover:not(:disabled,.Button--inactive) .Counter",
|
66
66
|
".Button--danger:active:not(:disabled)",
|
67
67
|
".Button--danger[aria-pressed=true]",
|
68
68
|
".Button--danger:disabled",
|
@@ -72,6 +72,7 @@
|
|
72
72
|
".Button--danger .Counter",
|
73
73
|
".Button--iconOnly",
|
74
74
|
".Button--iconOnly.Button--small",
|
75
|
-
".Button--iconOnly.Button--large"
|
75
|
+
".Button--iconOnly.Button--large",
|
76
|
+
".Button--inactive:not([aria-disabled=true],:disabled)"
|
76
77
|
]
|
77
78
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/view-components",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.15.0-rc.1027c29b",
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
6
6
|
"module": "app/components/primer/primer.js",
|
@@ -43,7 +43,7 @@
|
|
43
43
|
},
|
44
44
|
"dependencies": {
|
45
45
|
"@github/auto-check-element": "^5.2.0",
|
46
|
-
"@github/auto-complete-element": "^3.
|
46
|
+
"@github/auto-complete-element": "^3.6.0",
|
47
47
|
"@github/catalyst": "^1.6.0",
|
48
48
|
"@github/clipboard-copy-element": "^1.3.0",
|
49
49
|
"@github/details-menu-element": "^1.0.12",
|
@@ -63,7 +63,7 @@
|
|
63
63
|
"@github/prettier-config": "0.0.6",
|
64
64
|
"@playwright/test": "^1.35.1",
|
65
65
|
"@primer/css": "21.0.9",
|
66
|
-
"@primer/primitives": "
|
66
|
+
"@primer/primitives": "7.15.3",
|
67
67
|
"@primer/stylelint-config": "^12.7.2",
|
68
68
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
69
69
|
"@rollup/plugin-typescript": "^8.3.3",
|
@@ -75,7 +75,7 @@
|
|
75
75
|
"eslint": "^8.23.1",
|
76
76
|
"eslint-plugin-custom-elements": "^0.0.6",
|
77
77
|
"eslint-plugin-github": "^4.9.2",
|
78
|
-
"eslint-plugin-prettier": "^
|
78
|
+
"eslint-plugin-prettier": "^5.0.0",
|
79
79
|
"markdownlint-cli2": "^0.10.0",
|
80
80
|
"mocha": "^10.0.0",
|
81
81
|
"playwright": "^1.35.1",
|
package/static/arguments.json
CHANGED
@@ -217,6 +217,12 @@
|
|
217
217
|
"default": "`nil`",
|
218
218
|
"description": "Item label. If no label is provided, content is used."
|
219
219
|
},
|
220
|
+
{
|
221
|
+
"name": "item_id",
|
222
|
+
"type": "String",
|
223
|
+
"default": "`nil`",
|
224
|
+
"description": "An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript."
|
225
|
+
},
|
220
226
|
{
|
221
227
|
"name": "label_classes",
|
222
228
|
"type": "String",
|
@@ -386,12 +392,97 @@
|
|
386
392
|
]
|
387
393
|
},
|
388
394
|
{
|
389
|
-
"component": "ActionMenu::
|
395
|
+
"component": "ActionMenu::Group",
|
390
396
|
"status": "alpha",
|
391
397
|
"a11y_reviewed": true,
|
398
|
+
"short_name": "ActionMenuGroup",
|
399
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
|
400
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
|
401
|
+
"parameters": [
|
402
|
+
{
|
403
|
+
"name": "id",
|
404
|
+
"type": "String",
|
405
|
+
"default": "`self.class.generate_id`",
|
406
|
+
"description": "HTML ID value."
|
407
|
+
},
|
408
|
+
{
|
409
|
+
"name": "role",
|
410
|
+
"type": "Boolean",
|
411
|
+
"default": "`nil`",
|
412
|
+
"description": "ARIA role describing the function of the list. listbox and menu are a common values."
|
413
|
+
},
|
414
|
+
{
|
415
|
+
"name": "item_classes",
|
416
|
+
"type": "String",
|
417
|
+
"default": "`nil`",
|
418
|
+
"description": "Additional CSS classes to attach to items."
|
419
|
+
},
|
420
|
+
{
|
421
|
+
"name": "scheme",
|
422
|
+
"type": "Symbol",
|
423
|
+
"default": "`:full`",
|
424
|
+
"description": "One of `:full` or `:inset`. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
|
425
|
+
},
|
426
|
+
{
|
427
|
+
"name": "show_dividers",
|
428
|
+
"type": "Boolean",
|
429
|
+
"default": "`false`",
|
430
|
+
"description": "Display a divider above each item in the list when it does not follow a header or divider."
|
431
|
+
},
|
432
|
+
{
|
433
|
+
"name": "select_variant",
|
434
|
+
"type": "Symbol",
|
435
|
+
"default": "`:none`",
|
436
|
+
"description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
|
437
|
+
},
|
438
|
+
{
|
439
|
+
"name": "form_arguments",
|
440
|
+
"type": "Hash",
|
441
|
+
"default": "`{}`",
|
442
|
+
"description": "Allows an `ActionList` 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. *NOTE*: Consider using an [ActionMenu](/components/alpha/actionmenu) instead of using this feature directly."
|
443
|
+
},
|
444
|
+
{
|
445
|
+
"name": "system_arguments",
|
446
|
+
"type": "Hash",
|
447
|
+
"default": "N/A",
|
448
|
+
"description": "[System arguments](/system-arguments)"
|
449
|
+
}
|
450
|
+
]
|
451
|
+
},
|
452
|
+
{
|
453
|
+
"component": "ActionMenu::Heading",
|
454
|
+
"status": "alpha",
|
455
|
+
"a11y_reviewed": false,
|
456
|
+
"short_name": "ActionMenuHeading",
|
457
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
|
458
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
|
459
|
+
"parameters": [
|
460
|
+
|
461
|
+
]
|
462
|
+
},
|
463
|
+
{
|
464
|
+
"component": "ActionMenu::List",
|
465
|
+
"status": "alpha",
|
466
|
+
"a11y_reviewed": false,
|
392
467
|
"short_name": "ActionMenuList",
|
393
468
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
|
394
469
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
|
470
|
+
"parameters": [
|
471
|
+
{
|
472
|
+
"name": "system_arguments",
|
473
|
+
"type": "Hash",
|
474
|
+
"default": "N/A",
|
475
|
+
"description": "The arguments accepted by [ActionList](/components/alpha/actionlist)"
|
476
|
+
}
|
477
|
+
]
|
478
|
+
},
|
479
|
+
{
|
480
|
+
"component": "ActionMenu::ListWrapper",
|
481
|
+
"status": "alpha",
|
482
|
+
"a11y_reviewed": true,
|
483
|
+
"short_name": "ActionMenuListWrapper",
|
484
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
|
485
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
|
395
486
|
"parameters": [
|
396
487
|
{
|
397
488
|
"name": "menu_id",
|
package/static/audited_at.json
CHANGED
@@ -8,7 +8,10 @@
|
|
8
8
|
"Primer::Alpha::ActionList::Heading": "",
|
9
9
|
"Primer::Alpha::ActionList::Item": "",
|
10
10
|
"Primer::Alpha::ActionMenu": "",
|
11
|
-
"Primer::Alpha::ActionMenu::
|
11
|
+
"Primer::Alpha::ActionMenu::Group": "2023-07-10",
|
12
|
+
"Primer::Alpha::ActionMenu::Heading": "",
|
13
|
+
"Primer::Alpha::ActionMenu::List": "",
|
14
|
+
"Primer::Alpha::ActionMenu::ListWrapper": "2023-07-10",
|
12
15
|
"Primer::Alpha::AutoComplete": "",
|
13
16
|
"Primer::Alpha::AutoComplete::Item": "",
|
14
17
|
"Primer::Alpha::Banner": "",
|
package/static/classes.json
CHANGED
package/static/constants.json
CHANGED
@@ -125,13 +125,20 @@
|
|
125
125
|
"Primer::Alpha::ActionMenu": {
|
126
126
|
"DEFAULT_PRELOAD": false,
|
127
127
|
"DEFAULT_SELECT_VARIANT": "none",
|
128
|
+
"Group": "Primer::Alpha::ActionMenu::Group",
|
129
|
+
"Heading": "Primer::Alpha::ActionMenu::Heading",
|
128
130
|
"List": "Primer::Alpha::ActionMenu::List",
|
131
|
+
"ListWrapper": "Primer::Alpha::ActionMenu::ListWrapper",
|
129
132
|
"SELECT_VARIANT_OPTIONS": [
|
130
133
|
"single",
|
131
134
|
"multiple",
|
132
135
|
"none"
|
133
136
|
]
|
134
137
|
},
|
138
|
+
"Primer::Alpha::ActionMenu::Group": {
|
139
|
+
},
|
140
|
+
"Primer::Alpha::ActionMenu::Heading": {
|
141
|
+
},
|
135
142
|
"Primer::Alpha::ActionMenu::List": {
|
136
143
|
"DEFAULT_ITEM_TAG": "button",
|
137
144
|
"ITEM_TAG_OPTIONS": [
|
@@ -140,6 +147,8 @@
|
|
140
147
|
"button"
|
141
148
|
]
|
142
149
|
},
|
150
|
+
"Primer::Alpha::ActionMenu::ListWrapper": {
|
151
|
+
},
|
143
152
|
"Primer::Alpha::AutoComplete": {
|
144
153
|
"Item": "Primer::Alpha::AutoComplete::Item"
|
145
154
|
},
|