primer_view_components 0.43.1 → 0.43.2

data/app/components/primer/alpha/segmented_control.css

@@ -1 +1 @@
-.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-color:var(--controlTrack-borderColor-rest,#0000);border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}:is(.SegmentedControl--small .SegmentedControl-item) .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}:is(.SegmentedControl-item .Button--invisible):active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:-moz-fit-content;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}:is(.SegmentedControl-item .Button):focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}
+.SegmentedControl{--segmentedControl-item-padding:var(--control-small-paddingBlock);--overlay-offset:0.5rem;background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-color:var(--controlTrack-borderColor-rest,#0000);border-radius:var(--borderRadius-medium);display:inline-flex;list-style:none}.SegmentedControl--iconOnly .Button--iconOnly.Button--medium,.SegmentedControl--iconOnly .Button--iconOnly.Button--small{padding-inline:0!important;width:100%}.SegmentedControl--small{--segmentedControl-item-padding:var(--control-xsmall-paddingBlock)}.SegmentedControl--small .SegmentedControl-item{height:var(--control-small-size)}:is(.SegmentedControl--small .SegmentedControl-item) .Button{padding-inline:calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding))}.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-small-size)}.SegmentedControl--medium .SegmentedControl-item{height:var(--control-medium-size)}.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item{width:var(--control-medium-size)}.SegmentedControl-item{border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);display:inline-flex;height:var(--control-medium-size);justify-content:center;padding:var(--segmentedControl-item-padding);position:relative}:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}:is(.SegmentedControl-item .Button--invisible):active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold)}:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin) solid var(--borderColor-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock);margin-top:var(--control-medium-paddingBlock);position:absolute}.SegmentedControl-item .Button{border:0;border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/2);font-weight:var(--base-text-weight-normal);height:100%;min-width:fit-content;padding-inline:calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));width:100%}:is(.SegmentedControl-item .Button):focus-visible{border-radius:calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding)/1);outline-offset:calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin))}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest)}.SegmentedControl-item .Button-content{align-self:stretch;flex:1 1 auto}.SegmentedControl-item .Button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}

data/app/components/primer/alpha/segmented_control.css.map

@@ -1 +1 @@
-{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAIxB,mFAAqF,CACrF,uDAA+D,CAC/D,wCAAyC,CAJzC,mBAAoB,CACpB,eAIF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,kEAgBF,CAdE,gDACE,gCAMF,CAJE,6DAEE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBAME,0CAAiD,CACjD,wCAAyC,CALzC,mBAAoB,CACpB,iCAAkC,CAKlC,sBAAuB,CAHvB,4CAA6C,CAJ7C,iBAmGF,CAxFI,oEACE,iGACF,CAEA,qEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,0EACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAQE,oEAAqE,CADrE,UAAW,CALX,gBAAiB,CAIjB,gDAAiD,CAFjD,6CAA8C,CAH9C,iBAQF,CAIF,+BAKE,QAAS,CAET,uFAA0F,CAH1F,0CAA2C,CAD3C,WAAY,CADZ,0BAAsB,CAAtB,qBAAsB,CAOtB,sGAAuG,CARvG,UAeF,CALE,kDAEE,uFAA0F,CAC1F,mFACF,CAGF,oFACE,wCACF,CAEA,uCAEE,kBAAmB,CADnB,aAEF,CAGA,qCACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n  --overlay-offset: 0.5rem;\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-color: var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--segmentedControl-item-padding);\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  justify-content: center;\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--control-medium-paddingBlock);\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    width: 100%;\n    min-width: fit-content;\n    height: 100%;\n    font-weight: var(--base-text-weight-normal);\n    border: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n\n    &:focus-visible {\n      /* stylelint-disable-next-line primer/borders */\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n  }\n\n  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n  & .Button-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}
+{"version":3,"sources":["segmented_control.pcss"],"names":[],"mappings":"AAEA,kBACE,iEAAkE,CAClE,uBAAwB,CAIxB,mFAAqF,CACrF,uDAA+D,CAC/D,wCAAyC,CAJzC,mBAAoB,CACpB,eAIF,CAGE,yHAGE,0BAA4B,CAD5B,UAEF,CAKF,yBACE,kEAgBF,CAdE,gDACE,gCAMF,CAJE,6DAEE,sGACF,CAIA,2EACE,+BACF,CAKF,iDACE,iCACF,CAGE,4EACE,gCACF,CAMJ,uBAME,0CAAiD,CACjD,wCAAyC,CALzC,mBAAoB,CACpB,iCAAkC,CAKlC,sBAAuB,CAHvB,4CAA6C,CAJ7C,iBAmGF,CAxFI,oEACE,iGACF,CAEA,qEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,4CAKF,CAHE,0EACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAQE,oEAAqE,CADrE,UAAW,CALX,gBAAiB,CAIjB,gDAAiD,CAFjD,6CAA8C,CAH9C,iBAQF,CAIF,+BAKE,QAAS,CAET,uFAA0F,CAH1F,0CAA2C,CAD3C,WAAY,CADZ,qBAAsB,CAOtB,sGAAuG,CARvG,UAeF,CALE,kDAEE,uFAA0F,CAC1F,mFACF,CAGF,oFACE,wCACF,CAEA,uCAEE,kBAAmB,CADnB,aAEF,CAGA,qCACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAIF,6BACE,YAMF,CAJE,oDACE,MAAO,CACP,sBACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n  --segmentedControl-item-padding: var(--control-small-paddingBlock);\n  --overlay-offset: 0.5rem;\n\n  display: inline-flex;\n  list-style: none;\n  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n  border-color: var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl--iconOnly {\n  & .Button--iconOnly.Button--small,\n  & .Button--iconOnly.Button--medium {\n    width: 100%;\n    padding-inline: 0 !important;\n  }\n}\n\n/* sizes */\n\n.SegmentedControl--small {\n  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);\n\n  & .SegmentedControl-item {\n    height: var(--control-small-size);\n\n    & .Button {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));\n    }\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-small-size);\n    }\n  }\n}\n\n.SegmentedControl--medium {\n  & .SegmentedControl-item {\n    height: var(--control-medium-size);\n  }\n\n  &.SegmentedControl--iconOnly {\n    & .SegmentedControl-item {\n      width: var(--control-medium-size);\n    }\n  }\n}\n\n/* item */\n\n.SegmentedControl-item {\n  position: relative;\n  display: inline-flex;\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--segmentedControl-item-padding);\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  justify-content: center;\n\n  /* button color overrides */\n  & .Button--invisible {\n    &:hover:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n    }\n  }\n\n  /* Selected ---------------------------------------- */\n  &.SegmentedControl-item--selected {\n    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n    & .Button {\n      font-weight: var(--base-text-weight-semibold);\n\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    &::before {\n      border-color: transparent !important;\n    }\n\n    & + .SegmentedControl-item::before {\n      border-color: transparent;\n    }\n  }\n\n  /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n  & .Button-label[data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* Separator lines */\n  &:not(:first-child) {\n    &::before {\n      position: absolute;\n      inset: 0 0 0 -1px;\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--control-medium-paddingBlock);\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: var(--control-medium-paddingBlock);\n      content: '';\n      border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n    }\n  }\n\n  /* Button ----------------------------------------- */\n  & .Button {\n    width: 100%;\n    min-width: fit-content;\n    height: 100%;\n    font-weight: var(--base-text-weight-normal);\n    border: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));\n\n    &:focus-visible {\n      /* stylelint-disable-next-line primer/borders */\n      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);\n      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));\n    }\n  }\n\n  & .Button--invisible.Button--invisible-noVisuals .Button-label {\n    color: var(--button-default-fgColor-rest);\n  }\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n  }\n\n  /* use ellipsis with the assumption that icon only variant will be used when not enough space is available */\n  & .Button-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n  display: flex;\n\n  & .SegmentedControl-item {\n    flex: 1;\n    justify-content: center;\n  }\n}\n"]}

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) solid;border-color:#0000;border-radius:var(--borderRadius-medium);color:var(--button-default-fgColor-rest);cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);gap:var(--base-size-4);height:var(--control-medium-size);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal);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){:is(.Button:before){content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button.Button--iconOnly{color:var(--fgColor-muted)}:is(a.Button,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)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest);color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium);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)*-1)}.Button--small{font-size:var(--text-body-size-small);gap:var(--control-small-gap);height:var(--control-small-size);min-width:var(--control-small-size);padding:0 var(--control-small-paddingInline-condensed)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small)}:is(.Button--small .Button-content)>:not(:last-child){margin-right:var(--control-small-gap)}.Button--large{gap:var(--control-large-gap);height:var(--control-large-size);padding:0 var(--control-large-paddingInline-spacious)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large)}:is(.Button--large .Button-content)>:not(:last-child){margin-right:var(--control-large-gap)}.Button--fullWidth{width:100%}.Button--labelWrap{height:unset;min-height:var(--control-medium-size);min-width:-moz-fit-content;min-width:fit-content}.Button--labelWrap .Button-content{align-self:stretch;flex:1 1 auto;padding-block:calc(var(--control-medium-paddingBlock) - var(--base-size-2))}.Button--labelWrap .Button-label{white-space:unset}.Button--labelWrap.Button--small{height:unset;min-height:var(--control-small-size)}.Button--labelWrap.Button--small .Button-content{padding-block:calc(var(--control-small-paddingBlock) - var(--base-size-2))}.Button--labelWrap.Button--large{height:unset;min-height:var(--control-large-size);padding-inline:var(--control-large-paddingInline-spacious)}.Button--labelWrap.Button--large .Button-content{padding-block:calc(var(--control-large-paddingBlock) - var(--base-size-2))}.Button--primary{color:var(--button-primary-fgColor-rest);fill:var(--button-primary-iconColor-rest);background-color:var(--button-primary-bgColor-rest);border-color:var(--button-primary-borderColor-rest);box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary.Button--iconOnly{color:var(--button-primary-iconColor-rest)}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover);border-color:var(--button-primary-borderColor-hover)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis);outline:2px solid var(--focus-outlineColor);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);outline:2px solid var(--focus-outlineColor);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active);box-shadow:var(--button-primary-shadow-selected)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{color:var(--button-primary-fgColor-disabled);fill:var(--button-primary-fgColor-disabled);background-color:var(--button-primary-bgColor-disabled);border-color:var(--button-primary-borderColor-disabled)}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest);color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest);fill:var(--fgColor-muted);background-color:var(--button-default-bgColor-rest);border-color:var(--button-default-borderColor-rest);box-shadow:var(--button-default-shadow-resting),var(--button-default-shadow-inset)}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover);border-color:var(--button-default-borderColor-hover)}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active);border-color:var(--button-default-borderColor-active)}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected);box-shadow:var(--shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled);background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled)}.Button--invisible{color:var(--button-invisible-fgColor-rest)}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{color:var(--button-invisible-fgColor-disabled);fill:var(--button-invisible-fgColor-disabled);background-color:var(--button-invisible-bgColor-disabled);border-color:var(--button-invisible-borderColor-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest)}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}:is(.Button--invisible .Button-visual) .Counter{color:var(--fgColor-default)}.Button--link{color:var(--fgColor-link);display:inline-block;font-size:inherit;height:unset;min-width:-moz-fit-content;min-width:fit-content;padding:0;fill:var(--fgColor-link);border:none}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled);background-color:initial;border-color:#0000}.Button--link .Button-label{white-space:unset}.Button--danger{color:var(--button-danger-fgColor-rest);fill:var(--button-danger-iconColor-rest);background-color:var(--button-danger-bgColor-rest);border-color:var(--button-danger-borderColor-rest);box-shadow:var(--button-default-shadow-resting),var(--button-default-shadow-inset)}.Button--danger.Button--iconOnly{color:var(--button-danger-iconColor-rest)}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover);fill:var(--button-danger-fgColor-hover);background-color:var(--button-danger-bgColor-hover);border-color:var(--button-danger-borderColor-hover);box-shadow:var(--shadow-resting-small)}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover);color:var(--buttonCounter-danger-fgColor-hover)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active);fill:var(--button-danger-fgColor-active);background-color:var(--button-danger-bgColor-active);border-color:var(--button-danger-borderColor-active);box-shadow:var(--button-danger-shadow-selected)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled);fill:var(--button-danger-fgColor-disabled);background-color:var(--button-danger-bgColor-disabled);border-color:var(--button-default-borderColor-disabled)}:is(.Button--danger:disabled,.Button--danger[aria-disabled=true]) .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled);color:var(--buttonCounter-danger-fgColor-disabled)}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest);color:var(--buttonCounter-danger-fgColor-rest)}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size)}.Button--iconOnly.Button--small{width:var(--control-small-size)}.Button--iconOnly.Button--large{width:var(--control-large-size)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
+: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) solid;border-color:#0000;border-radius:var(--borderRadius-medium);color:var(--button-default-fgColor-rest);cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);gap:var(--base-size-4);height:var(--control-medium-size);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal);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){:is(.Button:before){content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button.Button--iconOnly{color:var(--fgColor-muted)}:is(a.Button,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)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest);color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium);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)*-1)}.Button--small{font-size:var(--text-body-size-small);gap:var(--control-small-gap);height:var(--control-small-size);min-width:var(--control-small-size);padding:0 var(--control-small-paddingInline-condensed)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small)}:is(.Button--small .Button-content)>:not(:last-child){margin-right:var(--control-small-gap)}.Button--large{gap:var(--control-large-gap);height:var(--control-large-size);padding:0 var(--control-large-paddingInline-spacious)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large)}:is(.Button--large .Button-content)>:not(:last-child){margin-right:var(--control-large-gap)}.Button--fullWidth{width:100%}.Button--labelWrap{height:unset;min-height:var(--control-medium-size);min-width:fit-content}.Button--labelWrap .Button-content{align-self:stretch;flex:1 1 auto;padding-block:calc(var(--control-medium-paddingBlock) - var(--base-size-2))}.Button--labelWrap .Button-label{white-space:unset}.Button--labelWrap.Button--small{height:unset;min-height:var(--control-small-size)}.Button--labelWrap.Button--small .Button-content{padding-block:calc(var(--control-small-paddingBlock) - var(--base-size-2))}.Button--labelWrap.Button--large{height:unset;min-height:var(--control-large-size);padding-inline:var(--control-large-paddingInline-spacious)}.Button--labelWrap.Button--large .Button-content{padding-block:calc(var(--control-large-paddingBlock) - var(--base-size-2))}.Button--primary{color:var(--button-primary-fgColor-rest);fill:var(--button-primary-iconColor-rest);background-color:var(--button-primary-bgColor-rest);border-color:var(--button-primary-borderColor-rest);box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary.Button--iconOnly{color:var(--button-primary-iconColor-rest)}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover);border-color:var(--button-primary-borderColor-hover)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis);outline:2px solid var(--focus-outlineColor);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);outline:2px solid var(--focus-outlineColor);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active);box-shadow:var(--button-primary-shadow-selected)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{color:var(--button-primary-fgColor-disabled);fill:var(--button-primary-fgColor-disabled);background-color:var(--button-primary-bgColor-disabled);border-color:var(--button-primary-borderColor-disabled)}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest);color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest);fill:var(--fgColor-muted);background-color:var(--button-default-bgColor-rest);border-color:var(--button-default-borderColor-rest);box-shadow:var(--button-default-shadow-resting),var(--button-default-shadow-inset)}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover);border-color:var(--button-default-borderColor-hover)}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active);border-color:var(--button-default-borderColor-active)}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected);box-shadow:var(--shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled);background-color:var(--button-default-bgColor-disabled);border-color:var(--button-default-borderColor-disabled)}.Button--invisible{color:var(--button-invisible-fgColor-rest)}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{color:var(--button-invisible-fgColor-disabled);fill:var(--button-invisible-fgColor-disabled);background-color:var(--button-invisible-bgColor-disabled);border-color:var(--button-invisible-borderColor-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest)}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}:is(.Button--invisible .Button-visual) .Counter{color:var(--fgColor-default)}.Button--link{color:var(--fgColor-link);display:inline-block;font-size:inherit;height:unset;min-width:fit-content;padding:0;fill:var(--fgColor-link);border:none}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{color:var(--control-fgColor-disabled);fill:var(--control-fgColor-disabled);background-color:initial;border-color:#0000}.Button--link .Button-label{white-space:unset}.Button--danger{color:var(--button-danger-fgColor-rest);fill:var(--button-danger-iconColor-rest);background-color:var(--button-danger-bgColor-rest);border-color:var(--button-danger-borderColor-rest);box-shadow:var(--button-default-shadow-resting),var(--button-default-shadow-inset)}.Button--danger.Button--iconOnly{color:var(--button-danger-iconColor-rest)}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover);fill:var(--button-danger-fgColor-hover);background-color:var(--button-danger-bgColor-hover);border-color:var(--button-danger-borderColor-hover);box-shadow:var(--shadow-resting-small)}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover);color:var(--buttonCounter-danger-fgColor-hover)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active);fill:var(--button-danger-fgColor-active);background-color:var(--button-danger-bgColor-active);border-color:var(--button-danger-borderColor-active);box-shadow:var(--button-danger-shadow-selected)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled);fill:var(--button-danger-fgColor-disabled);background-color:var(--button-danger-bgColor-disabled);border-color:var(--button-default-borderColor-disabled)}:is(.Button--danger:disabled,.Button--danger[aria-disabled=true]) .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled);color:var(--buttonCounter-danger-fgColor-disabled)}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest);color:var(--buttonCounter-danger-fgColor-rest)}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size)}.Button--iconOnly.Button--small{width:var(--control-small-size)}.Button--iconOnly.Button--large{width:var(--control-large-size)}.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.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":["/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n/* stylelint-disable primer/spacing */\n\n/* 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  display: inline-flex;\n  min-width: max-content;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  color: var(--button-default-fgColor-rest);\n  text-align: center;\n  cursor: pointer;\n  flex-direction: row;\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  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\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  &.Button--iconOnly {\n    color: var(--fgColor-muted);\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  line-height: var(--text-body-lineHeight-medium);\n  white-space: nowrap;\n  grid-area: text;\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  min-width: var(--control-small-size);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  font-size: var(--text-body-size-small);\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/* allow button label text to wrap */\n\n.Button--labelWrap {\n  min-width: fit-content;\n  height: unset;\n  min-height: var(--control-medium-size);\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n    padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));\n  }\n\n  & .Button-label {\n    white-space: unset;\n  }\n\n  &.Button--small {\n    height: unset;\n    min-height: var(--control-small-size);\n\n    & .Button-content {\n      padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));\n    }\n  }\n\n  &.Button--large {\n    height: unset;\n    min-height: var(--control-large-size);\n    padding-inline: var(--control-large-paddingInline-spacious);\n\n    & .Button-content {\n      padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));\n    }\n  }\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  &.Button--iconOnly {\n    color: var(--button-primary-iconColor-rest);\n  }\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    fill: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-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    fill: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-invisible-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(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));\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    fill: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-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  display: inline-block;\n  min-width: fit-content;\n  height: unset;\n  padding: 0;\n  font-size: inherit;\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\n  border: none;\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    fill: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  & .Button-label {\n      white-space: unset;\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  &.Button--iconOnly {\n    color: var(--button-danger-iconColor-rest);\n  }\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  width: var(--control-medium-size);\n  padding: unset;\n  place-content: center;\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  color: var(--button-inactive-fgColor);\n  cursor: default;\n  background-color: var(--button-inactive-bgColor);\n  border: 0;\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":["/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n/* stylelint-disable primer/spacing */\n\n/* 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  display: inline-flex;\n  min-width: max-content;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  color: var(--button-default-fgColor-rest);\n  text-align: center;\n  cursor: pointer;\n  flex-direction: row;\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  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\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  &.Button--iconOnly {\n    color: var(--fgColor-muted);\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  line-height: var(--text-body-lineHeight-medium);\n  white-space: nowrap;\n  grid-area: text;\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  min-width: var(--control-small-size);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  font-size: var(--text-body-size-small);\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/* allow button label text to wrap */\n\n.Button--labelWrap {\n  min-width: fit-content;\n  height: unset;\n  min-height: var(--control-medium-size);\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n    padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));\n  }\n\n  & .Button-label {\n    white-space: unset;\n  }\n\n  &.Button--small {\n    height: unset;\n    min-height: var(--control-small-size);\n\n    & .Button-content {\n      padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));\n    }\n  }\n\n  &.Button--large {\n    height: unset;\n    min-height: var(--control-large-size);\n    padding-inline: var(--control-large-paddingInline-spacious);\n\n    & .Button-content {\n      padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));\n    }\n  }\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  &.Button--iconOnly {\n    color: var(--button-primary-iconColor-rest);\n  }\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    fill: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-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    fill: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-invisible-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(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));\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    fill: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-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  display: inline-block;\n  min-width: fit-content;\n  height: unset;\n  padding: 0;\n  font-size: inherit;\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\n  border: none;\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    fill: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  & .Button-label {\n      white-space: unset;\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  &.Button--iconOnly {\n    color: var(--button-danger-iconColor-rest);\n  }\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  width: var(--control-medium-size);\n  padding: unset;\n  place-content: center;\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  color: var(--button-inactive-fgColor);\n  cursor: default;\n  background-color: var(--button-inactive-bgColor);\n  border: 0;\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/truncate.css

@@ -1 +1 @@
-.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:-moz-fit-content;max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--control-small-gap)}.Truncate-text--primary:is(.Truncate>.Truncate-text){flex-basis:200%}.Truncate-text--expandable:is(.Truncate>.Truncate-text):active,.Truncate-text--expandable:is(.Truncate>.Truncate-text):focus,.Truncate-text--expandable:is(.Truncate>.Truncate-text):hover{cursor:pointer;flex-shrink:0;max-width:100%!important}
+.Truncate{display:inline-flex;max-width:100%;min-width:0}.Truncate>.Truncate-text{max-width:fit-content;min-width:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.Truncate>.Truncate-text)+.Truncate-text{margin-left:var(--control-small-gap)}.Truncate-text--primary:is(.Truncate>.Truncate-text){flex-basis:200%}.Truncate-text--expandable:is(.Truncate>.Truncate-text):active,.Truncate-text--expandable:is(.Truncate>.Truncate-text):focus,.Truncate-text--expandable:is(.Truncate>.Truncate-text):hover{cursor:pointer;flex-shrink:0;max-width:100%!important}

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

@@ -1 +1 @@
-{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA2BF,CAxBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAkBF,CAhBE,6CAEE,oCACF,CAEA,qDACE,eACF,CAEA,2LAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA2BF,CAxBE,yBAEE,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAkBF,CAhBE,6CAEE,oCACF,CAEA,qDACE,eACF,CAEA,2LAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}

data/app/controllers/primer/view_components/action_menu_controller.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # :nodoc:
+    # :nocov:
+    class ActionMenuController < ApplicationController
+      layout false
+
+      def landing; end
+
+      def deferred
+        render "primer/view_components/action_menu/deferred"
+      end
+
+      def deferred_preload
+        render "primer/view_components/action_menu/deferred_preload"
+      end
+
+      def form_action
+        respond_to do |format|
+          format.html do
+            @value = form_action_selected_value
+            @other_params = form_action_other_params
+          end
+
+          format.json do
+            render json: { value: form_action_selected_value, other_params: form_action_other_params }
+          end
+        end
+      end
+
+      private
+
+      def form_action_selected_value
+        params.permit(:foo)[:foo] || params.permit(foo: [])[:foo]
+      end
+
+      def form_action_other_params
+        params.permit!.to_hash.tap do |all|
+          case all
+          when Hash
+            all.delete("foo")
+            all.delete("authenticity_token")
+          when Array
+            all.delete(form_action_selected_value)
+          end
+        end
+      end
+    end
+  end
+end

data/app/controllers/primer/view_components/application_controller.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # :nodoc:
+    class ApplicationController < ActionController::Base
+      protect_from_forgery with: :exception
+    end
+  end
+end

data/app/controllers/primer/view_components/auto_check_controller.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # For auto-check previews
+    # :nocov:
+    class AutoCheckController < ApplicationController
+      def error
+        render partial: "primer/view_components/auto_check/error_message",
+          locals: { input_value: params[:value] },
+          status: :unprocessable_entity,
+          formats: :html
+      end
+
+      def ok
+        head :ok
+      end
+
+      def accepted
+        render partial: "primer/view_components/auto_check/warning_message",
+          locals: { input_value: params[:value] },
+          status: :accepted,
+          formats: :html
+      end
+
+      def random
+        roll = rand
+        if roll < 0.33
+          head :ok
+        elsif roll < 0.66
+          render partial: "primer/view_components/auto_check/success_message",
+            locals: { input_value: params[:value] },
+            status: :ok,
+            formats: :html
+        else
+          render status: :unprocessable_entity, plain: "Random error!"
+        end
+      end
+    end
+  end
+end

data/app/controllers/primer/view_components/auto_complete_test_controller.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # :nocov:
+    class AutoCompleteTestController < ApplicationController
+      layout false
+
+      FRUIT = [
+          "Apples",
+          "Apricots",
+          "Avocado",
+          "Ackee",
+          "Bananas",
+          "Bilberries",
+          "Blueberries",
+          "Blackberries",
+          "Boysenberries",
+          "Bread fruit",
+          "Cantaloupes (cantalope)",
+          "Chocolate-Fruit",
+          "Cherimoya",
+          "Cherries",
+          "Cranberries",
+          "Cucumbers",
+          "Currants",
+          "Dates",
+          "Durian",
+          "Eggplant",
+          "Elderberries",
+          "Figs",
+          "Gooseberries",
+          "Grapes",
+          "Grapefruit",
+          "Guava"
+        ]
+
+      def index
+        @fruit_list = FRUIT.select { |fruit| fruit.downcase.include?(params["q"].downcase) }
+        @visual_type = params[:visual]
+        @version = params[:version]
+
+        render "primer/view_components/auto_complete_test/index", formats: [:html, :html_fragment]
+      end
+
+      def no_results
+        @fruit_list = FRUIT.select { |fruit| fruit.downcase.include?(params["q"].downcase) }
+        @visual_type = params[:visual]
+        @version = params[:version]
+
+        render "primer/view_components/auto_complete_test/no_results", formats: [:html, :html_fragment]
+      end
+    end
+  end
+end

data/app/controllers/primer/view_components/form_handler_controller.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # :nodoc:
+    # :nocov:
+    class FormHandlerController < ApplicationController
+      layout false
+
+      def form_action
+        respond_to do |format|
+          format.html do
+            @form_params = form_params
+          end
+
+          format.json do
+            render json: { form_params: form_params }
+          end
+        end
+      end
+
+      private
+
+      def form_params
+        params.permit!.to_hash.tap do |all|
+          all.delete("authenticity_token")
+        end
+      end
+    end
+  end
+end

data/app/controllers/primer/view_components/include_fragment_controller.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # :nodoc:
+    # :nocov:
+    class IncludeFragmentController < ApplicationController
+      layout false
+
+      def landing; end
+
+      def deferred
+        render "primer/view_components/include_fragment/deferred"
+      end
+    end
+  end
+end

data/app/controllers/primer/view_components/multi_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # works with app/forms/multi_input_form.rb
+    # :nocov:
+    class MultiController < ApplicationController
+      def create
+        respond_to do |format|
+          format.json { render json: params.permit(:country, :region).to_h }
+        end
+      end
+    end
+  end
+end

data/app/controllers/primer/view_components/nav_list_items_controller.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # For nav list previews/tests
+    # :nocov:
+    class NavListItemsController < ApplicationController
+      layout false
+
+      FOODS = [
+        { label: "Bachelor Chow", href: "/foods/bachelor-chow" },
+        { label: "LöBrau", href: "/foods/lobrau" },
+        { label: "Taco Bellevue Hospital", href: "/foods/taco-bellevue-hospital" },
+        { label: "Olde Fortran", href: "/foods/olde-fortran" },
+        { label: "Space Honey", href: "/foods/space-honey" },
+        { label: "Spice Weasel", href: "/foods/spice-weasel" },
+      ]
+
+      def index
+        items_per_page = 2
+        # the first page is already shown in the nav list, so we need to offset the starting index
+        start_index = (params[:page].to_i - items_per_page) * items_per_page
+        @data = FOODS.slice(start_index, items_per_page)
+        @list = Primer::Beta::NavList::Group.new  # dummy group
+      end
+    end
+  end
+end

data/app/controllers/primer/view_components/select_panel_items_controller.rb

@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # :nodoc:
+    # :nocov:
+    class SelectPanelItemsController < ApplicationController
+      SELECT_PANEL_ITEMS = [
+        { value: 1, title: "Photon torpedo", description: "Starship-mounted missile" },
+        { value: 2, title: "Bat'leth", description: "The Klingon warrior's preferred means of achieving honor" },
+        { value: 3, title: "Phaser", description: "The iconic handheld laser beam" },
+        { value: 4, title: "Lightsaber", description: "An elegant weapon for a more civilized age", recent: true },
+        { value: 5, title: "Proton pack", description: "Ghostbusting equipment" },
+        { value: 6, title: "Sonic screwdriver", description: "The Time Lord's multi-purpose tool" },
+        { value: 7, title: "Tricorder", description: "Handheld sensor device", recent: true },
+        { value: 8, title: "TARDIS", description: "Time and relative dimension in space" }
+      ]
+
+      COOKIE_PREFIX = "select-panel-seen-uuid-"
+
+      def index
+        # delay a bit so loading spinners, etc can be seen
+        sleep 2
+
+        if params.fetch(:fail, "false") == "true"
+          uuid = params[:uuid]
+
+          # use the uuid to succeed for the first request and fail for all subsequent requests
+          if !uuid || seen_uuid?(uuid)
+            render status: :internal_server_error, plain: "An error occurred"
+            return
+          end
+
+          mark_seen_uuid(uuid) if uuid
+        end
+
+        show_results = params.fetch(:show_results, "true") == "true"
+        query = (params[:q] || "").downcase
+
+        results = if show_results
+                    SELECT_PANEL_ITEMS.select do |item|
+                      [item[:title], item[:description]].join(" ").downcase.include?(query)
+                    end
+                  else
+                    []
+                  end
+
+        if allows_selection?
+          results = results.map(&:dup)
+          results.each do |result|
+            if selected_items.any? { |item| result[:title].downcase.include?(item) }
+              result[:selected] = true
+              break if single_select?
+            end
+          end
+        end
+
+        clean_up_old_uuids(uuid)
+
+        respond_to do |format|
+          format.any(:html, :html_fragment) do
+            render(
+              "primer/view_components/select_panel_items/index",
+              locals: { results: results },
+              layout: false,
+              formats: [:html, :html_fragment]
+            )
+          end
+        end
+      end
+
+      private
+
+      def seen_uuid?(uuid)
+        cookies.has_key?(key_for(uuid))
+      end
+
+      def mark_seen_uuid(uuid)
+        cookies[key_for(uuid)] = "true"
+      end
+
+      def clean_up_old_uuids(current_uuid)
+        current_key = key_for(current_uuid)
+        to_delete = []
+
+        cookies.each do |k, _|
+          if k.start_with?(COOKIE_PREFIX) && k != current_key
+            to_delete << k
+          end
+        end
+
+        to_delete.each do |k|
+          cookies.delete(k)
+        end
+      end
+
+      def key_for(uuid)
+        "#{COOKIE_PREFIX}#{uuid}"
+      end
+
+      def selected_items
+        params.fetch(:selected_items, "").downcase.split(",").map(&:strip)
+      end
+
+      def select_variant
+        @select_variant ||= params.fetch(:select_variant, Primer::Alpha::SelectPanel::DEFAULT_SELECT_VARIANT).to_sym
+      end
+
+      def single_select?
+        select_variant == :single
+      end
+
+      def multi_select?
+        select_variant == :multiple
+      end
+
+      def allows_selection?
+        Primer::Alpha::SelectPanel::SELECT_VARIANT_OPTIONS.include?(select_variant)
+      end
+    end
+  end
+end

data/app/controllers/primer/view_components/toggle_switch_controller.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Primer
+  module ViewComponents
+    # For toggle switch previews/tests
+    # :nocov:
+    class ToggleSwitchController < ApplicationController
+      class << self
+        attr_accessor :last_request
+      end
+
+      rescue_from ActionController::InvalidAuthenticityToken, with: :handle_invalid_authenticity_token
+
+      before_action :reject_non_ajax_request
+
+      def create
+        # lol this is so not threadsafe
+        self.class.last_request = request
+
+        sleep 1 unless Rails.env.test?
+
+        if params[:fail] == "true"
+          render status: :internal_server_error, plain: "Something went wrong."
+          return
+        end
+
+        head :accepted
+      end
+
+      private
+
+      def handle_invalid_authenticity_token
+        render status: :unauthorized, plain: "Bad CSRF token."
+      end
+
+      # this mimics dotcom behavior
+      def reject_non_ajax_request
+        return if request.headers["HTTP_REQUESTED_WITH"] == "XMLHttpRequest"
+
+        head :unprocessable_entity
+      end
+
+      def form_params
+        params.permit(:value, :authenticity_token)
+      end
+    end
+  end
+end

data/app/forms/auto_complete_form.rb

@@ -9,7 +9,7 @@ class AutoCompleteForm < ApplicationForm
       name: :fruit,
       label: "Fruit",
       caption: "Please enter your favorite fruit",
-      src: Primer::UrlHelpers.autocomplete_index_path,
+      src: Primer::UrlHelpers.primer_view_components.autocomplete_index_path,
       validation_message: "Something went wrong"
     )
 

data/app/forms/immediate_validation_form.rb

@@ -8,14 +8,14 @@ class ImmediateValidationForm < ApplicationForm
       name: :has_error,
       label: "Will have error",
       caption: "Every time this checks with the server, it returns an error",
-      auto_check_src: @view_context.example_check_error_path
+      auto_check_src: @view_context.primer_view_components.example_check_error_path
     )
 
     validation_form.text_field(
       name: :no_error,
       label: "Will not error",
       caption: "Will not have an error when it checks the server",
-      auto_check_src: @view_context.example_check_ok_path,
+      auto_check_src: @view_context.primer_view_components.example_check_ok_path,
       validation_message: "This message will go away once you type something"
     )
 
@@ -23,7 +23,7 @@ class ImmediateValidationForm < ApplicationForm
       name: :random_error,
       label: "Random error or success",
       caption: "Server checks will randomly respond with errors or success",
-      auto_check_src: @view_context.example_check_random_path
+      auto_check_src: @view_context.primer_view_components.example_check_random_path
     )
   end
 end