primer_view_components 0.1.7 → 0.1.9

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

@@ -1 +1 @@
-.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,8px)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--borderRadius-medium,6px);cursor:pointer;display:block;height:var(--control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;color:var(--color-switch-track-checked-disabled-fg)}.ToggleSwitch-track[aria-checked=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border-color:var(--color-switch-knob-checked-border);transform:translateX(100%)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[aria-disabled=true]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-switch-track-disabled-fg)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-switch-track-checked-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-switch-track-fg);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-switch-knob-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-knob-border);border-radius:var(--borderRadius-medium,6px);bottom:0;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,16px)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small,12px)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size,24px);width:var(--base-size-48,48px)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
+.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,8px)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--borderRadius-medium,6px);cursor:pointer;display:block;height:var(--control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;color:var(--color-switch-track-checked-disabled-fg)}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border-color:var(--color-switch-knob-checked-border);transform:translateX(100%)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--color-switch-track-disabled-fg)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-switch-track-checked-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-switch-track-fg);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-switch-knob-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-knob-border);border-radius:var(--borderRadius-medium,6px);bottom:0;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,16px)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small,12px)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size,24px);width:var(--base-size-48,48px)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}

data/app/components/primer/alpha/toggle_switch.css.json

@@ -12,17 +12,17 @@
     ".ToggleSwitch-track:active",
     ".ToggleSwitch-track:before",
     ".ToggleSwitch-track *",
-    ".ToggleSwitch-track[aria-checked=true][aria-disabled=true]",
-    ".ToggleSwitch-track[aria-checked=true]",
-    ".ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):hover",
-    ".ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):active",
-    ".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob",
-    ".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon",
-    ".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon",
-    ".ToggleSwitch-track[aria-disabled=true]",
-    ".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob",
-    ".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon",
-    ".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-track[aria-pressed=true][disabled]",
+    ".ToggleSwitch-track[aria-pressed=true]",
+    ".ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover",
+    ".ToggleSwitch-track[aria-pressed=true]:not([disabled]):active",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon",
+    ".ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[disabled]",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-knob",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon",
+    ".ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon",
     ".ToggleSwitch-icons",
     ".ToggleSwitch-lineIcon",
     ".ToggleSwitch-circleIcon",

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

@@ -1 +1 @@
-{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,gDACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,6CAA8C,CAC9C,yEAA2E,CAC3E,4CAA8C,CAJ9C,cAAe,CANf,aAAc,CAEd,sCAAwC,CAExC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,8BAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,mDACF,CAEA,2BACE,oDACF,CAEA,wBAEI,2BC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,2DACE,sDAAuD,CAEvD,kBAAyB,CADzB,mDAEF,CAEA,uCACE,qDAAsD,CACtD,qDAyBF,CAtBI,uEACE,2DACF,CAEA,wEACE,4DACF,CAGF,0DACE,oDAAqD,CACrD,oDAAqD,CACrD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,wCAEE,sDAAuD,CACvD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,2DACE,wCAAyC,CACzC,eACF,CAMA,gIACE,2CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,0CAA2C,CAG3C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,kCAAmC,CAGnC,uBAEF,CAEA,mBAME,4CAA6C,CAC7C,wEAA0E,CAC1E,4CAA8C,CAL9C,QAAS,CAMT,mEAAqE,CARrE,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,6BAA8B,CAF9B,2CAA6C,CAC7C,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,CAEA,yBAEE,YAAa,CACb,kBAAoB,CAFpB,8BAGF,CAGE,0CACE,0CACF,CAEA,yCAEE,sCAAwC,CADxC,8BAEF,CAIA,6CACE,2BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n  display: inline-flex;\n}\n\n.ToggleSwitch {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--controlStack-medium-gap-condensed, 8px);\n}\n\n.ToggleSwitch--checked {\n  & .ToggleSwitch-statusOn {\n    height: auto;\n    visibility: visible;\n  }\n\n  & .ToggleSwitch-statusOff {\n    height: 0;\n    visibility: hidden;\n  }\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  width: var(--base-size-64, 64px);\n  height: var(--control-medium-size, 32px);\n  padding: 0;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  background-color: var(--color-switch-track-bg);\n  border: var(--borderWidth-thin, 1px) solid var(--color-switch-track-border);\n  border-radius: var(--borderRadius-medium, 6px);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: background-color, border-color;\n  appearance: none;\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 1px;\n  }\n\n  &:hover {\n    background-color: var(--color-switch-track-hover-bg);\n  }\n\n  &:active {\n    background-color: var(--color-switch-track-active-bg);\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 44px;\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    & * {\n      transition: none;\n    }\n  }\n}\n\n.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {\n  background-color: var(--color-switch-track-disabled-bg);\n  color: var(--color-switch-track-checked-disabled-fg);\n  border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-checked='true'] {\n  background-color: var(--color-switch-track-checked-bg);\n  border-color: var(--color-switch-track-checked-border);\n\n  &:not([aria-disabled='true']) {\n    &:hover {\n      background-color: var(--color-switch-track-checked-hover-bg);\n    }\n\n    &:active {\n      background-color: var(--color-switch-track-checked-active-bg);\n    }\n  }\n\n  & .ToggleSwitch-knob {\n    background-color: var(--color-switch-knob-checked-bg);\n    border-color: var(--color-switch-knob-checked-border);\n    transform: translateX(100%);\n  }\n\n  & .ToggleSwitch-lineIcon {\n    transform: translateX(0%);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    transform: translateX(100%);\n  }\n}\n\n.ToggleSwitch-track[aria-disabled='true'] {\n  cursor: not-allowed;\n  background-color: var(--color-switch-track-disabled-bg);\n  border-color: transparent;\n  transition-property: none;\n\n  & .ToggleSwitch-knob {\n    border-color: var(--color-border-default);\n    box-shadow: none;\n  }\n\n  & .ToggleSwitch-lineIcon {\n    color: var(--color-switch-track-disabled-fg);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    color: var(--color-switch-track-disabled-fg);\n  }\n}\n\n.ToggleSwitch-icons {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n  line-height: 0;\n  color: var(--color-switch-track-checked-fg);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(-100%);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n  line-height: 0;\n  color: var(--color-switch-track-fg);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(0);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  width: 50%;\n  background-color: var(--color-switch-knob-bg);\n  border: var(--borderWidth-thin, 1px) solid var(--color-switch-knob-border);\n  border-radius: var(--borderRadius-medium, 6px);\n  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: transform;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleSwitch-status {\n  position: relative;\n  font-size: var(--text-body-size-medium, 14px);\n  line-height: 1.5;\n  color: var(--color-fg-default);\n  text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n  width: var(--base-size-16, 16px);\n  display: flex;\n  margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n  & .ToggleSwitch-status {\n    font-size: var(--text-body-size-small, 12px);\n  }\n\n  & .ToggleSwitch-track {\n    width: var(--base-size-48, 48px);\n    height: var(--control-xsmall-size, 24px);\n  }\n}\n\n.ToggleSwitch--disabled {\n  & .ToggleSwitch-status {\n    color: var(--color-fg-muted);\n  }\n}\n\n.ToggleSwitch-statusOn {\n  height: 0;\n  visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n  height: auto;\n  visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n  flex-direction: row-reverse;\n\n  & .ToggleSwitch-status {\n    text-align: left;\n  }\n}\n",null]}
+{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,gDACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,6CAA8C,CAC9C,yEAA2E,CAC3E,4CAA8C,CAJ9C,cAAe,CANf,aAAc,CAEd,sCAAwC,CAExC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,8BAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,mDACF,CAEA,2BACE,oDACF,CAEA,wBAEI,2BC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDACE,sDAAuD,CAEvD,kBAAyB,CADzB,mDAEF,CAEA,uCACE,qDAAsD,CACtD,qDAyBF,CAtBI,6DACE,2DACF,CAEA,8DACE,4DACF,CAGF,0DACE,oDAAqD,CACrD,oDAAqD,CACrD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,sDAAuD,CACvD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,wCAAyC,CACzC,eACF,CAMA,4GACE,2CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,0CAA2C,CAG3C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,kCAAmC,CAGnC,uBAEF,CAEA,mBAME,4CAA6C,CAC7C,wEAA0E,CAC1E,4CAA8C,CAL9C,QAAS,CAMT,mEAAqE,CARrE,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,6BAA8B,CAF9B,2CAA6C,CAC7C,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,CAEA,yBAEE,YAAa,CACb,kBAAoB,CAFpB,8BAGF,CAGE,0CACE,0CACF,CAEA,yCAEE,sCAAwC,CADxC,8BAEF,CAIA,6CACE,2BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n  display: inline-flex;\n}\n\n.ToggleSwitch {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--controlStack-medium-gap-condensed, 8px);\n}\n\n.ToggleSwitch--checked {\n  & .ToggleSwitch-statusOn {\n    height: auto;\n    visibility: visible;\n  }\n\n  & .ToggleSwitch-statusOff {\n    height: 0;\n    visibility: hidden;\n  }\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  width: var(--base-size-64, 64px);\n  height: var(--control-medium-size, 32px);\n  padding: 0;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  background-color: var(--color-switch-track-bg);\n  border: var(--borderWidth-thin, 1px) solid var(--color-switch-track-border);\n  border-radius: var(--borderRadius-medium, 6px);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: background-color, border-color;\n  appearance: none;\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 1px;\n  }\n\n  &:hover {\n    background-color: var(--color-switch-track-hover-bg);\n  }\n\n  &:active {\n    background-color: var(--color-switch-track-active-bg);\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 44px;\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    & * {\n      transition: none;\n    }\n  }\n}\n\n.ToggleSwitch-track[aria-pressed='true'][disabled] {\n  background-color: var(--color-switch-track-disabled-bg);\n  color: var(--color-switch-track-checked-disabled-fg);\n  border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n  background-color: var(--color-switch-track-checked-bg);\n  border-color: var(--color-switch-track-checked-border);\n\n  &:not([disabled]) {\n    &:hover {\n      background-color: var(--color-switch-track-checked-hover-bg);\n    }\n\n    &:active {\n      background-color: var(--color-switch-track-checked-active-bg);\n    }\n  }\n\n  & .ToggleSwitch-knob {\n    background-color: var(--color-switch-knob-checked-bg);\n    border-color: var(--color-switch-knob-checked-border);\n    transform: translateX(100%);\n  }\n\n  & .ToggleSwitch-lineIcon {\n    transform: translateX(0%);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    transform: translateX(100%);\n  }\n}\n\n.ToggleSwitch-track[disabled] {\n  cursor: not-allowed;\n  background-color: var(--color-switch-track-disabled-bg);\n  border-color: transparent;\n  transition-property: none;\n\n  & .ToggleSwitch-knob {\n    border-color: var(--color-border-default);\n    box-shadow: none;\n  }\n\n  & .ToggleSwitch-lineIcon {\n    color: var(--color-switch-track-disabled-fg);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    color: var(--color-switch-track-disabled-fg);\n  }\n}\n\n.ToggleSwitch-icons {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n  line-height: 0;\n  color: var(--color-switch-track-checked-fg);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(-100%);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n  line-height: 0;\n  color: var(--color-switch-track-fg);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(0);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  width: 50%;\n  background-color: var(--color-switch-knob-bg);\n  border: var(--borderWidth-thin, 1px) solid var(--color-switch-knob-border);\n  border-radius: var(--borderRadius-medium, 6px);\n  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: transform;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleSwitch-status {\n  position: relative;\n  font-size: var(--text-body-size-medium, 14px);\n  line-height: 1.5;\n  color: var(--color-fg-default);\n  text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n  width: var(--base-size-16, 16px);\n  display: flex;\n  margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n  & .ToggleSwitch-status {\n    font-size: var(--text-body-size-small, 12px);\n  }\n\n  & .ToggleSwitch-track {\n    width: var(--base-size-48, 48px);\n    height: var(--control-xsmall-size, 24px);\n  }\n}\n\n.ToggleSwitch--disabled {\n  & .ToggleSwitch-status {\n    color: var(--color-fg-muted);\n  }\n}\n\n.ToggleSwitch-statusOn {\n  height: 0;\n  visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n  height: auto;\n  visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n  flex-direction: row-reverse;\n\n  & .ToggleSwitch-status {\n    text-align: left;\n  }\n}\n",null]}

data/app/components/primer/alpha/toggle_switch.d.ts

@@ -6,7 +6,7 @@ declare class ToggleSwitchElement extends HTMLElement {
     get csrf(): string | null;
     get csrfField(): string;
     isRemote(): boolean;
-    toggle(): void;
+    toggle(): Promise<void>;
     turnOn(): void;
     turnOff(): void;
     isOn(): boolean;

data/app/components/primer/alpha/toggle_switch.html.erb

@@ -1,6 +1,6 @@
 <%= render(Primer::BaseComponent.new(tag: "toggle-switch", **@system_arguments)) do %>
   <span class="ToggleSwitch-statusIcon">
-    <%= render(Primer::Beta::Octicon.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
+    <%= render(Primer::Beta::Octicon.new(size: :small, color: :danger, icon: :"alert-fill", hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
     <%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
   </span>
   <%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
@@ -8,7 +8,7 @@
     <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
   <% end %>
 
-  <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", role: "switch", data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, aria: { checked: on?, disabled: disabled?, label: "Switch" })) do %>
+  <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@aria_arguments)) do %>
     <%= render(Primer::Box.new(classes: "ToggleSwitch-icons", aria: { hidden: true })) do %>
       <%= render(Primer::Box.new(classes: "ToggleSwitch-lineIcon")) do %>
         <%= render(Primer::BaseComponent.new(

data/app/components/primer/alpha/toggle_switch.js

@@ -26,46 +26,59 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
     isRemote() {
         return this.src != null;
     }
-    toggle() {
+    async toggle() {
         if (this.isDisabled()) {
             return;
         }
-        if (this.isRemote()) {
-            this.setLoadingState();
-            this.submitForm();
-        }
-        else {
+        if (!this.isRemote()) {
             this.performToggle();
+            return;
+        }
+        // toggle immediately to tell screen readers the switch was clicked
+        this.performToggle();
+        this.setLoadingState();
+        try {
+            await this.submitForm();
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                // because we toggle immediately when the switch is clicked, toggle back to the
+                // old state on failure
+                this.setErrorState(error.message || 'An error occurred, please try again.');
+                this.performToggle();
+            }
+            return;
         }
+        this.setSuccessState();
     }
     turnOn() {
         if (this.isDisabled()) {
             return;
         }
-        this.switch.setAttribute('aria-checked', 'true');
+        this.switch.setAttribute('aria-pressed', 'true');
         this.classList.add('ToggleSwitch--checked');
     }
     turnOff() {
         if (this.isDisabled()) {
             return;
         }
-        this.switch.setAttribute('aria-checked', 'false');
+        this.switch.setAttribute('aria-pressed', 'false');
         this.classList.remove('ToggleSwitch--checked');
     }
     isOn() {
-        return this.switch.getAttribute('aria-checked') === 'true';
+        return this.switch.getAttribute('aria-pressed') === 'true';
     }
     isOff() {
         return !this.isOn();
     }
     isDisabled() {
-        return this.switch.getAttribute('aria-disabled') === 'true';
+        return this.switch.getAttribute('disabled') != null;
     }
     disable() {
-        this.switch.setAttribute('aria-disabled', 'true');
+        this.switch.setAttribute('disabled', 'disabled');
     }
     enable() {
-        this.switch.setAttribute('aria-disabled', 'false');
+        this.switch.removeAttribute('disabled');
     }
     performToggle() {
         if (this.isOn()) {
@@ -76,9 +89,10 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
         }
     }
     setLoadingState() {
-        this.disable();
         this.errorIcon.setAttribute('hidden', 'hidden');
         this.loadingSpinner.removeAttribute('hidden');
+        const event = new CustomEvent('toggleSwitchLoading', { bubbles: true });
+        this.dispatchEvent(event);
     }
     setSuccessState() {
         const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
@@ -95,43 +109,31 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
             this.errorIcon.removeAttribute('hidden');
         }
         this.loadingSpinner.setAttribute('hidden', 'hidden');
-        this.enable();
     }
     async submitForm() {
         const body = new FormData();
         if (this.csrf) {
             body.append(this.csrfField, this.csrf);
         }
-        body.append('value', this.isOn() ? '0' : '1');
+        body.append('value', this.isOn() ? '1' : '0');
+        if (!this.src)
+            throw new Error('invalid src');
+        let response;
         try {
-            if (!this.src)
-                throw new Error('invalid src');
-            let response;
-            try {
-                response = await fetch(this.src, {
-                    credentials: 'same-origin',
-                    method: 'POST',
-                    headers: {
-                        'Requested-With': 'XMLHttpRequest'
-                    },
-                    body
-                });
-            }
-            catch (error) {
-                throw new Error('A network error occurred, please try again.');
-            }
-            if (response.ok) {
-                this.setSuccessState();
-                this.performToggle();
-            }
-            else {
-                throw new Error(await response.text());
-            }
+            response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                headers: {
+                    'Requested-With': 'XMLHttpRequest'
+                },
+                body
+            });
         }
         catch (error) {
-            if (error instanceof Error) {
-                this.setErrorState(error.message || 'An error occurred, please try again.');
-            }
+            throw new Error('A network error occurred, please try again.');
+        }
+        if (!response.ok) {
+            throw new Error(await response.text());
         }
     }
 };
@@ -146,7 +148,7 @@ __decorate([
 ], ToggleSwitchElement.prototype, "errorIcon", void 0);
 __decorate([
     debounce(300)
-], ToggleSwitchElement.prototype, "submitForm", null);
+], ToggleSwitchElement.prototype, "toggle", null);
 ToggleSwitchElement = __decorate([
     controller
 ], ToggleSwitchElement);

data/app/components/primer/alpha/toggle_switch.pcss

@@ -70,17 +70,17 @@
   }
 }
 
-.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
+.ToggleSwitch-track[aria-pressed='true'][disabled] {
   background-color: var(--color-switch-track-disabled-bg);
   color: var(--color-switch-track-checked-disabled-fg);
   border-color: transparent;
 }
 
-.ToggleSwitch-track[aria-checked='true'] {
+.ToggleSwitch-track[aria-pressed='true'] {
   background-color: var(--color-switch-track-checked-bg);
   border-color: var(--color-switch-track-checked-border);
 
-  &:not([aria-disabled='true']) {
+  &:not([disabled]) {
     &:hover {
       background-color: var(--color-switch-track-checked-hover-bg);
     }
@@ -105,7 +105,7 @@
   }
 }
 
-.ToggleSwitch-track[aria-disabled='true'] {
+.ToggleSwitch-track[disabled] {
   cursor: not-allowed;
   background-color: var(--color-switch-track-disabled-bg);
   border-color: transparent;

data/app/components/primer/alpha/toggle_switch.rb

@@ -66,6 +66,13 @@ module Primer
           SIZE_MAPPINGS[@size]
         )
 
+        @aria_arguments = {
+          aria: merge_aria(
+            @system_arguments,
+            aria: { pressed: on? }
+          )
+        }
+
         @system_arguments[:src] = @src if @src
 
         return unless @src && @csrf_token

data/app/components/primer/alpha/toggle_switch.ts

@@ -31,17 +31,35 @@ class ToggleSwitchElement extends HTMLElement {
     return this.src != null
   }
 
-  toggle() {
+  @debounce(300)
+  async toggle() {
     if (this.isDisabled()) {
       return
     }
 
-    if (this.isRemote()) {
-      this.setLoadingState()
-      this.submitForm()
-    } else {
+    if (!this.isRemote()) {
       this.performToggle()
+      return
     }
+
+    // toggle immediately to tell screen readers the switch was clicked
+    this.performToggle()
+    this.setLoadingState()
+
+    try {
+      await this.submitForm()
+    } catch (error) {
+      if (error instanceof Error) {
+        // because we toggle immediately when the switch is clicked, toggle back to the
+        // old state on failure
+        this.setErrorState(error.message || 'An error occurred, please try again.')
+        this.performToggle()
+      }
+
+      return
+    }
+
+    this.setSuccessState()
   }
 
   turnOn(): void {
@@ -49,7 +67,7 @@ class ToggleSwitchElement extends HTMLElement {
       return
     }
 
-    this.switch.setAttribute('aria-checked', 'true')
+    this.switch.setAttribute('aria-pressed', 'true')
     this.classList.add('ToggleSwitch--checked')
   }
 
@@ -58,12 +76,12 @@ class ToggleSwitchElement extends HTMLElement {
       return
     }
 
-    this.switch.setAttribute('aria-checked', 'false')
+    this.switch.setAttribute('aria-pressed', 'false')
     this.classList.remove('ToggleSwitch--checked')
   }
 
   isOn(): boolean {
-    return this.switch.getAttribute('aria-checked') === 'true'
+    return this.switch.getAttribute('aria-pressed') === 'true'
   }
 
   isOff(): boolean {
@@ -71,15 +89,15 @@ class ToggleSwitchElement extends HTMLElement {
   }
 
   isDisabled(): boolean {
-    return this.switch.getAttribute('aria-disabled') === 'true'
+    return this.switch.getAttribute('disabled') != null
   }
 
   disable(): void {
-    this.switch.setAttribute('aria-disabled', 'true')
+    this.switch.setAttribute('disabled', 'disabled')
   }
 
   enable(): void {
-    this.switch.setAttribute('aria-disabled', 'false')
+    this.switch.removeAttribute('disabled')
   }
 
   private performToggle(): void {
@@ -91,9 +109,11 @@ class ToggleSwitchElement extends HTMLElement {
   }
 
   private setLoadingState(): void {
-    this.disable()
     this.errorIcon.setAttribute('hidden', 'hidden')
     this.loadingSpinner.removeAttribute('hidden')
+
+    const event = new CustomEvent('toggleSwitchLoading', {bubbles: true})
+    this.dispatchEvent(event)
   }
 
   private setSuccessState(): void {
@@ -116,10 +136,8 @@ class ToggleSwitchElement extends HTMLElement {
     }
 
     this.loadingSpinner.setAttribute('hidden', 'hidden')
-    this.enable()
   }
 
-  @debounce(300)
   private async submitForm() {
     const body = new FormData()
 
@@ -127,36 +145,27 @@ class ToggleSwitchElement extends HTMLElement {
       body.append(this.csrfField, this.csrf)
     }
 
-    body.append('value', this.isOn() ? '0' : '1')
+    body.append('value', this.isOn() ? '1' : '0')
 
-    try {
-      if (!this.src) throw new Error('invalid src')
-
-      let response
-
-      try {
-        response = await fetch(this.src, {
-          credentials: 'same-origin',
-          method: 'POST',
-          headers: {
-            'Requested-With': 'XMLHttpRequest'
-          },
-          body
-        })
-      } catch (error) {
-        throw new Error('A network error occurred, please try again.')
-      }
+    if (!this.src) throw new Error('invalid src')
 
-      if (response.ok) {
-        this.setSuccessState()
-        this.performToggle()
-      } else {
-        throw new Error(await response.text())
-      }
+    let response
+
+    try {
+      response = await fetch(this.src, {
+        credentials: 'same-origin',
+        method: 'POST',
+        headers: {
+          'Requested-With': 'XMLHttpRequest'
+        },
+        body
+      })
     } catch (error) {
-      if (error instanceof Error) {
-        this.setErrorState(error.message || 'An error occurred, please try again.')
-      }
+      throw new Error('A network error occurred, please try again.')
+    }
+
+    if (!response.ok) {
+      throw new Error(await response.text())
     }
   }
 }

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

@@ -41,7 +41,7 @@ module Primer
         system_arguments[:tag] = :ul
         system_arguments[:id] = @list_id
         system_arguments[:classes] = class_names(
-          "ActionListWrap",
+          "ActionListWrap ActionListWrap--inset",
           system_arguments[:classes]
         )
 

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

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

@@ -36,6 +36,7 @@
     ".Button--primary[aria-pressed=true]",
     ".Button--primary:disabled",
     ".Button--primary[aria-disabled=true]",
+    ".Button--primary .Counter",
     ".Button--secondary",
     ".Button--secondary:hover:not(:disabled)",
     ".Button--secondary:active:not(:disabled)",
@@ -50,6 +51,7 @@
     ".Button--invisible[aria-disabled=true]",
     ".Button--invisible.Button--invisible-noVisuals .Button-label",
     ".Button--invisible .Button-visual",
+    ".Button--invisible .Button-visual .Counter",
     ".Button--link",
     ".Button--link:hover:not(:disabled)",
     ".Button--link:focus",

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, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium, 6px);\n  color: var(--color-btn-text);\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, 32px);\n  padding: 0 var(--control-medium-paddingInline-normal, 12px);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4, 4px);\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\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, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--color-btn-counter-bg);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small, 12px);\n  height: var(--control-small-size, 28px);\n  padding: 0 var(--control-small-paddingInline-condensed, 8px);\n  gap: var(--control-small-gap, 4px);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small, calc(20 / 12));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size, 40px);\n  padding: 0 var(--control-large-paddingInline-spacious, 16px);\n  gap: var(--control-large-gap, 8px);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large, calc(48 / 32));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-primer-shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--color-btn-text);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--color-action-list-item-default-active-bg);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--color-accent-fg);\n  }\n\n  & .Button-visual {\n    color: var(--color-fg-muted);\n  }\n}\n\n.Button--link {\n  color: var(--color-accent-fg);\n  fill: var(--color-accent-fg);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  place-content: center;\n  padding: unset;\n  width: var(--control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size, 40px);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
+{"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, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium, 6px);\n  color: var(--color-btn-text);\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, 32px);\n  padding: 0 var(--control-medium-paddingInline-normal, 12px);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4, 4px);\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\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, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--color-btn-counter-bg);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small, 12px);\n  height: var(--control-small-size, 28px);\n  padding: 0 var(--control-small-paddingInline-condensed, 8px);\n  gap: var(--control-small-gap, 4px);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small, calc(20 / 12));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size, 40px);\n  padding: 0 var(--control-large-paddingInline-spacious, 16px);\n  gap: var(--control-large-gap, 8px);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large, calc(48 / 32));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--color-btn-primary-counter-bg);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-primer-shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--color-btn-text);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--color-action-list-item-default-active-bg);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-primer-fg-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--color-accent-fg);\n  }\n\n  & .Button-visual {\n    color: var(--color-fg-muted);\n\n    & .Counter {\n      color: var(--color-fg-default);\n    }\n  }\n}\n\n.Button--link {\n  color: var(--color-accent-fg);\n  fill: var(--color-accent-fg);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-primer-fg-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--color-primer-fg-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  place-content: center;\n  padding: unset;\n  width: var(--control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size, 40px);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}

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

@@ -201,6 +201,11 @@ summary.Button {
     border-color: var(--color-btn-primary-disabled-border);
     fill: var(--color-btn-primary-disabled-text);
   }
+
+  & .Counter {
+    color: inherit;
+    background-color: var(--color-btn-primary-counter-bg);
+  }
 }
 
 /* default (secondary) */
@@ -262,6 +267,10 @@ summary.Button {
 
   & .Button-visual {
     color: var(--color-fg-muted);
+
+    & .Counter {
+      color: var(--color-fg-default);
+    }
   }
 }