openproject-primer_view_components 0.16.0 → 0.17.0

data/app/components/primer/beta/button.css

@@ -1 +1 @@
-:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}.Button-withTooltip{display:inline-block;position:relative}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:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
+:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}

data/app/components/primer/beta/button.css.json

@@ -8,7 +8,6 @@
     ".Button:active",
     ".Button:disabled",
     ".Button[aria-disabled=true]",
-    ".Button-withTooltip",
     "a.Button:hover",
     "summary.Button:hover",
     ".Button-content",

data/app/components/primer/beta/button.css.map

@@ -1 +1 @@
-{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --duration-fast: 80ms;\n  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium);\n  color: var(--button-default-fgColor-rest);\n  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\n  min-width: max-content;\n\n  /* mobile friendly sizing */\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: default;\n    box-shadow: none;\n  }\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\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\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\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  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n  fill: currentcolor;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-primary-bgColor-hover);\n    border-color: var(--button-primary-borderColor-hover);\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:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--button-primary-bgColor-active);\n    box-shadow: var(--button-primary-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-disabled);\n    fill: var(--button-primary-fgColor-disabled);\n  }\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-primary-bgColor-rest);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--button-default-fgColor-rest);\n  fill: var(--fgColor-muted); /* help this */\n  background-color: var(--button-default-bgColor-rest);\n  border-color: var(--button-default-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-default-bgColor-hover);\n    border-color: var(--button-default-borderColor-hover);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--button-default-bgColor-active);\n    border-color: var(--button-default-borderColor-active);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--button-default-bgColor-selected);\n    box-shadow: var(--shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-default-fgColor-rest);\n\n  &.Button--iconOnly {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n  }\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-hover);\n\n    & .Button-visual {\n      color: var(--button-invisible-iconColor-hover, var(--color-fg-default));\n    }\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-active);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-disabled);\n    fill: var(--button-invisible-fgColor-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--button-invisible-fgColor-rest);\n  }\n\n  & .Button-visual {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\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,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--button-danger-fgColor-rest);\n  fill: var(--button-danger-iconColor-rest);\n  background-color: var(--button-danger-bgColor-rest);\n  border-color: var(--button-danger-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    color: var(--button-danger-fgColor-hover);\n    fill: var(--button-danger-fgColor-hover);\n    background-color: var(--button-danger-bgColor-hover);\n    border-color: var(--button-danger-borderColor-hover);\n    box-shadow: var(--shadow-resting-small);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-hover);\n      background-color: var(--buttonCounter-danger-bgColor-hover);\n    }\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--button-danger-fgColor-active);\n    fill: var(--button-danger-fgColor-active);\n    background-color: var(--button-danger-bgColor-active);\n    border-color: var(--button-danger-borderColor-active);\n    box-shadow: var(--button-danger-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-danger-fgColor-disabled);\n    fill: var(--button-danger-fgColor-disabled);\n    background-color: var(--button-danger-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-disabled);\n      background-color: var(--buttonCounter-danger-bgColor-disabled);\n    }\n  }\n\n  & .Counter {\n    color: var(--buttonCounter-danger-fgColor-rest);\n    background-color: var(--buttonCounter-danger-bgColor-rest);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  place-content: center;\n  padding: unset;\n  width: var(--control-medium-size);\n\n  &.Button--small {\n    width: var(--control-small-size);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
+{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --duration-fast: 80ms;\n  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium);\n  color: var(--button-default-fgColor-rest);\n  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\n  min-width: max-content;\n\n  /* mobile friendly sizing */\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  &[aria-disabled='true'] {\n    cursor: default;\n    box-shadow: none;\n  }\n}\n\na.Button,\nsummary.Button {\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\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\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  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n  fill: currentcolor;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-primary-bgColor-hover);\n    border-color: var(--button-primary-borderColor-hover);\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:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--button-primary-bgColor-active);\n    box-shadow: var(--button-primary-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-disabled);\n    fill: var(--button-primary-fgColor-disabled);\n  }\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-primary-bgColor-rest);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--button-default-fgColor-rest);\n  fill: var(--fgColor-muted); /* help this */\n  background-color: var(--button-default-bgColor-rest);\n  border-color: var(--button-default-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-default-bgColor-hover);\n    border-color: var(--button-default-borderColor-hover);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--button-default-bgColor-active);\n    border-color: var(--button-default-borderColor-active);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--button-default-bgColor-selected);\n    box-shadow: var(--shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-default-fgColor-rest);\n\n  &.Button--iconOnly {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n  }\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-hover);\n\n    & .Button-visual {\n      color: var(--button-invisible-iconColor-hover, var(--color-fg-default));\n    }\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-active);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-disabled);\n    fill: var(--button-invisible-fgColor-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--button-invisible-fgColor-rest);\n  }\n\n  & .Button-visual {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\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,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--button-danger-fgColor-rest);\n  fill: var(--button-danger-iconColor-rest);\n  background-color: var(--button-danger-bgColor-rest);\n  border-color: var(--button-danger-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    color: var(--button-danger-fgColor-hover);\n    fill: var(--button-danger-fgColor-hover);\n    background-color: var(--button-danger-bgColor-hover);\n    border-color: var(--button-danger-borderColor-hover);\n    box-shadow: var(--shadow-resting-small);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-hover);\n      background-color: var(--buttonCounter-danger-bgColor-hover);\n    }\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--button-danger-fgColor-active);\n    fill: var(--button-danger-fgColor-active);\n    background-color: var(--button-danger-bgColor-active);\n    border-color: var(--button-danger-borderColor-active);\n    box-shadow: var(--button-danger-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-danger-fgColor-disabled);\n    fill: var(--button-danger-fgColor-disabled);\n    background-color: var(--button-danger-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-disabled);\n      background-color: var(--buttonCounter-danger-bgColor-disabled);\n    }\n  }\n\n  & .Counter {\n    color: var(--buttonCounter-danger-fgColor-rest);\n    background-color: var(--buttonCounter-danger-bgColor-rest);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  place-content: center;\n  padding: unset;\n  width: var(--control-medium-size);\n\n  &.Button--small {\n    width: var(--control-small-size);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}

data/app/components/primer/beta/button.html.erb

@@ -1,23 +1,21 @@
-<%= render Primer::ConditionalWrapper.new(condition: tooltip.present?, tag: :div, display: (:block if @block), classes: "Button-withTooltip") do -%>
-  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
-    <span class="<%= @align_content_classes %>">
-      <% if leading_visual %>
-        <span class="Button-visual Button-leadingVisual">
-          <%= leading_visual %>
-        </span>
-      <% end %>
-      <span class="Button-label"><%= trimmed_content %></span>
-      <% if trailing_visual %>
-        <span class="Button-visual Button-trailingVisual">
-          <%= trailing_visual %>
-        </span>
-      <% end %>
-    </span>
-    <% if trailing_action %>
-      <span class="Button-visual Button-trailingAction">
-        <%= trailing_action %>
+<%= render @base_button_class.new(**@system_arguments) do -%>
+  <span class="<%= @align_content_classes %>">
+    <% if leading_visual %>
+      <span class="Button-visual Button-leadingVisual">
+        <%= leading_visual %>
+      </span>
+    <% end %>
+    <span class="Button-label"><%= trimmed_content %></span>
+    <% if trailing_visual %>
+      <span class="Button-visual Button-trailingVisual">
+        <%= trailing_visual %>
       </span>
     <% end %>
-  <% end -%>
-  <%= tooltip %>
+  </span>
+  <% if trailing_action %>
+    <span class="Button-visual Button-trailingAction">
+      <%= trailing_action %>
+    </span>
+  <% end %>
 <% end -%>
+<%= tooltip %>

data/app/components/primer/beta/button.pcss

@@ -58,11 +58,6 @@
   }
 }
 
-.Button-withTooltip {
-  position: relative;
-  display: inline-block;
-}
-
 a.Button,
 summary.Button {
   &:hover {

data/app/components/primer/beta/button.rb

@@ -93,6 +93,7 @@ module Primer
         Primer::Alpha::Tooltip.new(**system_arguments)
       }
 
+      # @param base_button_class [Class] The button class to render.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
       # @param block [Boolean] Whether button is full-width with `display: block`.
@@ -102,6 +103,7 @@ module Primer
       # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
+        base_button_class: Primer::Beta::BaseButton,
         scheme: DEFAULT_SCHEME,
         size: DEFAULT_SIZE,
         block: false,
@@ -109,6 +111,7 @@ module Primer
         disabled: false,
         **system_arguments
       )
+        @base_button_class = base_button_class
         @scheme = scheme
         @block = block
 

data/app/components/primer/beta/button_group.css

@@ -1 +1 @@
-.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}
+.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>:first-child .Button{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.ButtonGroup>:last-child .Button{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}

data/app/components/primer/beta/button_group.css.json

@@ -6,9 +6,7 @@
     ".ButtonGroup .Button:active",
     ".ButtonGroup .Button:focus",
     ".ButtonGroup .Button:hover",
-    ".ButtonGroup>.Button-withTooltip:first-child .Button",
-    ".ButtonGroup>:first-child",
-    ".ButtonGroup>.Button-withTooltip:last-child .Button",
-    ".ButtonGroup>:last-child"
+    ".ButtonGroup>:first-child .Button",
+    ".ButtonGroup>:last-child .Button"
   ]
 }

data/app/components/primer/beta/button_group.css.map

@@ -1 +1 @@
-{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,4DAAqD,CADrD,yDAEF,CAEA,6EAGE,6DAAsD,CADtD,0DAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n\n  & .Button {\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  & > :first-child,\n  & > :first-child.Button-withTooltip .Button {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  & > :last-child,\n  & > :last-child.Button-withTooltip .Button {\n    border-top-right-radius: var(--borderRadius-medium);\n    border-bottom-right-radius: var(--borderRadius-medium);\n  }\n}\n"]}
+{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAuBF,CArBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,kCAEE,4DAAqD,CADrD,yDAEF,CAEA,iCAEE,6DAAsD,CADtD,0DAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n\n  & .Button {\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  & > :first-child .Button {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  & > :last-child .Button {\n    border-top-right-radius: var(--borderRadius-medium);\n    border-bottom-right-radius: var(--borderRadius-medium);\n  }\n}\n"]}

data/app/components/primer/beta/button_group.html.erb

@@ -1,5 +1,7 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% buttons.each do |button| %>
-    <%= button %>
+    <div>
+      <%= button %>
+    </div>
   <% end %>
 <% end %>

data/app/components/primer/beta/button_group.pcss

@@ -13,14 +13,12 @@
     }
   }
 
-  & > :first-child,
-  & > :first-child.Button-withTooltip .Button {
+  & > :first-child .Button {
     border-top-left-radius: var(--borderRadius-medium);
     border-bottom-left-radius: var(--borderRadius-medium);
   }
 
-  & > :last-child,
-  & > :last-child.Button-withTooltip .Button {
+  & > :last-child .Button {
     border-top-right-radius: var(--borderRadius-medium);
     border-bottom-right-radius: var(--borderRadius-medium);
   }

data/app/components/primer/beta/button_group.rb

@@ -6,18 +6,47 @@ module Primer
     class ButtonGroup < Primer::Component
       status :beta
 
-      # Required list of buttons to be rendered.
-      #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>
-      renders_many :buttons, lambda { |**kwargs|
-        kwargs[:size] = @size
-        kwargs[:scheme] = @scheme
-
-        if kwargs[:icon]
-          Primer::Beta::IconButton.new(**kwargs)
-        else
-          Primer::Beta::Button.new(**kwargs)
-        end
+      # @!parse
+      #   # Adds a button.
+      #   #
+      #   # @param icon [Symbol] If included, adds a <%= link_to_component(Primer::Beta::IconButton) %> with the given <%= link_to_octicons %>. Otherwise, a <%= link_to_component(Primer::Beta::Button) %> is added instead.
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
+      #   def with_button(icon: nil, **system_arguments)
+      #   end
+
+      # @!parse
+      #   # Adds a <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>.
+      #   def with_clipboard_copy_button(**system_arguments)
+      #   end
+
+      # List of buttons to be rendered. Add buttons via the `#with_button` and `#with_clipboard_copy_button` methods (see below).
+      renders_many :buttons, types: {
+        button: {
+          renders: lambda { |icon: nil, **kwargs|
+            kwargs[:size] = @size
+            kwargs[:scheme] = @scheme
+
+            if icon
+              Primer::Beta::IconButton.new(icon: icon, **kwargs)
+            else
+              Primer::Beta::Button.new(**kwargs)
+            end
+          },
+
+          as: :button
+        },
+
+        clipboard_copy_button: {
+          renders: lambda { |**kwargs|
+            kwargs[:size] = @size
+            kwargs[:scheme] = @scheme
+            Primer::Beta::ClipboardCopyButton.new(**kwargs)
+          },
+
+          as: :clipboard_copy_button
+        }
       }
 
       # @param scheme [Symbol] DEPRECATED. <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>

data/app/components/primer/beta/clipboard_copy.rb

@@ -4,6 +4,10 @@ module Primer
   module Beta
     # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
     #
+    # This component by itself is not styled as a button, and can therefore only be used in limited circumstances.
+    # If you're looking for a button, consider using <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>
+    # instead.
+    #
     # @accessibility
     #   Always set an accessible label to help the user interact with the component.
     class ClipboardCopy < Primer::Component

data/app/components/primer/beta/clipboard_copy_button.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,
+    # styled as a Primer button. It can be used wherever a button is desired, and works well
+    # with components like `ButtonGroup`.
+    class ClipboardCopyButton < Primer::Beta::Button
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> and <%= link_to_component(Primer::Beta::ClipboardCopy) %>.
+      def initialize(**system_arguments)
+        super(**system_arguments, base_button_class: ClipboardCopyBaseButton)
+      end
+    end
+
+    # Internal
+    #
+    # :nodoc:
+    class ClipboardCopyBaseButton < Primer::Beta::BaseButton
+      def call
+        arguments = @system_arguments.except(:tag)
+        render(Primer::Beta::ClipboardCopy.new(**arguments))
+      end
+    end
+  end
+end

data/app/components/primer/beta/counter.rb

@@ -54,7 +54,7 @@ module Primer
           @system_arguments[:classes],
           SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)]
         )
-        @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
+        @system_arguments[:hidden] = true if count == 0 && hide_if_zero
       end
 
       def call

data/app/components/primer/beta/flash.html.erb

@@ -1,7 +1,7 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= primer_octicon @icon if @icon %><%= content %>
   <% if @dismissible %>
-    <%= render Primer::Beta::IconButton.new(icon: :x, scheme: :invisible, wrapper_arguments: { classes: "flash-close" }, classes: "js-flash-close", "aria-label": "Dismiss alert") %>
+    <%= render Primer::Beta::IconButton.new(icon: :x, scheme: :invisible, classes: "flash-close js-flash-close", "aria-label": "Dismiss alert") %>
   <% end %>
 
   <%= action %>

data/app/components/primer/beta/icon_button.html.erb

@@ -1,6 +1,4 @@
-<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %>
-  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
-    <%= render Primer::Beta::Octicon.new(icon: @icon, classes: "Button-visual") %>
-  <% end -%>
-  <%= render @tooltip if render_tooltip? %>
-<% end %>
+<%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+  <%= render Primer::Beta::Octicon.new(icon: @icon, classes: "Button-visual") %>
+<% end -%>
+<%= render @tooltip if render_tooltip? %>

data/app/components/primer/beta/icon_button.rb

@@ -27,7 +27,6 @@ module Primer
 
       # @param icon [String] Name of <%= link_to_octicons %> to use.
       # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
-      # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
       # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
@@ -37,10 +36,9 @@ module Primer
       # @param show_tooltip [Boolean] Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition.
       # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, show_tooltip: true, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, disabled: false, **system_arguments)
+      def initialize(icon:, scheme: DEFAULT_SCHEME, show_tooltip: true, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, disabled: false, **system_arguments)
         @icon = icon
 
-        @wrapper_arguments = wrapper_arguments
         @show_tooltip = show_tooltip
         @system_arguments = system_arguments
         @system_arguments[:id] ||= self.class.generate_id

data/app/components/primer/beta/label.css

@@ -1 +1 @@
-.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
+.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{-webkit-text-decoration:none;text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}

data/app/components/primer/beta/label.css.map

@@ -1 +1 @@
-{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,4EAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n  position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n  display: inline-block;\n  padding: 0 7px;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-medium);\n  line-height: 18px;\n  white-space: nowrap;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: 2em;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* Large 24px */\n\n.Label--large {\n  padding-right: 10px;\n  padding-left: 10px;\n  line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n  display: inline;\n  padding: 0.12em 0.5em;\n  font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n  color: var(--fgColor-default);\n  border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n  color: var(--fgColor-muted);\n  border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n  color: var(--fgColor-accent);\n  border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n  color: var(--fgColor-success);\n  border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n  color: var(--fgColor-attention);\n  border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n  color: var(--fgColor-severe);\n  border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n  color: var(--fgColor-danger);\n  border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n  color: var(--fgColor-open);\n  border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n  color: var(--fgColor-closed);\n  border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n  color: var(--fgColor-done);\n  border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n  color: var(--fgColor-sponsors);\n  border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
+{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,4BAAqB,CAArB,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,4EAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n  position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n  display: inline-block;\n  padding: 0 7px;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-medium);\n  line-height: 18px;\n  white-space: nowrap;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: 2em;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* Large 24px */\n\n.Label--large {\n  padding-right: 10px;\n  padding-left: 10px;\n  line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n  display: inline;\n  padding: 0.12em 0.5em;\n  font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n  color: var(--fgColor-default);\n  border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n  color: var(--fgColor-muted);\n  border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n  color: var(--fgColor-accent);\n  border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n  color: var(--fgColor-success);\n  border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n  color: var(--fgColor-attention);\n  border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n  color: var(--fgColor-severe);\n  border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n  color: var(--fgColor-danger);\n  border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n  color: var(--fgColor-open);\n  border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n  color: var(--fgColor-closed);\n  border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n  color: var(--fgColor-done);\n  border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n  color: var(--fgColor-sponsors);\n  border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}

data/app/components/primer/beta/link.css

@@ -1 +1 @@
-.Link{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{text-decoration:underline}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}
+.Link{color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{-webkit-text-decoration:none;text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}

data/app/components/primer/beta/link.css.map

@@ -1 +1 @@
-{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,kDAA4B,CAC5B,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,yBACF,CAEA,eACE,8DAKF,CAHE,qBACE,4DACF,CAGF,iBACE,0DAKF,CAHE,uBACE,4DACF,CAGF,aACE,0DAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,4DAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus {\n    text-decoration: underline;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--underline {\n  text-decoration: underline;\n}\n\n.Link--primary {\n  color: var(--fgColor-default) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}
+{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,kDAA4B,CAC5B,4BAAqB,CAArB,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,iCAA0B,CAA1B,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,iCAA0B,CAA1B,yBACF,CAEA,eACE,8DAKF,CAHE,qBACE,4DACF,CAGF,iBACE,0DAKF,CAHE,uBACE,4DACF,CAGF,aACE,0DAMF,CAJE,mBAEE,4BAAqB,CAArB,oBACF,CAMA,wCARE,4DAYF,CAJA,qBAGE,cAAe,CADf,iCAA0B,CAA1B,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus {\n    text-decoration: underline;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--underline {\n  text-decoration: underline;\n}\n\n.Link--primary {\n  color: var(--fgColor-default) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}

data/app/components/primer/beta/nav_list.js

@@ -171,12 +171,14 @@ let NavListElement = class NavListElement extends HTMLElement {
         }
     }
 };
-_NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
+_NavListElement_instances = new WeakSet();
+_NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
     const template = document.createElement('template');
     // eslint-disable-next-line github/no-inner-html
     template.innerHTML = html;
     return document.importNode(template.content, true);
-}, _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
+};
+_NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
     var _a;
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {
@@ -189,16 +191,19 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         }
     }
     return null;
-}, _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
+};
+_NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
     // If we didn't find a match, we compare the selected link to the href of each nav item
     const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
     if (selectedNavItem) {
         return selectedNavItem.closest('.ActionListItem');
     }
     return null;
-}, _NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
+};
+_NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
     return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
-}, _NavListElement_select = function _NavListElement_select(navItem) {
+};
+_NavListElement_select = function _NavListElement_select(navItem) {
     const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
     if (currentlySelectedItem)
         __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
@@ -211,7 +216,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         this.expandItem(parentMenu);
         parentMenu.classList.add('ActionListContent--hasActiveSubItem');
     }
-}, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
+};
+_NavListElement_deselect = function _NavListElement_deselect(navItem) {
     navItem.classList.remove('ActionListItem--navActive');
     if (navItem.children.length > 0) {
         navItem.children[0].removeAttribute('aria-current');
@@ -221,7 +227,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         this.collapseItem(parentMenu);
         parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
     }
-}, _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
+};
+_NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
     var _a;
     if (!navItem.classList.contains('ActionListItem--subItem'))
         return null;

data/app/components/primer/beta/subhead.css

@@ -1 +1 @@
-.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}
+.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--large{font-size:var(--base-size-24,1.5rem)}.Subhead-heading--medium{font-size:var(--text-title-size-medium,1.25rem)}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}

data/app/components/primer/beta/subhead.css.json

@@ -4,6 +4,8 @@
     ".Subhead",
     ".Subhead--spacious",
     ".Subhead-heading",
+    ".Subhead-heading--large",
+    ".Subhead-heading--medium",
     ".Subhead-heading--danger",
     ".Subhead-description",
     ".Subhead-actions",

data/app/components/primer/beta/subhead.css.map

@@ -1 +1 @@
-{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAEE,aAAc,CADd,8CAA2C,CAE3C,OACF,CAEA,wBACE,oCACF,CAEA,yBACE,+CACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.Subhead-heading--large {\n  font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n  font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

data/app/components/primer/beta/subhead.pcss

@@ -16,12 +16,19 @@
 
 /* <h2> sized heading with normal font weight */
 .Subhead-heading {
-  font-size: 24px;
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
   order: 0;
 }
 
+.Subhead-heading--large {
+  font-size: var(--base-size-24);
+}
+
+.Subhead-heading--medium {
+  font-size: var(--text-title-size-medium);
+}
+
 /* Make the text bold and red for dangerous content */
 .Subhead-heading--danger {
   font-weight: var(--base-text-weight-semibold);

data/app/components/primer/beta/subhead.rb

@@ -17,16 +17,24 @@ module Primer
       DEFAULT_HEADING_TAG = :div
       HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
 
+      DEFAULT_HEADING_SIZE = :large
+      HEADING_SIZE_MAP = {
+        DEFAULT_HEADING_SIZE => "Subhead-heading--large",
+        :medium => "Subhead-heading--medium"
+      }.freeze
+      HEADING_SIZE_OPTIONS = HEADING_SIZE_MAP.keys.freeze
+
       # The heading
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::Subhead::HEADING_TAG_OPTIONS)%>
       # @param danger [Boolean] Whether to style the heading as dangerous.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, size: DEFAULT_HEADING_SIZE, **system_arguments|
         system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "Subhead-heading",
+          HEADING_SIZE_MAP[fetch_or_fallback(HEADING_SIZE_OPTIONS, size, DEFAULT_HEADING_SIZE)],
           "Subhead-heading--danger": danger
         )
 

data/app/components/primer/focus_group.js

@@ -15,7 +15,7 @@ const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
 const printable = /^\S$/;
-export default class FocusGroupElement extends HTMLElement {
+class FocusGroupElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _FocusGroupElement_instances.add(this);
@@ -159,6 +159,7 @@ export default class FocusGroupElement extends HTMLElement {
 _FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
     return this.querySelectorAll(menuItemSelector);
 };
+export default FocusGroupElement;
 if (!customElements.get('focus-group')) {
     window.FocusGroupElement = FocusGroupElement;
     customElements.define('focus-group', FocusGroupElement);