primer_view_components 0.13.2 → 0.15.0

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":"AAGA,MACE,oBAAqB,CACrB,8CACF,CAGA,QAmBE,kBAAmB,CAbnB,wBAA6B,CAC7B,sDAAqC,CACrC,kBAAyB,CACzB,gDAAyC,CACzC,8DAAyC,CANzC,cAAe,CAYf,mBAAoB,CACpB,kBAAmB,CAfnB,8CAAuC,CACvC,8CAA2C,CAiB3C,6BAAuB,CANvB,sCAAkC,CAIlC,6BAA8B,CAG9B,qBAAsB,CANtB,2DAAqD,CAdrD,iBAAkB,CAYlB,iBAAkB,CAFlB,uDAAwD,CACxD,4DAAgE,CAPhE,wBAAiB,CAAjB,gBAwCF,CArBE,wBAEI,eCnCN,WAAA,YAAA,SAAA,gBAAA,eAAA,kBAAA,QAAA,4CAAA,UDmCsC,CAEpC,CAIA,cACE,wCACF,CAEA,eACE,eACF,CAEA,6CAGE,eAAgB,CADhB,kBAEF,CAKA,oCACE,4BAAqB,CAArB,oBACF,CAIF,gBAKE,kBAAmB,CAHnB,YAAa,CADb,aAAc,CAEd,uDAAwD,CACxD,4DAA8D,CAE9D,oBAOF,CAHE,kCACE,4CACF,CAIF,4BACE,qBACF,CAKA,eACE,YAAa,CACb,mBAMF,CAJE,wBAEE,sFAA2D,CAD3D,aAEF,CAGF,cACE,cAAe,CAEf,qDAA+C,CAD/C,kBAEF,CAEA,sBACE,uBACF,CAEA,0BACE,iBACF,CAEA,uBACE,wBACF,CAEA,uBACE,+CACF,CAIA,eACE,4CAAsC,CAGtC,mCAA6B,CAF7B,wCAAiC,CACjC,4DAYF,CATE,6BACE,oDACF,CAGE,iDACE,4CACF,CAIJ,eAGE,kCAA6B,CAF7B,uCAAiC,CACjC,0DAYF,CATE,6BACE,iDACF,CAGE,iDACE,2CACF,CAIJ,mBACE,UACF,CAKA,iBAEE,uEAA0C,CAC1C,+EAAoD,CACpD,mFAAoD,CACpD,sEAAwE,CAJxE,sEA6CF,CAvCE,wDACE,sFAAqD,CACrD,0FACF,CAGA,uBE1KA,gFAAqD,CAFrD,kEAAgC,CAChC,mBFmLA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BErLA,gFAAqD,CAFrD,kEAAgC,CAChC,mBFwLA,CAEA,2EAEE,0FAAsD,CACtD,yFACF,CAEA,+DAKE,kFAA4C,CAF5C,4FAAwD,CACxD,gGAAwD,CAFxD,mFAIF,CAEA,0BAEE,8FAA2D,CAD3D,aAEF,CAIF,mBAEE,+CAA0B,CAC1B,uEAAoD,CACpD,2EAAoD,CACpD,wIAAoF,CAJpF,8DA4BF,CAtBE,0DACE,8EAAqD,CACrD,kFACF,CAEA,yCACE,gFAAsD,CACtD,oFACF,CAEA,sCACE,oFAAwD,CACxD,+DACF,CAEA,mEAKE,oEAAqC,CAFrC,2EAAwD,CACxD,+EAAwD,CAFxD,qEAIF,CAGF,mBACE,8DAuCF,CArCE,oCACE,kEACF,CAEA,0DACE,qGAKF,CAHE,yEACE,qEACF,CAGF,+EAEE,uGACF,CAEA,mEAKE,6EAA8C,CAF9C,2GAA0D,CAC1D,2GAA0D,CAF1D,8EAIF,CAGA,6DACE,wEACF,CAEA,kCACE,kEAKF,CAHE,2CACE,oDACF,CAIJ,cAEE,+CAAyB,CAGzB,WAAY,CAJZ,gDAA0B,CAE1B,oBAAqB,CACrB,iBAAkB,CAElB,YAAa,CACb,SAkBF,CAhBE,qDACE,iCAA0B,CAA1B,yBACF,CAEA,gDAEE,kBACF,CAEA,yDAKE,oEAAqC,CAFrC,wBAA6B,CAC7B,kBAAyB,CAFzB,qEAIF,CAIF,gBAEE,qEAAyC,CACzC,sEAAmD,CACnD,0EAAmD,CACnD,wIAAoF,CAJpF,oEA6CF,CAvCE,uDAEE,0EAAwC,CACxC,oFAAoD,CACpD,wFAAoD,CACpD,gEAAuC,CAJvC,2EAUF,CAJE,gEAEE,mGAA2D,CAD3D,wFAEF,CAGF,yEAGE,8EAAyC,CACzC,wFAAqD,CACrD,4FAAqD,CACrD,uFAAgD,CAJhD,+EAKF,CAEA,6DAGE,gFAA2C,CAC3C,0FAAuD,CACvD,+EAAwD,CAHxD,iFASF,CAJE,+EAEE,yGAA8D,CAD9D,8FAEF,CAGF,yBAEE,4FAA0D,CAD1D,iFAEF,CAGF,kBACE,mBAAoB,CAEpB,aAAc,CADd,oBAAqB,CAErB,qCASF,CAPE,gCACE,uCACF,CAEA,gCACE,sCACF,CAIF,sDACE,+CAAgD,CAChD,QAAS,CACT,oCAAqC,CACrC,cACF","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  &[aria-disabled='true'] {\n    cursor: not-allowed;\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, .Button--inactive) {\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, .Button--inactive) {\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, .Button--inactive) {\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, .Button--inactive) {\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, .Button--inactive) {\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\n/* `disabled` takes precedence over `inactive` */\n.Button--inactive:not([aria-disabled='true'], :disabled) {\n  background-color: var(--button-inactive-bgColor);\n  border: 0;\n  color: var(--button-inactive-fgColor);\n  cursor: default;\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

@@ -47,22 +47,13 @@
     transition: none;
   }
 
-  &:disabled {
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-
+  &:disabled,
   &[aria-disabled='true'] {
-    cursor: default;
+    cursor: not-allowed;
     box-shadow: none;
   }
 }
 
-.Button-withTooltip {
-  position: relative;
-  display: inline-block;
-}
-
 a.Button,
 summary.Button {
   &:hover {
@@ -175,7 +166,7 @@ summary.Button {
   border-color: var(--button-primary-borderColor-rest);
   box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     background-color: var(--button-primary-bgColor-hover);
     border-color: var(--button-primary-borderColor-hover);
   }
@@ -224,7 +215,7 @@ summary.Button {
   border-color: var(--button-default-borderColor-rest);
   box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     background-color: var(--button-default-bgColor-hover);
     border-color: var(--button-default-borderColor-hover);
   }
@@ -255,7 +246,7 @@ summary.Button {
     color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
   }
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     background-color: var(--button-invisible-bgColor-hover);
 
     & .Button-visual {
@@ -299,7 +290,7 @@ summary.Button {
   height: unset;
   padding: 0;
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     text-decoration: underline;
   }
 
@@ -325,7 +316,7 @@ summary.Button {
   border-color: var(--button-danger-borderColor-rest);
   box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, .Button--inactive) {
     color: var(--button-danger-fgColor-hover);
     fill: var(--button-danger-fgColor-hover);
     background-color: var(--button-danger-bgColor-hover);
@@ -380,3 +371,11 @@ summary.Button {
     width: var(--control-large-size);
   }
 }
+
+/* `disabled` takes precedence over `inactive` */
+.Button--inactive:not([aria-disabled='true'], :disabled) {
+  background-color: var(--button-inactive-bgColor);
+  border: 0;
+  color: var(--button-inactive-fgColor);
+  cursor: default;
+}

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/group.html.erb

@@ -1,7 +1,9 @@
-<% with_post_list_content do %>
-  <% if show_more_item? %>
-    <%= show_more_item %>
+<nav-list-group>
+  <% with_post_list_content do %>
+    <% if show_more_item? %>
+      <%= show_more_item %>
+    <% end %>
   <% end %>
-<% end %>
 
-<% render_parent %>
+  <% render_parent %>
+</nav-list-group>

data/app/components/primer/beta/nav_list/group.rb

@@ -25,8 +25,8 @@ module Primer
           system_arguments[:hidden] = true
           system_arguments[:href] = "#"
           system_arguments[:data] ||= {}
-          system_arguments[:data][:target] = "nav-list.showMoreItem"
-          system_arguments[:data][:action] = "click:nav-list#showMore"
+          system_arguments[:data][:target] = "nav-list-group.showMoreItem"
+          system_arguments[:data][:action] = "click:nav-list-group#showMore"
           system_arguments[:data][:current_page] = "1"
           system_arguments[:data][:total_pages] = pages.to_s
           system_arguments[:label_arguments] = {

data/app/components/primer/beta/nav_list.d.ts

@@ -1,15 +1,6 @@
 export declare class NavListElement extends HTMLElement {
     #private;
     items: HTMLElement[];
-    showMoreItem: HTMLElement;
-    focusMarkers: HTMLElement[];
-    connectedCallback(): void;
-    get showMoreDisabled(): boolean;
-    set showMoreDisabled(value: boolean);
-    set currentPage(value: number);
-    get currentPage(): number;
-    get totalPages(): number;
-    get paginationSrc(): string;
     selectItemById(itemId: string | null): boolean;
     selectItemByHref(href: string | null): boolean;
     selectItemByCurrentLocation(): boolean;
@@ -18,8 +9,6 @@ export declare class NavListElement extends HTMLElement {
     itemIsExpanded(item: HTMLElement | null): boolean;
     handleItemWithSubItemClick(e: Event): void;
     handleItemWithSubItemKeydown(e: KeyboardEvent): void;
-    private showMore;
-    private setShowMoreItemState;
 }
 declare global {
     interface Window {