primer_view_components 0.0.98 → 0.0.99

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +10 -0
  3. data/app/assets/styles/primer_view_components.css +1 -1
  4. data/app/assets/styles/primer_view_components.css.map +1 -1
  5. data/app/components/primer/alpha/action_list/item.rb +12 -2
  6. data/app/components/primer/beta/button.pcss +23 -15
  7. data/app/components/primer/beta/button.rb +9 -0
  8. data/lib/primer/view_components/version.rb +1 -1
  9. data/previews/primer/alpha/action_list_preview.rb +30 -0
  10. data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb +54 -0
  11. data/previews/primer/beta/button_preview.rb +39 -4
  12. metadata +4 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 47893a22bb4a08e254dae2744724c97bcc998116747da9c6596ae156b71ba5e9
4
- data.tar.gz: f54f340e71d3dc92edcffd5b5e1aaa507dc0dab4d268d855e6d3f0fc06895c3c
3
+ metadata.gz: d69efe4530734f139514ed3e5a2fbb2b67c25f8fd66d1694df721a5bb40e16a3
4
+ data.tar.gz: 92252c3768b259f1071c15851266a5c037b8c6ce8a5dfbd892dc702ae0b37753
5
5
  SHA512:
6
- metadata.gz: c5e6d60d6de17b2c74f05c2e988dbe4b90a4581c16dda91c0a181013c2e2c1147cac6ec350f059a8363dd81e24517b4d40ad90ace61d1bf899478c06bcc22f4e
7
- data.tar.gz: 9c3fd3c0cec9c5077f885293703076ff183ebb865ed962930e1440a92504abebc16c22d5dcba3bda7b6463a2ae0daa763e7f3a028481231d5f92017e1c00165e
6
+ metadata.gz: b65bed86f6f8d02d111e2d3f15c57fa38c58ef4afc7c35b83cc5d35bf91bc6537e9e6f37e2e84fb489ee9da87b1f8c2c18d37256fbc45a9ffa24ede67131244f
7
+ data.tar.gz: 4d6db1fbc6ba814c905a4468953681130aa48e0e4034c717157fd44bd433fce50f9f897aa4d0039cd55f748d8b75da99eaa187e0d00bfb47c23321658fa0fc74
data/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## 0.0.99
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1421](https://github.com/primer/view_components/pull/1421) [`c35a5c32`](https://github.com/primer/view_components/commit/c35a5c3226ab39aa62182ee4816e63d9c1d0c598) Thanks [@langermank](https://github.com/langermank)! - Fix Beta::Button visual regressions
8
+ - Add back link styles
9
+ - Ensure invisible buttons are blue when no visuals are present
10
+
11
+ * [#1422](https://github.com/primer/view_components/pull/1422) [`a129a4d1`](https://github.com/primer/view_components/commit/a129a4d1b7d1dfae6d2d623e1603ea6e75533940) Thanks [@camertron](https://github.com/camertron)! - Add SVG and custom content options to NavList's leading visual slot
12
+
3
13
  ## 0.0.98
4
14
 
5
15
  ### Patch Changes
data/app/assets/styles/primer_view_components.css CHANGED
@@ -1 +1 @@
1
- :root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:transparent;border:1px solid;border:var(--primer-borderWidth-thin,1px) solid;border-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:500;font-weight:var(--base-text-weight-medium,500);gap:8px;gap:var(--primer-control-medium-gap,8px);height:32px;height:var(--primer-control-medium-size,32px);justify-content:space-between;padding:0 12px;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:80ms cubic-bezier(.65,0,.35,1);transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:80ms;transition-duration:var(--primer-duration-fast)}.Button.Button--active,.Button:active{transition:none}.Button.Button--disabled,.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:-webkit-min-content minmax(0,auto) -webkit-min-content;grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:-4px;margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:12px;font-size:var(--primer-text-body-size-small,12px);gap:4px;gap:var(--primer-control-small-gap,4px);height:28px;height:var(--primer-control-small-size,28px);padding:0 8px;padding:0 var(--primer-control-small-paddingInline-condensed,8px);.Button-label{line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button-content>:not(:last-child){margin-right:4px;margin-right:var(--primer-control-small-gap,4px)}}.Button--large{gap:8px;gap:var(--primer-control-large-gap,8px);height:40px;height:var(--primer-control-large-size,40px);padding:0 16px;padding:0 var(--primer-control-large-paddingInline-spacious,16px);.Button-label{line-height:1.5;line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-large-gap,8px)}}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid transparent}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary.Button--pressed,.Button--primary:active,.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary.Button--disabled,.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary.Button--active,.Button--secondary:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary.Button--pressed,.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary.Button--disabled,.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{fill:var(--color-btn-text);color:var(--color-btn-text)}.Button--invisible:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible.Button--active,.Button--invisible.Button--pressed,.Button--invisible:active,.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible.Button--disabled,.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--link{fill:var(--color-accent-default);border:none;color:var(--color-accent-default)}.Button--link:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--link.Button--active,.Button--link.Button--pressed,.Button--link:active,.Button--link[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--link.Button--disabled,.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:transparent;border-color:transparent;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover{fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger.Button--pressed,.Button--danger:active,.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger.disabled,.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:initial;place-content:center;width:32px;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:28px;width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:40px;width:var(--primer-control-large-size,40px)}:root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:8px;padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;height:1px;position:absolute;top:-6px;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:normal}.ActionListWrap--divided .ActionListItem--navActive{& .ActionListItem-label:before,+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before{visibility:hidden}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}.ActionListItem{background-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive):not(:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive):not(:focus-visible){box-shadow:1px var(--color-action-list-item-default-active-border);box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:1px solid transparent;outline:solid var(--primer-borderWidth-thin,1px) transparent;outline-offset:-1px;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:1px var(--color-action-list-item-default-active-border);box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:1px solid transparent;outline:solid var(--primer-borderWidth-thin,1px) transparent;outline-offset:-1px;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{-webkit-animation:ActionListItem-active-bg 4s cubic-bezier(.33,1,.68,1) forwards;animation:ActionListItem-active-bg 4s cubic-bezier(.33,1,.68,1) forwards}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{@-webkit-keyframes ActionListItem-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default),.4);transform:scale(1)}to{transform:scale(.97)}}@keyframes ActionListItem-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default),.4);transform:scale(1)}to{transform:scale(.97)}}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--color-action-list-item-default-selected-bg);font-weight:400;font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem){.ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--color-accent-fg);border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);content:"";height:24px;height:var(--base-size-24,24px);left:-8px;left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:4px;width:var(--base-size-4,4px)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem[aria-disabled=true]:hover{background-color:transparent;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:transparent;border:none;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:-webkit-min-content -webkit-min-content minmax(0,auto) -webkit-min-content -webkit-min-content;grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:-webkit-min-content;grid-template-rows:min-content;padding-block:6px;padding-block:var(--primer-actionListContent-paddingBlock);padding-inline:8px;padding-inline:var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:transparent;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:24px;padding-left:var(--base-size-24,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:32px;padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:36px;padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:40px;padding-left:var(--base-size-40,40px)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(-16px);transform:translateY(calc(var(--base-size-16, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--color-action-list-item-default-selected-bg)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{&:before,+.ActionListItem:before{visibility:hidden}}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--color-accent-fg);border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);content:"";height:24px;height:var(--base-size-24,24px);left:-8px;left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:4px;width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-label{grid-area:label}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:4px;gap:var(--base-size-4,4px);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:8px;gap:var(--base-size-8,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:400;font-weight:var(--base-text-weight-normal,400);line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:20px;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:400;font-weight:var(--base-text-weight-normal,400);line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:12px;font-size:var(--primer-text-body-size-small,12px)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--color-fg-muted);display:flex;flex-direction:column;font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:600;font-weight:var(--base-text-weight-semibold,600);padding:($spacer-1 * 1.5) $spacer-2;padding-block:8px;padding-block:var(--base-size-8,8px);padding-inline:6px;padding-inline:var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{-webkit-margin-before:7px;-webkit-margin-before:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));-webkit-margin-after:8px;-webkit-margin-after:var(--base-size-8,8px);background:var(--color-action-list-item-inline-divider);border:0;display:block;height:1px;height:var(--primer-borderWidth-thin,1px);list-style:none;margin-block-end:8px;margin-block-end:var(--base-size-8,8px);margin-block-start:7px;margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:-8px;margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider{.ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:600;font-weight:var(--base-text-weight-semibold,600)}}.ActionList-sectionDivider--filled{-webkit-margin-before:7px;-webkit-margin-before:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));-webkit-margin-after:8px;-webkit-margin-after:var(--base-size-8,8px);background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:8px;margin-block-end:var(--base-size-8,8px);margin-block-start:7px;margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:-8px;margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:8px;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{-webkit-margin-before:0;margin-block-start:0}
1
+ :root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:transparent;border:1px solid;border:var(--primer-borderWidth-thin,1px) solid;border-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:500;font-weight:var(--base-text-weight-medium,500);gap:8px;gap:var(--primer-control-medium-gap,8px);height:32px;height:var(--primer-control-medium-size,32px);justify-content:space-between;padding:0 12px;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:80ms cubic-bezier(.65,0,.35,1);transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (pointer:course){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:80ms;transition-duration:var(--primer-duration-fast)}.Button.Button--active,.Button:active{transition:none}.Button.Button--disabled,.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:-webkit-min-content minmax(0,auto) -webkit-min-content;grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-label{grid-area:text;line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:-4px;margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:12px;font-size:var(--primer-text-body-size-small,12px);gap:4px;gap:var(--primer-control-small-gap,4px);height:28px;height:var(--primer-control-small-size,28px);padding:0 8px;padding:0 var(--primer-control-small-paddingInline-condensed,8px);.Button-label{line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button-content>:not(:last-child){margin-right:4px;margin-right:var(--primer-control-small-gap,4px)}}.Button--large{gap:8px;gap:var(--primer-control-large-gap,8px);height:40px;height:var(--primer-control-large-size,40px);padding:0 16px;padding:0 var(--primer-control-large-paddingInline-spacious,16px);.Button-label{line-height:1.5;line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button-content>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-large-gap,8px)}}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid transparent}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary.Button--pressed,.Button--primary:active,.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary.Button--disabled,.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary.Button--active,.Button--secondary:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary.Button--pressed,.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary.Button--disabled,.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible.Button--active,.Button--invisible.Button--pressed,.Button--invisible:active,.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible.Button--disabled,.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:auto;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link.Button--disabled,.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:transparent;border-color:transparent;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover{fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger.Button--pressed,.Button--danger:active,.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger.disabled,.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:initial;place-content:center;width:32px;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:28px;width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:40px;width:var(--primer-control-large-size,40px)}:root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:8px;padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;height:1px;position:absolute;top:-6px;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:normal}.ActionListWrap--divided .ActionListItem--navActive{& .ActionListItem-label:before,+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before{visibility:hidden}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}.ActionListItem{background-color:transparent;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive):not(:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive):not(:focus-visible){box-shadow:1px var(--color-action-list-item-default-active-border);box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:1px solid transparent;outline:solid var(--primer-borderWidth-thin,1px) transparent;outline-offset:-1px;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:1px var(--color-action-list-item-default-active-border);box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:1px solid transparent;outline:solid var(--primer-borderWidth-thin,1px) transparent;outline-offset:-1px;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{-webkit-animation:ActionListItem-active-bg 4s cubic-bezier(.33,1,.68,1) forwards;animation:ActionListItem-active-bg 4s cubic-bezier(.33,1,.68,1) forwards}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{@-webkit-keyframes ActionListItem-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default),.4);transform:scale(1)}to{transform:scale(.97)}}@keyframes ActionListItem-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default),.4);transform:scale(1)}to{transform:scale(.97)}}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-selected=true]{background:var(--color-action-list-item-default-selected-bg);font-weight:400;font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem){.ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--color-accent-fg);border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);content:"";height:24px;height:var(--base-size-24,24px);left:-8px;left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:4px;width:var(--base-size-4,4px)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem[aria-disabled=true]:hover{background-color:transparent;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:transparent;border:none;border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:-webkit-min-content -webkit-min-content minmax(0,auto) -webkit-min-content -webkit-min-content;grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:-webkit-min-content;grid-template-rows:min-content;padding-block:6px;padding-block:var(--primer-actionListContent-paddingBlock);padding-inline:8px;padding-inline:var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:8px;margin-right:var(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:transparent;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:24px;padding-left:var(--base-size-24,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:32px;padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:36px;padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:40px;padding-left:var(--base-size-40,40px)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(-16px);transform:translateY(calc(var(--base-size-16, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--color-action-list-item-default-selected-bg)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{&:before,+.ActionListItem:before{visibility:hidden}}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--color-accent-fg);border-radius:6px;border-radius:var(--primer-borderRadius-medium,6px);content:"";height:24px;height:var(--base-size-24,24px);left:-8px;left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:4px;width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-label{grid-area:label}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:4px;gap:var(--base-size-4,4px);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:600;font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:8px;gap:var(--base-size-8,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:400;font-weight:var(--base-text-weight-normal,400);line-height:1.66667;line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:20px;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:14px;font-size:var(--primer-text-body-size-medium,14px);font-weight:400;font-weight:var(--base-text-weight-normal,400);line-height:1.42857;line-height:var(--primer-text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:12px;font-size:var(--primer-text-body-size-small,12px)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--color-fg-muted);display:flex;flex-direction:column;font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:600;font-weight:var(--base-text-weight-semibold,600);padding:($spacer-1 * 1.5) $spacer-2;padding-block:8px;padding-block:var(--base-size-8,8px);padding-inline:6px;padding-inline:var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{-webkit-margin-before:7px;-webkit-margin-before:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));-webkit-margin-after:8px;-webkit-margin-after:var(--base-size-8,8px);background:var(--color-action-list-item-inline-divider);border:0;display:block;height:1px;height:var(--primer-borderWidth-thin,1px);list-style:none;margin-block-end:8px;margin-block-end:var(--base-size-8,8px);margin-block-start:7px;margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:-8px;margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider{.ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:12px;font-size:var(--primer-text-body-size-small,12px);font-weight:600;font-weight:var(--base-text-weight-semibold,600)}}.ActionList-sectionDivider--filled{-webkit-margin-before:7px;-webkit-margin-before:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));-webkit-margin-after:8px;-webkit-margin-after:var(--base-size-8,8px);background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:8px;margin-block-end:var(--base-size-8,8px);margin-block-start:7px;margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:-8px;margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:8px;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{-webkit-margin-before:0;margin-block-start:0}
data/app/assets/styles/primer_view_components.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/primer/beta/button.pcss","<no source>","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss","../../components/primer/alpha/action_list/action-list.pcss","../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"primer_view_components.css","sourcesContent":["/* CSS for Button */\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active,\n &.Button--active {\n transition: none;\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* &:focus {\n @mixin focusOutline;\n } */\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20/12));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48/32));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active,\n &[aria-pressed='true'],\n &.Button--pressed {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active,\n &.Button--active {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'],\n &.Button--pressed {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n fill: var(--color-btn-text);\n\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active,\n &.Button--active,\n &.Button--pressed {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--link {\n color: var(--color-accent-default);\n fill: var(--color-accent-default);\n border: none;\n\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active,\n &.Button--active,\n &.Button--pressed {\n background-color: var(--color-action-list-item-default-active-bg);\n /* box-shadow: var(--color-primer-shadow-inset); */\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active,\n &[aria-pressed='true'],\n &.Button--pressed {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n",":root {\n --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset {\n padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--primer-borderWidth-thin, 1px);\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n/* divider behavior */\n\n.ActionListItem {\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n}\n\n/* sub items */\n\n.ActionListItem {\n /* target contents of li if sub-item (li wraps item label + nested ul) */\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &:active {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n }\n }\n}\n\n/* <li> */\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--color-action-list-item-default-hover-bg);\n\n &:not(.ActionListItem--navActive):not(:focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n }\n }\n\n &:active {\n background: var(--color-action-list-item-default-active-bg);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: ActionListItem-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);\n }\n\n @keyframes ActionListItem-active-bg {\n 50% {\n box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0.97);\n }\n }\n }\n\n &:active {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal, 400);\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line\n &::after {\n @include activeIndicatorLine(-$spacer-1);\n @mixin activeIndicatorLine\n } */\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n &:not(.ActionListItem--subItem) {\n .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--color-danger-fg);\n }\n\n & .ActionListItem-visual {\n color: var(--color-danger-fg);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--color-action-list-item-danger-hover-bg);\n\n & .ActionListItem-label {\n color: var(--color-action-list-item-danger-hover-text);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--color-action-list-item-danger-active-bg);\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--primer-actionListContent-paddingBlock);\n padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);\n color: var(--color-fg-default);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24, 24px);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32, 32px);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36, 36px);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40, 40px);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16, 16px)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--color-action-list-item-default-selected-bg);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n &::before,\n + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--sizeXLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-label {\n grid-area: label;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4, 4px);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n color: var(--color-fg-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--primer-control-medium-lineBoxHeight, 20px);\n color: var(--color-fg-muted);\n pointer-events: none;\n fill: var(--color-fg-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n color: var(--color-fg-default);\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--primer-text-body-size-small, 12px);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n padding: ($spacer-1 * 1.5) $spacer-2;\n padding-inline: var(--primer-actionListContent-paddingBlock);\n padding-block: var(--base-size-8, 8px);\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--primer-borderWidth-thin, 1px);\n padding: 0;\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n list-style: none;\n background: var(--color-action-list-item-inline-divider);\n border: 0;\n }\n\n .ActionList-sectionDivider-title {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n background: var(--color-canvas-subtle);\n border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8, 8px);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4, 4px);\n height: var(--base-size-24, 24px);\n content: '';\n background: var(--color-accent-fg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n"]}
1
+ {"version":3,"sources":["../../components/primer/beta/button.pcss","<no source>","../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss","../../components/primer/alpha/action_list/action-list.pcss","../../../lib/postcss_mixins/activeIndicatorLine.pcss"],"names":[],"mappings":"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","file":"primer_view_components.css","sourcesContent":["/* CSS for Button */\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active,\n &.Button--active {\n transition: none;\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* &:focus {\n @mixin focusOutline;\n } */\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active,\n &[aria-pressed='true'],\n &.Button--pressed {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active,\n &.Button--active {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'],\n &.Button--pressed {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active,\n &.Button--active,\n &.Button--pressed {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &.Button--disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active,\n &[aria-pressed='true'],\n &.Button--pressed {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &.disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n",":root {\n --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);\n}\n\n/* ActionList */\n\n/* <ul> */\n.ActionListWrap {\n list-style: none;\n}\n\n.ActionListWrap--inset {\n padding: var(--base-size-8, 8px);\n}\n\n/* list dividers */\n\n.ActionListWrap--divided {\n & .ActionListItem-label::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: 1px;\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* if descriptionWrap--inline exists, move pseudo divider to wrapper */\n & .ActionListItem-descriptionWrap--inline {\n &::before {\n position: absolute;\n top: calc(-1 * var(--primer-actionListContent-paddingBlock));\n display: block;\n width: 100%;\n height: var(--primer-borderWidth-thin, 1px);\n content: '';\n background: var(--color-action-list-item-inline-divider);\n }\n\n /* unset the default label pseudo */\n & .ActionListItem-label::before {\n content: unset;\n }\n }\n\n /* hide divider if item is active */\n & .ActionListItem--navActive {\n & .ActionListItem-label::before,\n + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-label::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n}\n\n/* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,\n.ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n}\n\n/* ActionList::Item */\n\n/* divider behavior */\n\n.ActionListItem {\n /* hide dividers */\n @media (hover: hover) {\n &:hover {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n\n & .ActionListItem-descriptionWrap--inline::before,\n & + .ActionListItem .ActionListItem-descriptionWrap--inline::before {\n visibility: hidden;\n }\n }\n }\n\n /* Make sure that the first visible item isn't a divider */\n &[hidden] + .ActionList-sectionDivider {\n display: none;\n }\n}\n\n/* sub items */\n\n.ActionListItem {\n /* target contents of li if sub-item (li wraps item label + nested ul) */\n /* collapse styles here */\n &.ActionListItem--hasSubItem {\n /* first child */\n & > .ActionListContent {\n z-index: 1;\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &:active {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n }\n }\n}\n\n/* <li> */\n.ActionListItem {\n position: relative;\n list-style: none;\n background-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n\n /* state */\n\n &:hover,\n &:active {\n cursor: pointer;\n }\n\n /* only hover li without list as children */\n &:not(.ActionListItem--hasSubItem),\n /* target contents of first child li if sub-item (li wraps item label + nested ul) */\n &.ActionListItem--hasSubItem > .ActionListContent {\n @media (hover: hover) {\n &:hover {\n cursor: pointer;\n background-color: var(--color-action-list-item-default-hover-bg);\n\n &:not(.ActionListItem--navActive):not(:focus-visible) {\n /* Support for \"Windows high contrast mode\" */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n }\n }\n\n &:active {\n background: var(--color-action-list-item-default-active-bg);\n\n &:not(.ActionListItem--navActive) {\n /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n outline: solid var(--primer-borderWidth-thin, 1px) transparent;\n outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));\n box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: ActionListItem-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1);\n }\n\n @keyframes ActionListItem-active-bg {\n 50% {\n box-shadow: inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0.97);\n }\n }\n }\n\n &:active {\n & .ActionListItem-label::before,\n & + .ActionListItem .ActionListItem-label::before {\n visibility: hidden;\n }\n }\n }\n\n /* Autocomplete [aria-selected] items */\n\n &[aria-selected='true'] {\n font-weight: var(--base-text-weight-normal, 400);\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line\n &::after {\n @include activeIndicatorLine(-$spacer-1);\n @mixin activeIndicatorLine\n } */\n }\n\n /* active state [aria-current] */\n\n &.ActionListItem--navActive {\n &:not(.ActionListItem--subItem) {\n .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n\n &:not(.ActionListItem--danger) {\n background: var(--color-action-list-item-default-selected-bg);\n\n @media (hover: hover) {\n &:hover {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n }\n\n &::before,\n & + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* disabled */\n\n &[aria-disabled='true'] {\n & .ActionListContent {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* variants */\n\n /* danger */\n &.ActionListItem--danger {\n & .ActionListItem-label {\n color: var(--color-danger-fg);\n }\n\n & .ActionListItem-visual {\n color: var(--color-danger-fg);\n }\n\n @media (hover: hover) {\n &:hover {\n background: var(--color-action-list-item-danger-hover-bg);\n\n & .ActionListItem-label {\n color: var(--color-action-list-item-danger-hover-text);\n }\n }\n }\n\n & .ActionListContent {\n &:active {\n background: var(--color-action-list-item-danger-active-bg);\n }\n }\n }\n}\n\n/* button or a href */\n.ActionListContent {\n position: relative;\n display: grid;\n width: 100%;\n padding-block: var(--primer-actionListContent-paddingBlock);\n padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);\n color: var(--color-fg-default);\n text-align: left;\n user-select: none;\n background-color: transparent;\n border: none;\n border-radius: var(--primer-borderRadius-medium, 6px);\n transition: background 33.333ms linear;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n grid-template-rows: min-content;\n grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';\n grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;\n align-items: start;\n\n /* column-gap persists with empty grid-areas, margin applies only when children exist */\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n\n /* state */\n\n &:hover {\n text-decoration: none;\n }\n\n /* disabled */\n &[aria-disabled='true'] {\n & .ActionListItem-label,\n & .ActionListItem-description {\n color: var(--color-primer-fg-disabled);\n }\n\n & .ActionListItem-visual {\n fill: var(--color-primer-fg-disabled);\n }\n\n @media (hover: hover) {\n &:hover {\n cursor: not-allowed;\n background-color: transparent;\n }\n }\n }\n\n /* collapsible item [aria-expanded] */\n\n /* nesting (single level)\n target items inside expanded subgroups */\n &[aria-expanded] {\n & + .ActionList--subGroup {\n @media screen and (prefers-reduced-motion: no-preference) {\n transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n & .ActionListContent {\n padding-left: var(--base-size-24, 24px);\n }\n }\n\n /* has 16px leading visual */\n &.ActionListContent--visual16 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-32, 32px);\n }\n }\n\n /* has 20px leading visual */\n &.ActionListContent--visual20 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-36, 36px);\n }\n }\n\n /* has 24px leading visual */\n &.ActionListContent--visual24 + .ActionList--subGroup {\n & .ActionListContent {\n padding-left: var(--base-size-40, 40px);\n }\n }\n }\n\n &[aria-expanded='true'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(-1);\n }\n\n & + .ActionList--subGroup {\n height: auto;\n overflow: visible;\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n }\n\n &.ActionListContent--hasActiveSubItem {\n & > .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n }\n }\n\n &[aria-expanded='false'] {\n & .ActionListItem-collapseIcon {\n transition: transform 120ms linear;\n transform: scaleY(1);\n }\n\n & + .ActionList--subGroup {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n transform: translateY(calc(-1 * var(--base-size-16, 16px)));\n }\n\n /* show active indicator on parent collapse if child is active */\n &.ActionListContent--hasActiveSubItem {\n background: var(--color-action-list-item-default-selected-bg);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n\n &::before,\n + .ActionListItem::before {\n visibility: hidden;\n }\n\n /* blue accent line */\n &::after {\n @mixin activeIndicatorLine;\n }\n }\n }\n\n /* sizes */\n\n &.ActionListContent--sizeLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--sizeXLarge {\n --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));\n }\n\n /* On pointer:coarse (mobile), all list items are large */\n @media (pointer: coarse) {\n --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));\n }\n\n &.ActionListContent--blockDescription {\n /* if leading/trailing visual, align with first line of content */\n & .ActionListItem-visual {\n place-self: start;\n }\n }\n}\n\n/* place children on grid */\n\n.ActionListItem-action--leading {\n grid-area: leadingAction;\n}\n\n.ActionListItem-visual--leading {\n grid-area: leadingVisual;\n}\n\n.ActionListItem-label {\n grid-area: label;\n}\n\n.ActionListItem-visual--trailing {\n grid-area: trailingVisual;\n}\n\n.ActionListItem-action--trailing {\n grid-area: trailingAction;\n}\n\n/* wrapper span\n default block */\n.ActionListItem-descriptionWrap {\n grid-area: label;\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4, 4px);\n\n & .ActionListItem-label {\n font-weight: var(--base-text-weight-semibold, 600);\n }\n}\n\n/* inline */\n.ActionListItem-descriptionWrap--inline {\n position: relative;\n flex-direction: row;\n align-items: baseline;\n gap: var(--base-size-8, 8px);\n}\n\n/* description */\n.ActionListItem-description {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n color: var(--color-fg-muted);\n}\n\n/* helper for grid alignment with multi-line content\n span wrapping svg or text */\n.ActionListItem-visual,\n.ActionListItem-action {\n display: flex;\n min-height: var(--primer-control-medium-lineBoxHeight, 20px);\n color: var(--color-fg-muted);\n pointer-events: none;\n fill: var(--color-fg-muted);\n align-items: center;\n}\n\n/* text */\n.ActionListItem-label {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-normal, 400);\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n color: var(--color-fg-default);\n}\n\n.ActionListItem-label--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* nested lists (only supports 1 level currently)\n target ActionListItem--subItem for padding-left to maintain :active :after state */\n\n.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {\n font-size: var(--primer-text-body-size-small, 12px);\n}\n\n/* trailing action icon button */\n\n.ActionListItem--withActions {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}\n\n.ActionListItem-trailingAction {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* show trailing action button on hover */\n\n.ActionListItem--trailingActionHover {\n & .ActionListItem-trailingAction {\n visibility: hidden;\n }\n\n &:hover,\n &:focus-within {\n & .ActionListItem-trailingAction {\n visibility: visible;\n }\n }\n}\n\n/* ActionList::Divider */\n\n.ActionList-sectionDivider {\n /* with children */\n &:not(:empty) {\n display: flex;\n padding: ($spacer-1 * 1.5) $spacer-2;\n padding-inline: var(--primer-actionListContent-paddingBlock);\n padding-block: var(--base-size-8, 8px);\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n flex-direction: column;\n }\n\n /* no children */\n &:empty {\n display: block;\n height: var(--primer-borderWidth-thin, 1px);\n padding: 0;\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n list-style: none;\n background: var(--color-action-list-item-inline-divider);\n border: 0;\n }\n\n .ActionList-sectionDivider-title {\n font-size: var(--primer-text-body-size-small, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-muted);\n }\n}\n\n.ActionList-sectionDivider--filled {\n margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));\n margin-block-end: var(--base-size-8, 8px);\n margin-inline: calc(-1 * var(--base-size-8, 8px));\n background: var(--color-canvas-subtle);\n border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);\n\n /* if no children, treat as divider */\n &:empty {\n height: var(--base-size-8, 8px);\n box-sizing: border-box;\n }\n\n &:first-child {\n margin-block-start: 0;\n }\n}\n","/* active indicator line for navlist items */\n@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {\n position: absolute;\n top: calc(50% - 12px);\n left: $padding-left;\n width: var(--base-size-4, 4px);\n height: var(--base-size-24, 24px);\n content: '';\n background: var(--color-accent-fg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n"]}
data/app/components/primer/alpha/action_list/item.rb CHANGED
@@ -32,14 +32,24 @@ module Primer
32
32
  # for layout options.
33
33
  renders_one :description
34
34
 
35
- # An icon or avatar that will render to the left of the label.
35
+ # An icon, avatar, SVG, or custom content that will render to the left of the label.
36
36
  #
37
37
  # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>.
38
38
  #
39
39
  # To render an avatar, call the `with_leading_visual_avatar` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>.
40
+ #
41
+ # To render an SVG, call the `with_leading_visual_svg` method.
42
+ #
43
+ # To render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.
40
44
  renders_one :leading_visual, types: {
41
45
  icon: Primer::OcticonComponent,
42
- avatar: ->(**kwargs) { Primer::Beta::Avatar.new(**{ **kwargs, size: 16 }) }
46
+ avatar: ->(**kwargs) { Primer::Beta::Avatar.new(**{ **kwargs, size: 16 }) },
47
+ svg: lambda { |**system_arguments|
48
+ Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
49
+ },
50
+ content: lambda { |**system_arguments|
51
+ Primer::BaseComponent.new(tag: :span, **system_arguments)
52
+ }
43
53
  }
44
54
 
45
55
  # Used internally.
data/app/components/primer/beta/button.pcss CHANGED
@@ -103,7 +103,7 @@ summary.Button {
103
103
  .Button-label {
104
104
  grid-area: text;
105
105
  white-space: nowrap;
106
- line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));
106
+ line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
107
107
  }
108
108
 
109
109
  .Button-leadingVisual {
@@ -127,7 +127,7 @@ summary.Button {
127
127
  gap: var(--primer-control-small-gap, 4px);
128
128
 
129
129
  .Button-label {
130
- line-height: var(--primer-text-body-lineHeight-small, calc(20/12));
130
+ line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
131
131
  }
132
132
 
133
133
  .Button-content {
@@ -143,7 +143,7 @@ summary.Button {
143
143
  gap: var(--primer-control-large-gap, 8px);
144
144
 
145
145
  .Button-label {
146
- line-height: var(--primer-text-body-lineHeight-large, calc(48/32));
146
+ line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));
147
147
  }
148
148
 
149
149
  .Button-content {
@@ -213,7 +213,7 @@ summary.Button {
213
213
  border-color: var(--color-btn-border);
214
214
  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
215
215
 
216
- &:hover {
216
+ &:hover {
217
217
  background-color: var(--color-btn-hover-bg);
218
218
  border-color: var(--color-btn-hover-border);
219
219
  }
@@ -242,7 +242,6 @@ summary.Button {
242
242
 
243
243
  .Button--invisible {
244
244
  color: var(--color-btn-text);
245
- fill: var(--color-btn-text);
246
245
 
247
246
  &:hover {
248
247
  background-color: var(--color-action-list-item-default-hover-bg);
@@ -263,23 +262,32 @@ summary.Button {
263
262
  border-color: var(--color-btn-border);
264
263
  fill: var(--color-primer-fg-disabled);
265
264
  }
265
+
266
+ /* if button has no visuals, use link blue for text */
267
+ &.Button--invisible-noVisuals .Button-label {
268
+ color: var(--color-accent-fg);
269
+ }
270
+
271
+ & .Button-visual {
272
+ color: var(--color-fg-muted);
273
+ }
266
274
  }
267
275
 
268
276
  .Button--link {
269
- color: var(--color-accent-default);
270
- fill: var(--color-accent-default);
277
+ color: var(--color-accent-fg);
278
+ fill: var(--color-accent-fg);
279
+ display: inline-block;
280
+ font-size: inherit;
271
281
  border: none;
282
+ height: unset;
283
+ padding: 0;
272
284
 
273
- &:hover {
274
- background-color: var(--color-action-list-item-default-hover-bg);
285
+ &:hover:not(:disabled) {
286
+ text-decoration: underline;
275
287
  }
276
288
 
277
- &[aria-pressed='true'],
278
- &:active,
279
- &.Button--active,
280
- &.Button--pressed {
281
- background-color: var(--color-action-list-item-default-active-bg);
282
- /* box-shadow: var(--color-primer-shadow-inset); */
289
+ &:focus-visible, &:focus {
290
+ outline-offset: 2px;
283
291
  }
284
292
 
285
293
  &:disabled,
data/app/components/primer/beta/button.rb CHANGED
@@ -169,6 +169,15 @@ module Primer
169
169
 
170
170
  private
171
171
 
172
+ def before_render
173
+ return unless @scheme == :invisible && !trailing_visual && !leading_visual && !trailing_action
174
+
175
+ @system_arguments[:classes] = class_names(
176
+ @system_arguments[:classes],
177
+ "Button--invisible-noVisuals"
178
+ )
179
+ end
180
+
172
181
  def trimmed_content
173
182
  return if content.blank?
174
183
 
data/lib/primer/view_components/version.rb CHANGED
@@ -5,7 +5,7 @@ module Primer
5
5
  module VERSION
6
6
  MAJOR = 0
7
7
  MINOR = 0
8
- PATCH = 98
8
+ PATCH = 99
9
9
 
10
10
  STRING = [MAJOR, MINOR, PATCH].join(".")
11
11
  end
data/previews/primer/alpha/action_list_preview.rb CHANGED
@@ -33,6 +33,36 @@ module Primer
33
33
  end
34
34
  end
35
35
 
36
+ # @label Leading visuals
37
+ #
38
+ # @param role text
39
+ # @param scheme [Symbol] select [full, inset]
40
+ # @param show_dividers toggle
41
+ def leading_visuals(
42
+ role: Primer::Alpha::ActionList::DEFAULT_ROLE,
43
+ scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
44
+ show_dividers: false
45
+ )
46
+ render(Primer::Alpha::ActionList.new(
47
+ role: role,
48
+ scheme: scheme,
49
+ show_dividers: show_dividers,
50
+ aria: { label: "Action List" }
51
+ )) do |c|
52
+ c.with_heading(title: "Action List")
53
+ c.with_item(label: "Leading SVG visual", href: "/") do |item|
54
+ item.with_leading_visual_svg do
55
+ '<path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>'.html_safe
56
+ end
57
+ end
58
+ c.with_item(label: "Custom content", href: "/") do |item|
59
+ item.with_leading_visual_content do
60
+ '<span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>'.html_safe
61
+ end
62
+ end
63
+ end
64
+ end
65
+
36
66
  # @label Divider
37
67
  #
38
68
  # @param scheme [Symbol] select [subtle, filled]
data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb ADDED
@@ -0,0 +1,54 @@
1
+ <div style="display: flex; gap: 1rem;">
2
+ <%= render(Primer::Beta::Button.new(
3
+ scheme: :invisible,
4
+ size: :medium,
5
+ )) do |c| %>
6
+ Button
7
+ <% end %>
8
+ <%= render(Primer::Beta::Button.new(
9
+ scheme: :invisible,
10
+ size: :medium,
11
+ )) do |c| %>
12
+ <% c.leading_visual_icon(icon: :search) %>
13
+ Button
14
+ <% end %>
15
+ <%= render(Primer::Beta::Button.new(
16
+ scheme: :invisible,
17
+ size: :medium,
18
+ )) do |c| %>
19
+ <% c.trailing_action_icon(icon: "triangle-down") %>
20
+ Button
21
+ <% end %>
22
+ <%= render(Primer::Beta::Button.new(
23
+ scheme: :invisible,
24
+ size: :medium,
25
+ )) do |c| %>
26
+ <% c.trailing_visual_counter(count: "15") %>
27
+ Button
28
+ <% end %>
29
+ <%= render(Primer::Beta::Button.new(
30
+ scheme: :invisible,
31
+ size: :medium,
32
+ )) do |c| %>
33
+ <% c.leading_visual_icon(icon: :eye) %>
34
+ <% c.trailing_visual_counter(count: "15") %>
35
+ Button
36
+ <% end %>
37
+ <%= render(Primer::Beta::Button.new(
38
+ scheme: :invisible,
39
+ size: :medium,
40
+ )) do |c| %>
41
+ <% c.leading_visual_icon(icon: :eye) %>
42
+ <% c.trailing_visual_counter(count: "15") %>
43
+ <% c.trailing_action_icon(icon: "triangle-down") %>
44
+ Button
45
+ <% end %>
46
+ <%= render(Primer::Beta::Button.new(
47
+ scheme: :invisible,
48
+ size: :medium,
49
+ id: "my-id"
50
+ )) do |c| %>
51
+ <% c.with_tooltip(text: "Tooltip text") %>
52
+ Button with tooltip
53
+ <% end %>
54
+ </div>
data/previews/primer/beta/button_preview.rb CHANGED
@@ -4,6 +4,14 @@ module Primer
4
4
  module Beta
5
5
  # @label Button
6
6
  class ButtonPreview < ViewComponent::Preview
7
+ # Upgrade guide to Primer::Beta::Button
8
+ #
9
+ # | old param | new param | options |
10
+ # | -- | -- | -- |
11
+ # | variant | size | :small, :medium (default), :large |
12
+ # | :outline | :default or :invisible | option for :scheme |
13
+ # | dropdown | trailing action icon slot | see trailing action preview for markup |
14
+ #
7
15
  # @label Playground
8
16
  # @param scheme select [default, primary, danger, invisible, link]
9
17
  # @param size select [small, medium, large]
@@ -121,6 +129,33 @@ module Primer
121
129
  end
122
130
  end
123
131
 
132
+ # @label Invisible all visuals
133
+ def invisible_all_visuals
134
+ render_with_template(locals: {})
135
+ end
136
+
137
+ # @label Link
138
+ # @param block toggle
139
+ # @param disabled toggle
140
+ # @param tag select [a, summary, button]
141
+ def link(
142
+ id: "button-preview",
143
+ block: false,
144
+ tag: :button,
145
+ disabled: false
146
+ )
147
+ render(Primer::Beta::Button.new(
148
+ scheme: :link,
149
+ size: :medium,
150
+ block: block,
151
+ id: id,
152
+ tag: tag,
153
+ disabled: disabled
154
+ )) do |_c|
155
+ "Button"
156
+ end
157
+ end
158
+
124
159
  # @label All schemes
125
160
  def all_schemes
126
161
  render_with_template(locals: {})
@@ -147,7 +182,7 @@ module Primer
147
182
  end
148
183
 
149
184
  # @label Link as button
150
- # @param scheme select [default, primary, danger, outline, invisible, link]
185
+ # @param scheme select [default, primary, danger, invisible, link]
151
186
  # @param size select [small, medium]
152
187
  # @param block toggle
153
188
  # @param align_content select [center, start]
@@ -172,7 +207,7 @@ module Primer
172
207
  end
173
208
 
174
209
  # @label Trailing visual
175
- # @param scheme select [default, primary, danger, outline, invisible, link]
210
+ # @param scheme select [default, primary, danger, invisible, link]
176
211
  # @param size select [small, medium]
177
212
  # @param block toggle
178
213
  # @param align_content select [center, start]
@@ -196,7 +231,7 @@ module Primer
196
231
  end
197
232
 
198
233
  # @label Leading visual
199
- # @param scheme select [default, primary, danger, outline, invisible, link]
234
+ # @param scheme select [default, primary, danger, invisible, link]
200
235
  # @param size select [small, medium]
201
236
  # @param block toggle
202
237
  # @param align_content select [center, start]
@@ -232,7 +267,7 @@ module Primer
232
267
  end
233
268
 
234
269
  # @label With tooltip
235
- # @param scheme select [default, primary, danger, outline, invisible, link]
270
+ # @param scheme select [default, primary, danger, invisible, link]
236
271
  # @param size select [small, medium]
237
272
  # @param block toggle
238
273
  # @param align_content select [center, start]
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.98
4
+ version: 0.0.99
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-09-28 00:00:00.000000000 Z
11
+ date: 2022-09-29 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
@@ -754,6 +754,7 @@ files:
754
754
  - previews/primer/beta/button_group_preview.rb
755
755
  - previews/primer/beta/button_preview.rb
756
756
  - previews/primer/beta/button_preview/all_schemes.html.erb
757
+ - previews/primer/beta/button_preview/invisible_all_visuals.html.erb
757
758
  - previews/primer/beta/button_preview/leading_visual.html.erb
758
759
  - previews/primer/beta/button_preview/trailing_action.html.erb
759
760
  - previews/primer/beta/button_preview/trailing_visual.html.erb
@@ -827,7 +828,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
827
828
  - !ruby/object:Gem::Version
828
829
  version: '0'
829
830
  requirements: []
830
- rubygems_version: 3.3.7
831
+ rubygems_version: 3.1.6
831
832
  signing_key:
832
833
  specification_version: 4
833
834
  summary: ViewComponents for the Primer Design System